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

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

//更新绑定元素中的内容，类似于$.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>

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

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