<repo_name>xiaochuan1719/vue-learning<file_sep>/simple-chapter/chapter01/index.js
// 1. 创建一个 Vue 对象
const vm = new Vue({
    el: '#main',
    data: {
        message: 'Hello, Vue!'
    }
});

vm.message = 'Hello, World !!';<file_sep>/simple-chapter/chapter04/index01.js
const vm = new Vue({
    el: '#main',
    data: {
        redText: 'text-red',
        isRed: true,
        isBold: false,
        classObj: {
            'text-red': true,
            'text-bold': false
        },
        isTextRed: true,
        textRedClass: 'text-red',
        textBoldClass: 'text-bold'
    },

    methods: {
        update01() {
            this.redText = 'text-green';
        },

        update02() {
            this.isRed = false;
            this.isBold = true;
        },

        update03() {
            this.isTextRed = false;
        }

    },

    computed: {
        classObject: function () {
            return {
                'text-red': this.isRed && this.isBold,
                'text-bold': this.isRed && !this.isBold
            }
        }
    }
});<file_sep>/simple-chapter/chapter08/index03.js
const vm = new Vue({
    el: '#main',
    data: {
        msg: '',
        age: '',
        msgText: ''
    }
});
<file_sep>/simple-chapter/chapter06/index02.js
const vm = new Vue({
    el: '#main',
    data: {
        exampleObj: {
            name: 'vue.js',
            desc: 'The Progressive JavaScript Framework',
            version: '2.5.17',
            author: '尤雨溪'
        }
    }
});<file_sep>/simple-chapter/chapter08/index02.js
const vm = new Vue({
    el: '#main',
    data: {
        toggle: '',
        pick: '',
        aa: 'aa',
        selected: ''
    }
});<file_sep>/README.md
## vue-learning
Learn Vue2: Step By Step
<file_sep>/simple-chapter/chapter06/todo-list-example.js
/**
 * TodoList item 组件
 * 任务列表组件
 */
Vue.component('todo-item', {
    template: `
        <li>
            {{ title }}  
            <a href="#" v-on:click="$emit('remove')">   X</a>
        </li>
    `,
    props: ['title']
});


const vm = new Vue({
    el: '#todo-list-example',
    data: {
        newTodoText: '',
        todos: [
            {id: 1, title: 'Feed the Cats'},
            {id: 2, title: 'Read a book'},
            {id: 3, title: 'Thinking my lover'}
        ],
        nextTodoId: 4
    },

    methods: {
        addNewTodo: function () {
            this.todos.push({
                id: this.nextTodoId++,
                title: this.newTodoText
            });
            this.newTodoText = '';
        }
    }
});<file_sep>/simple-chapter/chapter04/index02.js
/**
 * - CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名
 * - 直接绑定到一个样式对象通常更好，使得模板简洁清晰；该对象属性及CSS属性名，可以使用驼峰式和kebab-case式
 * - 对象语法常常结合返回对象的计算属性使用
 */
const vm = new Vue({
    el: '#main',
    data: {
        bgColor: 'green',
        textColor: 'red',
        fontSize: 20,
        styleObject: {
            backgroundColor: 'yellow',
            color: '#000',
            fontSize: '30px'
        }
    }
});
<file_sep>/simple-chapter/chapter09/readme.md
## Components Baseic

```js
Vue.component('button-counter', {
    data: function () {
        return {
            count: 0
        }
    },

    template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
});

const vm = new Vue({
    el: '#main'
});

```

```html
<div id="component-example-01">
    <button-counter></button-counter>
</div>
```

#### #data 必须是一个函数

```vuejs
// data 选项必须是一个函数
Vue.component('button-counter', {
    data: function () {
        return {
            count: 0
        }
    },

    template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
});
```

#### #通过Prop向子组件传递数据  

```vuejs
Vue.component('button-counter', {
    props: ['title'],
    template: '<button v-on:click="count++">You clicked {{ title }} {{ count }} times.</button>'
});
```

#### #每个组件必须只有一个根元素  


#### #通过事件向父级组件发送消息 


<file_sep>/simple-chapter/chapter02/readme.md
## Template Syntax

### Interpolations 插值

#### Text 文本

- Mustache 语法

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
```

<p>Message: {{ message }}</p>

<p>Message: {{ message.toUpperCase() }}</p>

```

- Vue 指令

**v-text 和 v-html**

