vue

[Hame-daani]

mdn

• [x] Creating our first Vue component
• [x] Rendering a list of Vue components

[Hame-daani]

mdn

• [x] Adding a new todo form: Vue events, methods, and models
• [ ] Styling Vue components with CSS
• [x] Using Vue computed properties
• [x] Vue conditional rendering: editing existing todos
• [ ] Focus management with Vue refs

[Hame-daani]

docs

• [x] Introduction
• [x] The Vue Instance
• [x] Template Syntax
• [x] Computed Properties and Watchers
• [x] Class and Style Bindings
• [x] Conditional Rendering
• [x] List Rendering
• [x] Event Handling
• [x] Form Input Bindings
• [x] Components Basics

[Hame-daani]

components in depth

• [x] Component Registration
• [x] Props
• [x] Custom Events
• [x] Slots
• [ ] Dynamic & Async Components
• [ ] Handling Edge Cases

[Hame-daani]

essential notes

- it is possible to use a `JavaScript expression` in a directive argument by wrapping it with square brackets. its evaluated value will be used as the final value for the argument ```vue ``` - computed properties are `cached` based on their reactive dependencies. A computed property will only re-evaluate when some of its `reactive dependencies` have changed ```js computed: { now: function () { // here 'Date' is not reactive return Date.now() } } ``` - `watch` option is most useful when you want to perform `asynchronous` or `expensive` operations in response to changing data ```js watch: { // whenever question changes, this function will run question: function (newQuestion, oldQuestion) { this.answer = 'Waiting for you to stop typing...' this.debouncedGetAnswer() } }, ``` - multiple class binding and js expressions ```vue

``` - When you use the class attribute on a custom component, those classes will be `added` to the component’s root element. ```vue ``` - key modifires ```vue ``` - multiple checkboxes bind to array ```vue Jack John Mike
Checked names: {{ checkedNames }} ``` - typecast input ```vue ``` - v-for also supports an optional second argument for the index of the current item. ```vue

• {{ parentMessage }} - {{ index }} - {{ item.message }}

``` - You can also use v-for to iterate through the properties of an object. also get key and index ```vue

{{ index }}. {{ name }}: {{ value }}

``` - v-for can also take an integer. ```vue

{{ n }}

``` - a component’s data option must be a function, so that each instance can maintain an independent copy of the returned data object ```js data() { return { count: 0 } } ``` - binding props is useful when you don’t know the exact content you’re going to render ahead of time. like fetching data. ```vue ``` - dynamically switch between components, like in a tabbed interface.currentTabComponent can contain either: the name of a registered component, or a component’s options object. ```vue ```

https://www.bezkoder.com/django-vue-js-rest-framework/

[Hame-daani]

components notes

- components tag name should be all-lowercase, must contain a hyphen. ```js Vue.component('my-component-name', { /* ... */ }) ``` - when the parent property updates, it will flow down to the child, but not the other way around. - you should not attempt to mutate a prop inside a child component. - it’s best to define a local data property that uses the prop as its initial value ```js props: ['initialCounter'], data: function () { return { counter: this.initialCounter } } ``` - if The prop is passed in as a raw value that needs to be transformed, it’s best to define a computed property using the prop’s value. ```js props: ['size'], computed: { normalizedSize: function () { return this.size.trim().toLowerCase() } } ``` - custom validator for props ```js propF: { validator: function (value) { // The value must match one of these strings return ['success', 'warning', 'danger'].includes(value) } ``` - components can accept arbitrary attributes, which are added to the component’s root element ```vue ``` - v-on event listeners inside DOM templates will be automatically transformed to lowercase (due to HTML’s case-insensitivity), so v-on:myEvent would become v-on:myevent – making myEvent impossible to listen to. - two way data binding using `.sync` ```vue ``` - A outlet without name implicitly has the name “default”. - To provide content to named slots, we can use the v-slot directive on a