Vue一些注意点

1.Method与计算属性computed的区别

区别在于method每次都执行函数，而computed基于依赖缓存，只要相关值不变，那么就不必再执行函数。

下面，注意Date不是响应式依赖：

computed: {
  now: function () {
    return Date.now()
  }
}

所以使用计算属性

2.v-if与v-show

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

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

相比之下， v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。

一般来说， v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。

令，v-show不支持template语法。

3.v-for

可以v-for="item in items"也可以of

还有可选第二参数作为前项的索引：

<li v-for="(item, index) in items">

也可以用模板渲染父节点或模板，来渲染多个子块。

<ul id="repeat-object" class="demo">
     <li v-for="value in object">
       {{ value }}
     </li>
  </ul>
new Vue({
       el: '#repeat-object',
       data: {
       object: [
        {FirstName: 'John'},
        {LastName: 'Doe'},
        {Age: 30}
      ]
    }
  })

写成这样，输出：

• { "FirstName": "John" }
• { "LastName": "Doe" }
• { "Age": 30 }

将object从数组变为如下：

 
 

  
  
object: {
 
 
 
 

  
  
      FirstName: 'John',
 
 
 
 

  
  
      LastName: 'Doe',
 
 
 
 

  
  
      Age: 30
 
 
 
 

  
  
    }
 
 

那么输出：

• John
• Doe
• 30

此时直接指向的是值了。

还有三参数：v-for="(value, key, index) in object"
还可以用整数，输出10个数字：

<div id="haha">
  <span v-for="n in 10">{{ n }}</span>
</div>
var t=1,n=0;
new Vue({
 el: '#haha',
 data: {
 object: {
 n:n+t
  }
 }
})

很好的例子
4.一些数组方法

• push()：在末尾添加一个或多个元素，并返回新长度
• pop()：删除并返回最后一个元素
• shift()：删除并返回第一个元素
• unshift()：数组开头添加一个或多个元素，并返回新长度
• splice()：删除或替换元素，返回被删除元素。splice（index，number，new ele），用new ele 替换index开始的number个元素
• sort()
• reverse()

5.类似v-on:click(含参)的注意点

<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>

methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
}







 
 

  
  如上，可以传入原生DOM对象。
 
 

 
 

  
  阻止冒泡还有其他方法，即在v-on上使用事件修饰符。常见事件修饰符有：
 
 

 
 

  
  
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
  
  
<!-- 只会触发一次点击 -->
<a v-on:click.once="doThis"></a>



 
 

 
 

  
  有事件修饰符，还有键盘修饰符。
 
 

 
 

  
  
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
 
 

 
 

  
  
<input v-on:keyup.enter="submit">
 
 

 
 

  
  又新增了按键修饰符，和组合键修饰：
 
 

 
 

  
  
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
 
 
6.神奇的v-model

 
 

  
  神奇之处在于会根据控件形式自动选取方法更新元素。
  
  


  
  例子
 
 

 
 

  
  
<div id="che">
      <select v-model="sele"  multiple>
         <option v-for="op in ops" v-bind:value="op.index">{{op.va}}</option>
         
      </select>
      <span>{{sele}}</span>
    </div>
 
 

 
 

  
  
new Vue({
          el: '#che',
          data: {
            sele: [],
            ops:[
                {index:1,va:"s"},
                {index:2,va:"ss"},
                {index:3,va:"ssr"}
            ]
          }
        })
 
 

 
 

  
  若option里绑定value，则会将value值按所选中的放在数组sele开头。
 
 

 
 

  
  若没有绑定value，会将{{op.va}}当做value。若写为{{op.index}}则将index当做value。