vue的挂载点,模版,实例之间的关系
<div id="root">
<h1>hello{{msg}}</h1> //模版内容 1
</div>
<script>
new Vue({
el:"#root",
template: '<h1>hello{{msg}}</h1>' //模版内容 2
data:{
msg: "hello wolld"
}
})
</script>
vue的属性绑定/数据双向绑定
<div id="root">
<div :title="title"> hello world</div>
<input v-model="content">
<div>{{content}}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
title: "this is hello world",
content: "this is content",
}
})
</script>
vue中的计算属性/侦听器
<div id="root">
姓:<input v-model="fristName">
名:<input v-model="lastName">
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
fristName: "姓名",
lastName: "姓名",
count: 0
},
computed: {
fullName: function(){
return this.fristName+''+this.lastName;
}
},
watch:{
fullName: function(){
this.count ++
}
}
})
</script>
todolist 功能实例
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item v-for="(item, index) of list"
:key="index"
:content="item"
:index="index"
@delete = "handleDelete"
>
</todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{
props:['content', 'index'],
template: '<li @click="handleClick">{{index}}-{{content}}</li>',
methods: {
handleClick: function(){
this.$emit('delete', this.index)
}
}
})
new Vue({
el: "#root",
data: {
inputValue: '',
list: []
},
methods: {
handleSubmit: function(){
this.list.push(this.inputValue);
this.inputValue = ''
},
handleDelete: function(index){
this.list.splice(index, 1)
}
}
})
</script>