```

<p v-html="message"></p>
<p v-text="data"></p>

// vue 实例
const vm = new Vue({

    el: '#main',
    data: {
        message: '<a href="https://vuejs.org/">https://vuejs.org/</a>'
    }

});


```

**v-cloak 和 v-text指令**
v-cloak 独立指令，不需要表达式。这个指令保持在元素上直到关联实例结束编译。   
常和 CSS 规则： `[v-cloak]{display: none;}` 一起使用，可以隐藏未编译的 Mustache 标签直到实例结束编译。可以解决使用 Mustache 标签插值时的闪烁问题。（配合CSS规则，可以实现很多的效果哦！！）   

```css
[v-cloak] {
    display: none;

}
```
```html
<span v-cloak>{{ message }}</span>
```


v-text 需要表达式，默认是没有插值闪烁问题的，且会覆盖元素里面所有的内容；而使用插值表达式，则只会覆盖表达式部分的内容。



**v-bind 指令**

```

<!-- v-bind 指令 -->
<p>Vue logo: <img v-bind:src="logo_imgUrl" alt="" width="50px" height="50px"></p>
<p>Vue logo: <img :src="logo_imgUrl" alt="" width="50px" height="50px"></p>

```

**v-on 指令**

```

<!-- v-on 指令 -->
<a href="#" v-on:click="alertGo">Link one</a>
<br>
<a href="#" @click="confirmGo(tips)">Link two</a>

```
<file_sep>/simple-chapter/chapter04/readme.md
## Class and Style Bindings

class 和 style 绑定就是专门用来实现动态样式效果的技术


### Binding HTML Classes  绑定HTML class  

### #String Syntax

- v-bind:class='data属性'   
- data属性的属性值为类名   


### #Object Syntax

We can pass an object to v-bind:class to dynamically toggle classes:

```html
<div v-bind:class="{ active: isActive }"></div>
```

- v-bind:class=‘{xxx: boolVal, xxx: boolVal}';  
- 类名 xxx 的存在与否取决于数据属性 boolVal 的 Truthy;  
- 绑定的数据对象不必内联定义在模板里，如下所示：   
```html
  <div v-bind:class="classObject"></div>
```
```js
  new Vue({
    data: {
        classObject: {
          active: true,
          'text-danger': false
        }
      }
  });
```
- 绑定一个返回对象的计算属性；这是一个常用且强大的模式：  
```html
  <div v-bind:class="classObject"></div>
```
```js
  new Vue({
    data: {
        isRed: true,
        isBold: false
    },
    computed: {
        classObject: function () {
            return {
                'text-red': this.isRed && this.isBold,
                'text-bold': this.isRed && !this.isBold
            }
        }
    }
  });
```


### #Array Syntax

We can pass an array to v-bind:class to apply a list of classes:

```html
<div v-bind:class="[activeClass, errorClass]"></div>
```
- v-bind:class="[xxxx, xxxx]";   
- xxxx 为data选项属性，该属性值为 类名   
- 根据条件切换列表中的 class，可以用三元表达式   
```html
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
```
- 当有多个条件 class 时，上述写法有些繁琐。所以在数组语法中也可以使用对象语法  
```html
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
```


### Binding Inline Styles  绑定内联样式 

### #Object Syntax
```html
<div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div>

<div :style="styleObj"></div>

```
```js
new Vue({
    el: '',
    data: {
        textColor: 'red',
        fontSize: 20,
        styleObj: {
            textColor: 'green',
            fontSize: '30px'
        }
    }
});
```

- CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名  
- 直接绑定到一个样式对象通常更好，使得模板简洁清晰；该对象属性及CSS属性名，可以使用驼峰式和kebab-case式  
- 对象语法常常结合返回对象的计算属性使用  


### #Array Syntax  
v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上

```html
<div :style="[baseStyles, overridingStyles]"></div>
```

<file_sep>/simple-chapter/chapter03/readme.md
## Computed Properties and Watchers

### Computed Properties 计算属性
模板里面使用表达式非常方便，但尤大大最初设计的初衷只是做一些简单的运算。如果模板中放入过多的逻辑，将会难以阅读和维护，如：  

```vue

<div id="example">
    {{ message.split('').reverse().join('') }}
</div>

```

所以，对于任何复杂的逻辑，都应当选择使用**计算属性**  


### #举个栗子  

```html

<div id="main">
    <P>Original message: "{{ message }}"</P>
    <p>Reverse message by computed: "{{ reverseMessage }}"</p>
    <p>Reverse message by methods: "{{ reverseWords() }}"</p>
</div>

```

