vue指令的使用
<div id="app">
<p>
{{ this.$data.msg }}//使用vm上的$data属性
//{{ }}的语法叫mustache语法
//在DOM结构中使用js语法，这个类型称之为jsx语法糖
</p>
<p>
{{ this._data.msg }}//使用vm上的私有属性_data
</p>
<p>
{{ this.msg }}//使用vm上拥有的msg
</p>
<p>
{{ msg }}//this可以省略
</p>
</div>
mustache语法
mustache语法是一种模板语法，它又叫双大括号语法
vue在使用时有两部分：指令 和 组件
指令
指令需要模板语法的支持，即mustache语法的支持，但不能使用{{ }} ，只使用jsx语法糖（标签内直接显示需要双大括号）.模板语法不支持输出语法（console.log alert prompt）作用：是用来操作DOM的，指令就是绑定在DOM身上的一个属性，这个属性具备一定的功能，这个功能用来操作DOM
指令的使用
格式：v-xxx = “mustache语法”//格式参考angular（ng-xxx）指令
指令名称作用缩写
v-html = “data”将数据展示在一个DOM内容中,可对html标签进行转义v-text = “data”将数据展示在一个DOM内容中，原样输出v-bind:attr = “data”将数据绑定在DOM属性上,数据改变DOM改变:attrv-if=boolean操作的是元素是否存在，初始化时为false时不会创建，节约资源v-show=boolean操作的是元素的display属性一个属性经常切换显示效果时使用v-for=“函数表达式”用来循环渲染数据v-on:事件类型 = “函数表达式”用来绑定事件@事件类型v-model = “函数表达式”双向数据绑定
v-bind:attr 扩展：
:src = “img”//img为data属性
:class 类名指令
有两种形式：推荐使用数组
:class={ [类名]：bool…}//等于一个对象，不加[]会被识别为一般的属性名，加了[]则为data中的属性名，不然单向数据绑定时无法识别
:class = “{[类名]: boolean表达式?true:false}” //可以通过三元运算来实现boolean值得判断 :class = “[类名1,类名2,类名3]”//数据中的类名为data中的属性
:class = “[flag?size:’’]”
:style 样式指令
有两种形式:
:style = “{width:‘100px’}”//直接以对象的形式写要设置的样式
:style = “style”//或者把要设置的样式写成对象放到data中，再用data的属性名使用 :style = “[style,border]”//以数组的形式使用data中的样式对象的属性名
v-if指令（指的是该DOM结构是否存在）
v-if = boolean初始化为假时不渲染，节约开销
单路分支
v-if = “flag”//当为真时,渲染；假时删除或不渲染， 双路分支
v-if = “flag”//当为真时，渲染，不然渲染v-elsev-else //v-if渲染时不渲染 多路分支//就像switch-case
v-if = “flag1”//等价于case flag1v-else-if = “flag2”//等价于case flag2v-else //等价于default
v-show指令（指的是该DOM结构是否显示->display=none/block）
v-show = boolean
v-show 操作的是一个DOM的display样式属性不管v-show的初始值是true或false，DOM结构都会渲染出来，true时可见，false是不可见
v-if vs v-show
v-if 有更高的切换开销， v-show 有更高的初始渲染开销。
需要非常频繁地切换，则使用 v-show 较好； 如果在运行时条件很少改变，则使用 v-if 较好。
v-for（列表渲染）
有两种列表渲染 for in 和 for offor in 列表渲染
带一个参数
<li v-for = " item in num "> {{ item }}
</li>
num 可以是数组，对象，字符串
item表示为值
带两个参数
<li v-for = "( item , key) in arr ">
<p> item -- {{ item }}
</p>
<p> key ---{{ key }}
</p>
</li>
//key 表示为索引值
带三个参数
<li v-for = " (item,key,index) in obj ">
<p> item -- {{ item }}
</p>
<p> key -- {{ key }}
</p>
<p> index -- {{ index }}
</p>
</li>
//index表示obj的下标
事件指令 v-on:事件类型
需要触发的事件都写在methods中
事件传参
e ：事件对象当事件传参时只有一个事件对象，则在指令的函数表达式中可以把事件对象省略。事件传参时如果同时存在 事件对象 和 一般的参数，则在指令的函数表达式中一定要把事件对象写出来，用$event表示
事件的修饰符
格式：v-on:事件类型.修饰符 = ‘函数表达式’ @事件类型.修饰符 = ‘函数表达式’修饰符
.stop --> event.stopPropagation() 阻止事件冒泡.prevent --> event.preventDefault() 阻止事件的默认行为.once --> 只触发一次回调
按键的修饰符
@keyup.修饰符 = 函数表达式
enter 按上 enter键时 触发13 按上 enter键时 触发 （keyCode）能使用按键修饰符的缘由
原因：我们发现当我们需要书写很多下面类似按键判断代码的时候，发现代码在重复，我们希望代码能复用或是简写解决： 它将这部分代码封装在自己的 Vue.js中，然后我们来调用这个功能，我们通过按键修饰符来使用 自定义按键修饰符键盘码
Vue.config.keyCodes.按键名 = code码
v-model 双向数据绑定
vue中通过 v-model 来进行双向数据绑定
v-model只用于表单元素
v-model默认绑定 value属性
v-model修饰符
.trim:去除首尾空格.number:格式化数字.jazy:失去焦点同步一次如果修饰符失效则通过事件绑定在methods种书写逻辑实现修饰符效果
Vue实例化
var vm
= new Vue({
el
: '#app',
data
: {
msg
: 'hello Vue.js'，
arr
: [ 1,2,3,4 ],
obj
: {
id
: 1,
name
: 'yyb',
age
: 18
},
json
: [
'aa',
{
id
: 1,
text
: '睡觉'
},
{
id
: 2,
text
: '敲代码'
}
]
}
})
