vue中常用的指令
v-model='xx'：一般是用在表单元素上，input框内容发生改变，所有用到这个变量的地方都会自动更新
v-text='xx'：相当于 innerText，不能识别结构
v-html='xx'：相当于 innerHTML，能识别结构
v-cloak：专门用来提供解决小胡子的显示问题，需要搭配css使用
当vue编译完成之后，会把这个属性删掉，这是css样式就不起作用了
v-once：有这个指令的标签只会编译一次，后期数据再变，它也不会变
v-pre：有这个指令的标签及其后代元素，vue都不做处理（不经过vue处理），可以用来提升vue的编译效率
v-if='true/false'：控制元素或者组件是否加载，有比较大的切换开销
v-else：跟 v-if 或者 v-eles-if 搭配只用，且中间不能插入其他无关标签或者组件
v-show=true/false：用来控制元素或者组件显示不显示（控制diaplay的属性），有比较大的初始加载开销
v-for='xx in yy'：用来循环的，可以循环数组、数字、字符串、对象等。与v-if同时使用的时候，v-for的优先级要高于v-if的
key 对vue来说，是元素的身份标识，有利于vue的diff计算
key 在同一个for中不能重复。同一个页面或组件中想要使用相同的key值，那么key值所处的v-for不能为兄弟元素
v-bind:prop='value'：用来处理行内属性的一个指令，简写是一个冒号 :
行内属性中 class 和 style 是经常操作的属性，所以vue对这两个属性专门做了加强
:class='{类名1：布尔值，类名2：布尔值，...}' 只有值为true的类才会加上
:style="{css属性名:css属性值}"
v-on:事件名='方法名'：专门用来绑定事件的指令，简写是：@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
[v-cloak] {
opacity: 0;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<h1 v-once>{{name}}</h1>
<h1>{{name}}</h1>
<input type="text" v-model="name">
<ul v-pre>
<li>{{name}}</li>
<li>{{name}}</li>
<li>{{name}}</li>
</ul>
<h4 v-if='1'>{{name}}</h4>
<h4 v-else>我没有</h4>
<div>
<p v-for="(item, index) in arr" :key="index">
<span>{{index}}: {{item}}</span>
</p>
</div>
<div>
<p v-for="(item, index) in arr" :key="index">
<span>{{index}}: {{item}}</span>
</p>
</div>
<p v-bind:name='name'>测试v-bind</p>
<p :name='name'>测试v-bind</p>
<h3 :class="{box:0, box1:1, box2:3}">测试class</h3>
<div :style="{height: he}">{{he}}</div>
<div v-bind="obj">{{name}}</div>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
name: '测试',
arr: [1,2,3,4,5,6],
he: '30px',
obj: {color: 'red', id:111, 'font-size': '20px'}
},
});
</script>
</body>
</html>