```js

const vm = new Vue({
    el: '#main',

    data: {
        message: 'Hello'
    },

    // 这里声明了一个 reverseMessage 计算属性，提供的函数作为该属性的 getter 函数
    computed: {
        // a computed getter
        reverseMessage: function () {
            // 'this' points to the vm instance
            return this.message.split('').reverse().join('');
        },

        currentDate1: function () {
            return Date.now();
        }
    },
    
    // 这里声明了一个 reverseWords 的方法
    methods: {
        reverseWords: function () {
            return this.message.split('').reverse().join('');
        },

        currentDate2: function () {
            return Date.now();
        }
    },
    
    // 监听器
    watch: {
        // 监听 data 的 firstName 属性是否发生了变化，如果发生变化，则更新
        firstName: function (val) {
            this.fullName = val + ' ' + this.lastName;
        }
    }
});

// 除了使用 watch 选项来实现监听，vue 还提供了命令式 API，如：vm.$watch();
vm.$watch('lastName', function (val) {
    this.fullName = this.firstName + ' ' + val;
});

```

### Computed Properties and Methods 计算属性与方法

- 计算属性的执行时机：初始化时 / 相关属性发生改变时  
- **计算属性是基于它们的依赖（相关属性）进行缓存的**  
  1. 在控制台执行 vm.currentDate1 ,发现还是原来的值  
  2. 在控制台执行 vm.currentDate2 ,发现值改变了  

>我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。
如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。


### Computed Properties and Watcher 计算属性与监听器

Vue does provide a more generic way to observe and react to data changes on a Vue instance: watch properties.   


### Computed Setter 计算属性的setter

Computed properties are by default getter-only, but you can also provide a setter when you need it:

```js

const vm = new Vue({
    el: '#main',
    
    data: {
        firstName: '',
        lastName: ''
    },
    
    computed: {
        fullName: {
            // 当需要读取当前属性时回调，根据相关属性计算并返回当前属性的值
            get() {
                return this.firstName + ' ' + this.lastName;
            },
            
            // 监视当前属性值的变化，当属性值发生改变时回调，更新相关的属性数据
            set(value) {
                const names = value.split(' ');
                this.firstName = names[0];
                this.lastName = names[1];
            }
        }
    }
});

```
  

### Watchers

While computed properties are more appropriate in most cases, there are times when a custom watcher is necessary. 
That’s why Vue provides a more generic way to react to data changes through the watch option. This is most useful 
when you want to perform asynchronous or expensive operations in response to changing data.  

>当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。  



<file_sep>/simple-chapter/chapter05/index01.js
/**
 *
 */
const vm = new Vue({
    el: '#main',
    data: {
        isView: true,
        isViewTemplate: true,
        type: 'B'
    }
});<file_sep>/simple-chapter/chapter07/index01.js
const vm = new Vue({
    el: '#main',
    data: {
        counter: 0
    },

    methods: {
        addCounter: function () {
            this.counter += 2;
        },

        showEventButton: function (event) {
            alert('the counter = ' + this.counter);
            if (event) {
                alert('this tag name: ' + event.target.tagName);  // BUTTON
            }
        },

        say: function (message, event) {
            alert(message);
            if (event) {
                alert('this tag name: ' + event.target.tagName);
            }
        }
    }

});<file_sep>/simple-chapter/chapter05/readme.md
## Conditional Rendering

### v-if
根据表达式的值的真假条件渲染元素。
在切换时元素及它的数据绑定/组件被销毁并重建。如果元素是 <template> ，将提出它的内容作为条件块。

当条件变化时该指令触发过渡效果。

当 v-for 与 v-if 一起使用时，v-for 的优先级高于 v-if 。

### 用**key**管理可复用的元素
Vue会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。给相同的元素都添加一个具有唯一值的 `key` 属性即可：  

```html
<template v-if="loginType === 'username'">
    <label>UserName</label>
    <input type="text" placeholder="Enter your username" key="username-input">
</template>
<template v-else>
    <label>Email</label>
    <input type="text" placeholder="Enter your email addr" key="email-input">
</template>

<button @click="toggleLoginType">Toggle login type</button>
```   

```js
const vm = new Vue({
    el: '#main',
    data: {
        loginType: 'username'
    },

    methods: {
        toggleLoginType () {
            this.loginType === 'username' ? this.loginType = 'email' : this.loginType = 'username';
        }
    }
});
```

如上代码所示，如果不添加 `key` 属性，则两个 input 元素为了更高效地渲染，会进行复用；如果添加了 `key` ，两个 input 元素将完全独立，不再复用。  


