Vue的模块语法

插值操作

即是如何将数据显示在页面的操作，包括：

{{}}：双大括号（Mustache语法），将data中自定义的数据，插入显示到HTML到；
v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译；
v-html：相当于js中的innerHtml，可动态渲染任意的HTML元素，需要注意有可能会导致XSS攻击；
v-text：它的作用和Mustache比较相似，都是用于数据显示在界面中；
v-cloak：浏览器可能会直接显示未编译的Mustache标签，所以就可以使用v-cloak避免这个问题；

显示隐藏操作

v-if：根据条件渲染或销毁元素；
v-show：根据条件显示或隐藏元素，与v-if不同，控制的是CSS属性中的display；
v-on：为元素绑定方法，v-on:click可以简写成@click；

...
<button v-on:click="toggle()">test</button>
// <button @click="toggle()">test</button>
...
...
<script>
  new Vue({
    el: '#app',
    data: {},
    methods: {
      toggle() {
          // 方法内容
      }
    }
  })
</script>
...

属性绑定

Vue除了提供内容上的指令外，还提供了操作属性的指令

v-bind：如果遇到需要绑定标签原始属性或自定义属性时，那么就需要v-bind进行动态绑定；

...
<a v-bind:href="href">Vue官网</a>
...
...
<script>
  new Vue({
    el: '#app',
    data: {
      href: 'https://vuejs.org/'
    }
  })
</script>
...
// v-bind:href 可以简写成 :href

循环操作

v-for：item in items形式；

...
<div v-for="(item, index) in items">{{index}} -- {{item}}</div>
...
...
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      items: ['zhangsan', 'lisi', 'wangwu']
    }
  })
</script>
...

v-key：搭配v-for使用，因为循环添加多个相同的节点后，如果需要新增一个节点，那么此时默认的算法会是想新的节点覆盖旧的节点，然后顺延操作后面的节点，这样效率太低，所以就需要一个唯一标识符，这样就可以直接定位插入的节点位置，高效更新。可以简写成:key。

...
<div v-for="(item, index) in items" v-key="index">{{index}} -- {{item}}</div>
<div v-for="(item, index) in items" :key="index">{{index}} -- {{item}}</div>
...

学习Vue基础（2）

Vue的模块语法

插值操作

显示隐藏操作

属性绑定

循环操作