我在这里学习内置指令

• v-model
• v-if
• v-show
• v-else
• v-for
• v-bind

• v-on

v-model表单数据模型双向绑定

example：
① 表单文本输入框效果
<input type="text" v-model.trim="myValue"> {{ myValue }}

export default {data () {return {myValue: '',}
}

1. v-model.lazy 延迟，当我们完成了输入后按enter键才会有输出。
   <input type="text" v-model.lazy="myValue"> {{ myValue }}
   输入内容没有即刻显示:
   点击Enter键后:
   
   ---

2. v-model.number 强制我们输入的值是数字
   <input type="text" v-model.number="myValue"> {{ myValue }}
   此时测试时，会发现效果和什么都不加即
   <input type="text" v-model="myValue"> {{ myValue }} 没有任何区别

但实际上改变的是所输入内容的类型，我们可以对Mustache的输入内容稍作修改，改为{{ typeof myValu }}看看有什么不同之处

1.v-model时，无论是空白、还是纯字母、纯数字或者是数字字母混合，其类型都是string
<input type="text" v-model="myValue"> {{ typeof myValue }}

1. v-model.number时
   当文本框内容为空白或者是输入的第一个字符是非数字是，都是String类型
   
   当输入的内容为纯数字或者是以数字开头的都是number类型。
   对于以数字开头的数字字母混合按理来说应该是String类型，但我们可以看到下图第2,3两个文本框， 当鼠标不再聚焦到文本框时，数字后面的内容就会自动删除。
   

3. v-model.trim 文本框前后输入的空格会被忽略掉。

② 复选框效果

     <input type="checkbox" value="apple" v-model="myBox">apple<input type="checkbox" value="banana" v-model="myBox">banana<input type="checkbox" value="pinapple" v-model="myBox">pinapple{{ myBox }}

export default {data () {return {myBox: []/*因为复选框中有不同的元素，所以给myBox初始化为一个空的数组*/}
}

v-if

v-if指令是根据条件表达式的值来执行元素的插入或者删除行为。

v-show

条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。

v-if 是html代码中有没有被选中的内容
v-show是没有被选中的内容display为none但它是存在的。

v-else

v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。

v-for

指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似
v-for="item in items" (items是一个数组，item是当前被遍历的数组元素。)

v-for 数组渲染和对象渲染的区别

① 数组渲染

export default {
data () {return {hello: 'hello vue.js',list: [{name: 'apple',price: 34},{name: 'banana',price: 56}]
}

<template><div id="app"><ul><li v-for="(item, index) in List">{{ item.name }} + {{ item.price }} + {{ index }}</li></ul></div>
</template>

结果演示为：

• apple + 34 + 0
• banana + 56 + 1

②对象渲染

 data () {return {objList: {name: 'apple',price: 34,color: 'red',weight: '2kg'}}
}

<template><div id="app"><ul><li v-for="(value, key) in objList">{{ key }} + {{ value }}</li></ul></div>
</template>

结果演示：

• name + apple
• price + 34
• color + red
• weight + 2kg

提示：上面所用到的item,index,value,key都是自定义变量。数组渲染可以显示下标如index，对象渲染可以显示对象名如key

v-bind

绑定标签属性。
v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class （可以给这个class添加新的属性）

example:用v-bind绑定class
①class 为一个字符串时
<a v-bind:class = "classStr">to baidu</a>

/*给a标签加上class为red-font的js代码*/
export default {data () {return{classStr: 'red-font'}}
}

②加上的类名也可以是一个对象。
<a v-bind:class = "className">to baidu</a>

/*给a标签加上class为red-font的js代码，根据布尔值判断是否加入*/
export default {data () {return{className: {'red-font'/*这是类名*/ : true,'blue-font': false}}}
}

③以数组的方式添加类名
<a v-bind:class = "className">to baidu</a>

/*数组里面全部的类名都会被加入到a标签中*/
export default {data () {return{className: [red-font, big-font, blue-font]}}
}

④在标签中直接输入要添加的calss
<a v-bind:class = [classA, classB,{red-font: hassErr}]>to baidu</a>

/*同时将classA和classB渲染到了a标签中*/
export default {data () {return{classA: 'isClassA',classB: 'isClassB',hassErr: true}}
}

或者<a v-bind:class = [classA, {red-font: true }]>to baidu</a>

v-on

v-on指令用于给监听DOM事件，它的用语法和v-bind是类似的
v-on可以是自定义事件也可以是浏览器的默认事件。

example：
    浏览器默认事件<a v-on:click="doSomething">
    自定义事件：<a @my-event="onComaMyEvent">

v-bind和v-on的缩写
Vue.js为最常用的两个指令v-bind和v-on提供了缩写方式。v-bind指令可以缩写为一个冒号，v-on指令可以缩写为@符号。