Web前端之路让前端飞技术干货

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>
指令缩写
  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入门系列(五)组件通信

微信公众号:

上一篇 下一篇

猜你喜欢

热点阅读