vue.js 片段笔记

关住 公 纵 号 “  阿蒙课程分享    ”  获得学习资料及趣味分享　

1.通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定：

<span v-once>这个将不会改变: {{ msg }} </span>

2.

特性

Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：

<div v-bind:id="dynamicId"> </div>

这同样适用于布尔类特性，如果求值结果是 falsy 的值 (译者注：falsy 不是 false，参考这里)，则该特性将会被删除：

<button v-bind:disabled="isButtonDisabled">Button </button>

3.

使用 JavaScript 表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id"> </div>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 --> {{ var a = 1 }} <!-- 流控制也不会生效，请使用三元表达式 --> {{ if (ok) { return message } }}

4.条件渲染

<div v-if="Math.random() > 0.5">

Now you see me

</div>

<div v-else>

Now you don't

</div>

5.

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

6.

在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。

<ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul>

var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] } })

结果：

• Parent - 0 - Foo
• Parent - 1 - Bar

7. 过滤

    var example1 = new Vue({
      el: '#example1',
      data: {
        numbers: [ 1, 2, 3, 4, 5 ]
      },
      computed: {
        evenNumbers: function () {
          return this.numbers.filter(function (number) {
            return number % 2 === 0
          })
        }
      }
    })

8.

选择列表

单选列表：

<div id="example-5"> <select v-model="selected"> <option disabled value="">请选择 </option> <option>A </option> <option>B </option> <option>C </option> </select> <span>Selected: {{ selected }} </span> </div>

new Vue({ el: '...', data: { selected: '' } })

请选择 A B C Selected: C

如果 v-model 表达初始的值不匹配任何的选项，<select> 元素就会以”未选中”的状态渲染。在 iOS 中，这会使用户无法选择第一个选项，因为这样的情况下，iOS 不会引发 change 事件。因此，像以上提供 disabled 选项是建议的做法。