vue2.3.0笔记

1，使用vue

vue只有一个js文件，像引入jq一样引入就行了

2，数据绑定

<div id=”app”>{{msg}}</div>

<script>

var app=new Vue({

  el:”#app”,

  data:{

    msg:”hello vue !”,

  }

})

</script>

3，绑定属性

<span v-bind:title=”msg”></span>

4，隐藏元素

<span v-if=”seen”>我不见了</span>

var app=new Vue({

  el:”#app”,

  data:{

    seen:false,

  }

})

5，循环

<p v-for=”el in arr”>{{e.age}}</p>

 

var app=new Vue({

  el:”#app”,

  data:{

arr:[

{age:12},

{age:12},

{age:12},

{age:12},

]

  }

})

6，点击事件绑定

<p v-on:click=”m1”>点我</p>

var app=new Vue({

  el:”#app”,

  data:{

    msg:”hhhh”,

  }

  methods:{

m1:function(){

  alert(this.msg);

}

  }

})

7，双向绑定

<input type=”text” v-model=”msg” />{{msg}}

var app=new Vue({

  el:”#app”,

  data:{

    msg:”kkk”,

  }

})

8，自定义组件

1，简单模板

<com1></com1>

 

Vue.component(“com1”,{

  template:”<p>我是一个模板</p>”

})

2，带参数的模板

<com1 v-bind:pro=”kk”></com1>

 

Vue.component(“com1”,{

  prop:”pro”,

  templete:”<p>{{pro}}</p>”

})

var app=new Vue({

  el:”#app”,

  data:{

  kk:”kk123”,

}

})