Vue学习笔记
Vue
script中的写法
<script>
var app=new Vue({
el:"#app",
data:{
msg:"Hello"
}
});
</script>
1、显示
<div>{{msg}}</div>
<div v-text="msg"></div>
<div v-html="msg"></div>
2、属性
<div v-bind:title="title">Hello</div>
3、事件
<div v-on:click="clickHandler"></div>
4、双向绑定
<input v-model="name" />
5、计算属性
computed:{
cal:function{
return this.name+" "+this.age
}
}
6、侦听器
watch:{
cal:function(){
this.number++;
}
}
7、v-if="show"
v-show="show"
v-for="item of list"
8、组件
1) 外部组件
<todo v-for="(item,index) of list" v-bind:content="item" v-bind:index="index" v-on:delete="handleDelete"></todo>
-------------------------------------
Vue.component("todo", {
props: ['content'],
template: '<li v-on:click="handleClick">{{content}}</li>',
methods: {
handleClick: function () {
this.$emit("delete", this.index);
}
}
});
--------------------
handleDelete: function (index) {
this.list.splice(index, 1);
}
