Vue入门系列（四）Vue模板和指令

Vue模板和Angular模板相似，拥有指令和组件标签。

在渲染层上，Vue2.0引入虚拟DOM。Vue编译器会把模板编译成一个渲染函数（类似React），函数被调用的时候会返回一个虚拟DOM树，其描述了当前页面所处的状态。当发生数据改变时，模板更新重新编译生成一个新的虚拟DOM树，将新树和旧树对比，找到不同点，再最终修改真实的DOM节点。

1. 模板

下面是一个简单的Vue模板例子：

<div id="app">
  <ul>
    <li v-for="todo in todos" v-on:click="todo.done=!todo.done">
      {{todo.title}}
    </li>
  </ul>
</div>

模板的文本数据绑定使用“mushtache”语法，{{}}内插入文本变量。

2.指令

Vue指令以v-开头，作用在HTML元素上，将指令绑定在元素上，给绑定的元素添加一些特殊行为。

Vue常用指令如下：

//更新绑定元素中的内容，类似于$.text()
<p v-text="textStr"></p>

//更新绑定元素中的html内容，类似于$.html()
<p v-html="htmlStr"></p>

//根据表达式的值(true/false)渲染元素。如果isShow为false则不会渲染p标签
<p v-if="isShow"></p>
<p v-else></p>

//根据表达式的值(true/false)显示或隐藏元素。如果isShow为false则p标签样式为"display:none"
<p v-show="isShow"></p>

//用于遍历数据渲染元素或模板。如果list为[1,2,3]则会渲染3个p标签，内容依次为1，2，3
<p v-for="item in list"></p>

//用于在元素上绑定事件。p标签上绑定了clickAction的点击事件
<p v-on:click="clickAction"></p>

//用于在元素上绑定属性值。类似于$.attr("title", "titleStr");
<p v-bind:title="titleStr"></p>

//在表单元素上创建双向数据绑定。一旦input有新的输入，数据inputVal同步更新；反之亦然
<input v-model="inputVal"/>

//修饰符(.xxx)，用于指明指令以一种特殊方式绑定。.prevent代表调用event.preventDefault()方法
<form v-on:submit.prevent="onSubmit"></form>

//过滤器用作文本格式化。filterId和filterText是两个过滤器定义
<div v-bind:id="idStr | filterId">{{text |  filterText}}</div>

指令缩写

1. v-bind缩写：<a v-bind:href="url"></a>==> <a :href="url"></a>
2. v-on缩写：<a v-on:click="doSomething"></a> ==> <a @click="doSomething"></a>

自定义指令

通过自定义指令，可以做一些特殊的改变DOM的行为。
自定义指定注册如下：

Vue.directive('demo', {
  // 钩子函数
  bind(){...}  
  inserted(){...},
  ...
})
// 使用自定义指令
<div v-demo></div>

注册自定义指定最重要是钩子函数，针对具体功能，复写不同的钩子函数。

自定义指令钩子函数	说明
bind	（调用一次）指令第一次绑定到元素时调用
inserted	被绑定元素插入父节点时调用
update	被绑定元素所在的模板更新时调用
componentUpdated	被绑定元素所在模板完成一次更新周期时调用
unbind	（调用一次）指令与元素解绑时调用

参考官网例子，注册自定义指令v-focus，用于自动聚焦一个input元素。

Vue.directive('focus', {
  inserted: function (el) {
    el.focus(); // 聚焦元素
  }
})
//使用指令
<input v-focus>

下一节：Vue入门系列（五）组件通信

微信公众号：