VUE.JS 学习笔记（一） VUE指令

在学习VUE.js 过程中的一些笔记，VUE官网:https://cn.vuejs.org/

关于指令

v-bind 指令（缩写  : ）

用于响应式地更新 HTML 属性，例如 <a>标签的 href 属性：

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

 

v-on 指令（缩写 @）

它用于监听 DOM 事件 ，例如<a>标签的click 点击事件：

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

 

v-model指令

用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：

  1. v-bind绑定一个value属性

  2. v-on指令给当前元素绑定input事件

自定义组件使用v-model，应该有以下操作：

1. 接收一个value prop

2. 触发input事件，并传入新值

 

v-if 指令

用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

可以结合 v-else-if，v-else一起使用

 

v-show指令

用于根据条件展示元素，v-show只是简单地切换元素的 CSS property display。v-show 不支持 <template> 元素，也不支持 v-else。

 

v-if vs v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

 

v-for指令

基于一个数组来渲染一个列表，，用于遍历数组渲染。

v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

<script>
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

</script>