### v-show 指令

```html
<template v-show="isShow">
    <p>根据条件展示元素的选项</p>
    <p>不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。</p>
</template>

<button @click="toggleShow">Toggle Show</button>
```

```js
const vm = new Vue({
    el: '#main',
    data: {
        isShow: false
    },

    methods: {
        toggleShow () {
            this.isShow = !this.isShow;
        }
    }
});
```

点击按钮，页面内容并没有发生变化，这是由于 `v-show` 指令不支持 `<template>` 元素，且 `v-else` 也不支持 `<template>` 元素。  

```html
<div class="content" v-show="isShow">
    <p>根据条件展示元素的选项</p>
    <p>不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。</p>
</div>

<button @click="toggleShow">Toggle Show</button>
```

点击按钮，页面内容会隐藏显示交互变化。   

> **v-if 和 v-show 的区别**   
`v-if` 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。  
`v-show` 简单地切换元素的 CSS 属性 display ；不管初始条件是什么，元素总是会被渲染
<file_sep>/simple-chapter/chapter06/index01.js
const vm = new Vue({
    el: '#main',
    data: {
        jsFrameworkArr: [
            { name: 'Angular' },
            { name: 'Vue' },
            { name: 'React' },
            { name: 'Preact' },
            { name: 'Inferno'},
            { name: 'Nerv' },
            { name: 'dva' }
        ],
        javaFrameworkArr: [
            { name: 'Spring' },
            { name: 'SpringBoot' },
            { name: 'SpringCloud' },
            { name: 'SpringData' }
        ]
    }
});
<file_sep>/simple-chapter/chapter06/readme.md
## List Rendering

### Mapping an Array to Elements with `v-for`

```html
<h3>1. 用 v-for 把一个数组对应为一组元素</h3>
<ul id="example01">
    <h4>JavaScript Framework</h4>
    <li v-for="item in jsFrameworkArr">
        {{ item.framework_name }}
    </li>
</ul>
```

```js
const vm = new Vue({
    el: '#main',
    data: {
        jsFrameworkArr: [
            { framework_name: 'Angular' },
            { framework_name: 'Vue' },
            { framework_name: 'React' },
            { framework_name: 'Preact' },
            { framework_name: 'Inferno'},
            { framework_name: 'Nerv' },
            { framework_name: 'dva' }
        ]
    }
});
```

> 在 `v-for` 块中，我们拥有对父作用域属性的完全访问权限；  
> 除了使用 `item in items` 形式语法外，也支持使用 `item of items` 形式的语法；   
> `v-for` 还支持一个可选的第二个参数为当前项的索引；  

```html
<h4>Java Framework</h4>
<ul id="example02">
    <li v-for="(item, index) of javaFrameworkArr">
        {{ index + 1 }} > {{ item.name }}
    </li>
</ul>
```

```js
const vm = new Vue({
    el: '#main',
    data: {
        javaFrameworkArr: [
            { name: 'Spring' },
            { name: 'SpringBoot' },
            { name: 'SpringCloud' },
            { name: 'SpringData' }
        ]
    }
});
```

### `v-for` with an Object

基本格式： v-for="(value, key, index) in object"  

```html
<h3>1. v-for 迭代一个对象 </h3>
<h4>JavaScript Framework</h4>
<ul id="example01">
    <li v-for="(value, key, index) in exampleObj">
        {{ index }} 、 {{ key }}: {{ value }}
    </li>
</ul>
```

```js
const vm = new Vue({
    el: '#main',
    data: {
        exampleObj: {
            name: 'vue.js',
            desc: 'The Progressive JavaScript Framework',
            version: '2.5.17',
            author: '尤雨溪'
        }
    }
});
```

> 在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。  
> 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。  
> 这个默认的模式是高效的，但是只适用于**不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出**。  


### 数组更新检测

#### #编译方法
Vue 包含一组观察数组的变异方法，它们会触发视图更新。  
- push()  
- pop()  
- shift()  
- unshift()  
- splice()  
- sort()  
- reverse()  

#### #替换数组 
变异方法（mutation method），会改变调用这些方法的原始数组。   
非变异方法（non-mutation method）方法，如：filter(), concat(), slice() ；这些不会改变原始数组，但总会返回一个新的数组。  
当使用非变异方法时，可以用新数组替换旧数组： 
```js
example.items = example.items.filter(function(item) {
    return item.message.match(/Foo/);
});
```

