1.{

{message}}输出data数据中的message。

2.v-for="todo in todos"输出data数据中的dotos数组

3.v-on:click="aaaa"绑定methods中的aaaa()事件，可以简写为@click

4.v-model="input" 输出data数据中input的值，双向绑定。

5.this.$dispatch("aaa", this.msg)向上派发事件，aaa写在events中

6.:id="branch"表示id的值由data数据中的branch决定，通常用于for循环

<template v-for="branch in branches">

　　<!--:为传入的branch值-->

　　<input type="radio" name="branch" :id="branch" :value="branch" v-model="currentBranch"><label :for="branch">{

{branch}}</label>

</template>

7.:class="{bold: isFolder}"或:class="{isFolder1 > 0 ? 'aaa1' : 'bbb1' }"表示当isFolder为true时class=bold。

8.v-show="open"表示当open为true时显示

9.v-if="isFolder"表示当isFolder为true时显示

10.v-show与v-if的区别为当元素不显示时，v-show可以将data中的open设置为false，实现双向数据绑定

11.子组件获取数据的方式

例：在父级中设置<item class="item" :model="treeData"></item>

子级中使用

Vue.compoent("item", {

props: ['model']

...

})

的方式获取

12.created：生命周期，DOM还未形成之前

13.computed：生命周期，在例如:class="{bold: isFolder}中的isFolder是true还是false的时候执行

14.在子级下的数据data的写法为

data：function() {    return {        open: false    }}

以上的return值表示open的获取，不表示将open返回到父级，与双向绑定无关.

var Person = Vue.extend({    template: "
     
      name: {
   {name}}
      age: {
   {age}}
     
",    data: function() {        return {            name: "lili",            age: 22        }    }});

15.{

{key | filter}}表示key通过filters中的filter()函数进行过滤

16.v-for="entry in data | filterBy filterKey"表示在循环中直接进行数据过滤

16.debounce="300"表示延迟执行300ms

17.v-html相当于

<div v-html="html"></div>

<!-- 相同 -->

<div>{

{

{html}}}</div>

即可以输出html的标签，在表单提交的时候不使用，防止xss攻击

18.watch表示监听

watch: {

    currentBranch: 'fetchData'

}

当打他数据中的currentBranch发生改变时，执行fetchData函数

19.slot的使用

     
    
      
               default header    
      
     
     
    
      
               default body    
      
     
custom header

slot会将defaut中的default header变为custom header。

20.sync实现双向数据绑定，将父级通过props传入到子级中的变量通过子级进行修改，双向绑定后会改变父级中的对应传到子级的那个变量

21.transition添加css属性实现动态效果

例一个class="expand"的属性

.expand-transition {    transition: all .3s ease;    height: 30px;    padding: 10px;    background-color: #eee;    overflow: hidden;}//表示正常情况下的效果.expand-enter, .expand-leave {    height: 0;    padding: 0 10px;    opacity: 0;}//元素在消失或显示的时候展示的效果
     
直接写在html标签中
     
      hello
     
new Vue({    el: '...',    data: {        show: false,        transitionName: 'expand'    }})//写在Vue里

 

写在Vue里

22.

var data = {a: 1};    var vm = new Vue({        el: '#app',        data: data    })    console.log(vm.a === data.a);//true    vm.a = 2;    console.log(data.a);//2    data.a = 3;    console.log(vm.a);//3

23.v-for循环输出，点击事件可以通过设置参数获取位置

例:<button v-on:click="removeTodo($index)">X</button>

23.子级下的子级添加组件的方式

例：

var Person = Vue.extend({});    var Contact = Vue.extend({        template: "
     ",        components: {            'person': Person        }    })

 24.项目实例：