vue

参考链接： vue全家桶https://segmentfault.com/a/1190000019350009

事件调用：

1.用 JavaScript 直接调用方法

vm.greet()

2.直接在指令上执行

<button v-on:click="counter += 1">{{counter}}</button>

3. 调用

<button v-on:click="add">{{counter}}</button>

4.传参调用

<button v-on:click="reduce(12)>{{counter}}</button>

5.有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

<button v-on:click.prevent="warn('dddd', $event)">submit</button>

warn(v,e) {
        alert(v)
        console.log(e)   //DOM事件
      },

列表渲染：

1. v-for的优先级比v-if的高，当v-for和v-if处于同一个节点时，则在每个v-for循环中，都会对每个item进行v-if的条件判断。 可用于满足指定条件的列表渲染

<li v-for="todo in todos" v-if="!todo.isComplete">
     {{ todo.text }}
</li>

如果是想满足一定条件才渲染列表，则可将 v-if 置于外层元素 (或 template)上

 <ul v-if="todos.length">
     <li v-for="todo in todos">
        {{ todo.text }}
     </li>
</ul>
<p v-else>No todos left!</p>

2. 在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。

<div v-for="(value, key, index) in object">
          {{ index }}. {{ key }}: {{ value }}
</div>

3. 如果我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。

<li v-for="n in evenNumbers">{{n}}</li>
<li v-for="n in even(numbers)">{{n}}</li>
 <div>
     <span v-for="n in 10">{{ n }} </span>
</div>


  methods: {
      even(number) {
        return this.numbers.filter(function (number) {
          return number % 2 === 0
        })
      }
    },
    computed: {
      evenNumbers() {
        return this.numbers.filter(function (number) {
          return number % 2 === 0
        })
      }
    }

4. 【列表渲染的时候要绑定key值】
   当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index" 。
   这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
   为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id。这个特殊的属性相当于 Vue 1.x 的 track-by ，但它的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值 (在这里使用简写)：

<div v-for="item in items" :key="item.id">
    <!-- 内容 -->
</div>