#### #注意事项
由于 JS 的限制，Vue 不能检测以下变动的数组：  
1. 利用索引直接设置一个项时，如: `vm.items[indexOfItem] = newValue`  
2. 修改数组长度时，如: `vm.items.length = newLength`  

举个栗子：
```js
const vm = new Vue({
    el: '#example'
    data: {
        items: ['a', 'b', 'c']
    }
});

vm.items[1] = 'x';
vm.items.length = 5;

// 以上均不会响应触发视图的更新

```

解决方案：  
1. 解决第一类问题  
```js
// Vue.set()
Vue.set(vm.items, indexOfItem, newValue);

vm.$set(vm.items, indexOfItem, newValue);

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue);

```
2. 解决第二类问题  
```js
vm.items.splice(newLength);
```


### 对象更改检测注意事项

**Vue 不能检测对象属性的添加或删除**  

对于已经创建的 Vue 实例，Vue 不能动态添加根级别的响应式属性。但可以使用 `Vue.set(object, key, value)` 方法向嵌套对象添加响应式属性。
```js
const vm = new Vue({
    data: {
        userProfile: {
            name: 'Anna'
        }
    }
});


// 嵌套对象 userProfile 中添加一个新的 age 属性
Vue.set(vm.userProfile, 'age', 20);
vm.$set(vm.userProfile, 'age', 18);

// 如果要添加多个新的响应式属性，直接通过 Object.assign(object, newObj) 是不行的，你应该这样做：
vm.userProfile = Object.assign(vm.userProfile, {
   age: 18,
   favoriteColor: 'red, green' 
});


```


### 显示过滤/排序结果

需求：显示一个过滤或排序后的数组，而不实际改变或重置原始数据  
方案：创建返回过滤或排序数组的计算属性和方法  

```html
<li v-for="num in evenNumbers">{{ num }}</li>
<li v-for="num in even(numbers)">{{ num }}</li>
```
```js
const vm = new Vue({
    el: '#main',
    data: {
        numbers: [1, 2, 3, 4, 5]
    },
    
    computed: {
        evenNumbers: function() {
            return this.numbers.filter(function(number) {
                return number % 2 === 0;
            })
        }
    },
    
    methods: {
        even: function(numbers) {
            return numbers.filter(function(number) {
                return number % 2 === 0;
            });
        }
    }
});
```


### v-for with a Range
`v-for` can also take an integer. In this case it will repeat the template that many times.

```html
<div>
    <span v-for="n in 10">{{ n }}</span>
</div>
```

### v-for on a <template>   
Similar to template `v-if`, you can also use a `<template>` tag with `v-for` to render a block of multiple elements.

```html
<ul>
    <template v-for="item of items">
        <li>{{ item.msg }}</li>
        <li class="divider" role="presentation"></li>
    </template>
</ul>
```


### v-for with v-if
When they exist on the same node,  `v-for` has a higher priority than `v-if` .That means the `v-if` will be run on each iteration of the loop separately.

```html
// the example only renders the todos that are not complete
<li v-for="todo in todos" v-if="!todo.isComplete">
    {{ todo.msg }}
</li>
```

### v-for with a Component   
You can directly use `v-for` on a custom component, like any normal element:
```html
<my-component v-for="item in items" v-bind:key="item.id"></my-component>
```
>Notice: In 2.2.0+, when using `v-for` with a component, a `key` is now required.

However, this won't automatically pass any data to the component, because components have isolated scopes of their own.
In order to pass the iterated data into the component, we should also use props:
```html
<my-component 
    v-for="(item, index) in itmes"
    v-bind:item="item"
    v-bind:index="index"
    v-bind:key="item.key"
></my-component>
```





















<file_sep>/simple-chapter/chapter06/index04.js
const vm = new Vue({
    el: '#main',
    data: {
        numbers: [1, 2, 3, 4, 5]
    },

    computed: {
        evenNumbers: function () {
            return this.numbers.filter(function (number) {
                return number % 2 === 0;
            });
        }
    },

    methods: {
        even: function (numbers) {
            return numbers.filter(function (number) {
                return number % 2 === 1;
            });
        }
    }
});
<file_sep>/simple-chapter/chapter07/readme.md
## Event Handling

### Listening to Events

`v-on` 指令可以监听 DOM 事件，并在触发时执行相关逻辑代码。

```html
<div id="example-01">
    <button v-on:click="counter += 1">Add +1</button>
    <p>The button above has been clicked {{ counter }} times.</p>
</div>
```

