Vue中的模板指令语法与修饰符

指令

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 就行了