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