Vue中的点击方法
- 点击方法 简写为@Click,然后在methods中写上
方法名:function(){
方法逻辑
}
<body>
<div id="root" @Click="change">{{content}}</div>
</body>
<script>
new Vue({
el: "#root",
data: {
content: "hello"
},
methods: {
change: function () {
this.content = "world"
}
}
})
</script>
Vue中的单向数据绑定
- 使用v-bind:相关熟悉 可以简写为:
<body>
<div id="root" :title="title">{{content}}</div>
</body>
<script>
new Vue({
el: "#root",
data: {
content: "zhw",
title: "你好"
}
})
</script>
Vue中双向数据绑定
- 使用v-model=“数据名称”
<body>
<div id="root">
<div :title="title">{{content}}</div>
<input v-model="content"/>
<div>{{content}}</div>
</div>
</body>
<script>
new Vue({
el: "#root",
data: {
content: "zhw",
title: "i love u"
},
methods: {
}
})
</script>
v-model=“content” 代表input的值和Vue-data-content的值进行了双向绑定,如果input的值变话的话,contetn的值也会变化,content的值发生变化的话,input的值也会变化
Vue中的计算属性和侦听器
- computed属性
<body>
<div id="root">
姓:<input v-model="firstName"/>
名:<input v-model="lastName"/>
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
</body>
<script>
new Vue({
el: "#root",
data: {
firstName: "",
lastName: "",
count: 0
},
computed: {
fullName: function(){
return this.firstName+this.lastName
}
},
watch: {
fullName: function () {
this.count++;
}
}
})
</script>
使用computed属性,如果firstName和lastName都没改变的话,fullName会使用上一次计算的缓存结果
Vue常见的三个指令
- v-if和v-show指令
<body>
<div id="user">
<div v-show="show">你好</div>
<button @click="change">toggle</button>
</div>
<hr>
<div id="root">
<div v-if="show">你好</div>
<button @Click="change">toggle</button>
</div>
</body>
<script>
new Vue({
el: "#root",
data: {
show: true
},
methods: {
change: function () {
this.show=!this.show
}
}
});
new Vue({
el: "#user",
data: {
show: true
},
methods: {
change: function () {
this.show=!this.show
}
}
})
</script>
v-if当变量值为fasle的时候,会删除整个dom元素.
v-show当变量值为true的时候,只会把display设none不会删除dom
- v-for循环指令
<body>
<div id="root">
<div v-if="show">你好</div>
<button @Click="change">toggle</button>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
</body>
<script>
new Vue({
el: "#root",
data: {
show: true,
list: [1,2,3]
},
methods: {
change: function () {
this.show=!this.show
}
}
});
</script>
1.在list中使用v-for=“item fo 数组数据”,这样会创建数组元素多少个li
2.在v-for后面添加:key=“每次的唯一值” 可以提升便利的性能
ToDoList的练习
<body>
<div id="root">
<input v-model="content"/>
<button @Click="subitData">提交</button>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
<div>{{content}}</div>
</div>
</body>
<script>
new Vue({
el: "#root",
data: {
content: "zhwq",
list: []
},
methods: {
subitData: function() {
this.list.push(this.content)
}
}
})
</script>
在输入框输入文字,点击提交,文字会以列表的形式显示在列表中