countofdane
countofdane

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 表达初始的值不匹配任何的选项，