Vue入门系列(四)Vue模板和指令
2017-05-03 本文已影响949人
娜姐聊前端
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>
指令缩写
- v-bind缩写:
<a v-bind:href="url"></a>
==><a :href="url"></a>
- 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入门系列(五)组件通信
微信公众号: