指令
Vue中的指令就是指 v- 开头，作用于HTML元素，为绑定的目标元素提供一些特性，因此我们可以将指令看做特殊的HTML特性
表达式
- {{ obj.a }} 表达式
- {{ n + 1 }} 可以添加任何参数运算
- {{ fn(n) }} 可以调用任何函数
- 当值为
undefined或者null时，则不显示 - 也可以使用
<div v-text="表达式"></div>的写法来展示
HTML 内容
v-html 可以使得表达式中的所含的标签生效
<div id="app">
<div v-html="x"></div>
</div>
new Vue({
el: '#app',
data:{
x:<strong>hi</strong>
}
})
显示值为：hi
输出{{ n }}
如果我们要输出{{ n }},直接写入模板的话，则会被模板编译为 n 的值,用v-pre可以不被模板进行编译
<div v-pre>{{ n }}</div> 显示值为：{{ n }}
绑定属性
使用 v-bind 来进行属性的绑定，v-bind 可以简写为 :
- 绑定
src<img v-bind:src="x"/> <img :src="x"/> - 绑定对象
<div :style="{border: '1px solid red', height:100}"></div>
绑定事件
使用 v-on 来进行事件的绑定，v-on 可以简写为 @
<button v-on:click="add">+1</button> // 点击之后运行 add()
<button @click="fn(1)">fn</button> // 点击之后运行 fn(1)
<button @click="n+=1">+1</button> // 点击之后运行 n+1
条件判断
使用 v-if 和 v-else 可以实现条件判断，如果是多重条件可以使用户v-else-if
<div v-if="x>0">x>0</div>
<div v-else-if="x=0">x=0</div>
<div v-else>x<0</div>
只有满足条件的 div 才会显示，否则隐藏
循环
使用 v-for 可以实现循环数组或者对象，使用 v-for 需要在后面添加 :key="xxx"，否则会引起浏览器报错
<ul>
<li v-for="(u,index) in arr" :key="index">
index:{{index}} name:{{u.name}}
</li>
</ul>
<ul>
<li v-for="(value, name) in obj" :key="name">
key:{{name}} value:{{name}}
</li>
</ul>
显示与隐藏
使用 v-show 可以实现显示与隐藏
<div v-show="n%2===0"> n是偶数 </div>
// 近似等于
<div :style="{display:n%2===0?'block':'none'}"> n是偶数 </div>
数据双向绑定
v-modle一般用于input、select、textarea等表单元素上，可以实现无论是data还是渲染的DOM元素的值或者内容发生变化，另一方也作出相应改变，使之值或者内容一致
<div id="app">
<p>{{ content }}</p>
<hr />
<input type="text" v-modle="content" />
</div>
new Vue({
el: '#app',
data:{
content:hi
}
})
v-cloak
网络较慢时，网页加载Vue.js，所以来不及渲染，导致网页显示源代码，可以使用v-cloak解决
<templated>
<div id="app" v-cloak>
{{ context }}
</div>
<templated>
<script>
new Vue({
el: '#app',
data:{
context:hi
}
})
<script>
<style>
[v-cloak]{
display:none
}
</stylr>
v-once
当数据或者内容已经确定，不会再次修改，则可以使用v-once
<div id="app">
<p v-once>{{ context }}</p> // 使用 v-once p标签的内容将不会改变
<hr />
<input type="text" v-modle="context" />
</div>
new Vue({
el: '#app',
data:{
context:hi
}
})
修饰符
为了更好的实现阻止事件冒泡、阻止默认事件等，Vue中提供的已点开头的修饰符
.stop阻止事件冒泡，阻止事件向上级DOM元素传递.prevent阻止默认事件，阻止DOM操作引起的自动的动作.capture捕获冒泡，在有事件冒泡发生时，率先执行有该修饰符的元素.self将事件绑定到自身，只有自己可以触发，避免事件冒泡.once事件只触发一次.ctrl、.alt、.shift、.enter 或者 .13等 用户按下键盘中对应的键触发事件left、right、middle用户按下鼠标对应的按键触发事件.sycn将会写一篇博客进行总结.lazy默认情况v-model在input事件是同步变化的，该修饰符可以变为在change时间同步.number将用户输入的数据绑定为number类型.trim过滤数据首尾的空格
总结
- 模板使用
XML语法 - 使用 {{ }} 插入表达式
- 使用
v-html、v-text、v-on、v-bind操作DOM - 使用
v-if、v-for实现条件判断和循环 - 修饰符中重点搞懂
.stop、.prevent、.enter、.sycn就行了