```js
const vm = new Vue({
    el: '#main',
    data: {
        counter: 0
    }
});
```

- 直接绑定一个方法
```html
<div id="example-02">
    <button v-on:click="addCounter"> Add +2 </button>
    <p>The button above has been clicked {{ counter }} times.</p>
</div>
```

```js
const vm = new Vue({
    el: '#main',
    data: {
        counter: 0
    }, 
    methods: {
        addCounter: function () {
            this.counter += 2;
        }
    }
});
```

- 在内联 javascript 语句中调用方法
```html
<div id="example-03">
    <button v-on:click="showEventButton">Click It</button>
    <button v-on:click="say('Hi', $event)">Say Hi</button>
</div>
```

```js
const vm = new Vue({
    el: '#main',
    data: {
        counter: 0
    }, 
    methods: {
        showEventButton: function (event) {
            alert('the counter = ' + this.counter);
            if (event) {
                alert('this tag name: ' + event.target.tagName);  // BUTTON
            }
        },

        say: function (message, event) {
            alert(message);
            if (event) {
                alert('this tag name: ' + event.target.tagName);
            }
        }
    }
});
```

### Event Modifiers  事件修饰符



### Key Modifiers  按键修饰符


### System Modifier Keys  系统修饰按键<file_sep>/simple-chapter/chapter01/readme.md
## Vue 实例

### 创建一个 Vue 实例

```

const vm = new Vue({
    el: '#main',
    data: {
        message: 'Hello World'
    }
});

```

### 数据与方法


### 实例生命周期钩子


### 声明周期图示


<file_sep>/simple-chapter/chapter08/readme.md
## Form Input Bindings

### Basic Usage

`v-model` 指令：在表单 `<input>`、`<textarea>`、`<select>` 元素上创建双向数据绑定。 `v-model`指令本质上是一个语法糖，负责监听用户的输入事件以更新数据。

> `v-model`会忽略所有表单元素的 `value`、`checked`、`selected` 特性的初始值，而总是将 Vue 实例的数据作为数据源，所以需要在组件的 `data` 选项中声明初始值。  

#### #Text and Multiline Text
> 注意，在 `<textarea>{{mesage}}</textarea>` 文本区域中插值不会生效，应使用 `v-model` 指令代替。
Interpolation on textareas (<textarea>{{text}}</textarea>) won't work. Use v-model instead.  

#### #Checkbox
Single checkbox, boolean value: (单个多选框，绑定到布尔值)
```html
<h3>3. Single Checkbox</h3>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
```

Multiple checkbox, bound to the same Array: (多个复选框，绑定到同一个数组)
```html
<div id="example-04">
    <h3>3. Multiple Checkbox</h3>
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked Names: {{ checkedNames }}</span>
</div>
```

#### #Radio 


#### #Select


### Value Bindings
对于单选按钮，复选框及选择框的选项，`v-model` 绑定的值通常是静态字符串（对于复选框也可以是布尔值）:  

```html

<!-- 当选中是，picked 为字符串 ‘a’ -->
<input type="radio" v-model="picked" value="a">

<!-- toggle 为 true 或 false -->
<input type="checkbox" v-model="toggle">

<!-- 当选中第一个选项时，selected 为字符串 ’aaa‘ -->
<select v-model="selected">
    <option value=aaa">AAA</option>
</select>

```

但有时我们可能需要把值绑定到 Vue 实例的一个动态属性上，这时可以用 `v-bind` 实现，且这个属性可以不是字符串。  


### Modifiers

#### #.lazy
默认情况下，`v-model` 在每次 `input` 事件触发后将输入框的值与数据进行同步  
添加 `laze` 修饰符，从而转变为使用 `change` 事件进行同步（失去焦点时）
```html
<input v-model.lazy="msg" >
```

#### #.number

#### #.trim<file_sep>/simple-chapter/chapter05/index03.js
const vm = new Vue({
    el: '#main',
    data: {
        isShow: false,
        styleObj: {
            color: 'red',
            fontWeight: 'Bold'
        }
    },

    methods: {
        toggleShow () {
            this.isShow = !this.isShow;
        }
    }
});<file_sep>/simple-chapter/chapter09/index01.js
Vue.component('button-counter', {
    props: ['title'],
    data: function () {
        return {
            count: 0
        }
    },

    template: '<button v-on:click="count++">You clicked {{ title }} {{ count }} times.</button>'
});

const vm = new Vue({
    el: '#main'
});
