复习了一遍vue，为了防止忘记特意将其记录下来。
本篇笔记含有: vue的一些命令，如v-if 等；vue 标签下的一些组件的语法。
vue命令:
v-if:
1
2
3
4
5
6
7
8
9
| <div v-if="a==='a'">
a
</div>
<div v-else-if="a==='b'">
b
</div>
<div v-else>
c
</div>
|
v-for:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <div v-for="(i, index) in list1">
<!-- 如果 list1 为数组套字典，那么要调用对应的键的值时应该写成{{i.key}}, index为索引，可以不写。-->
{{i}}
</div>
<script>
export default{
data(){
return {
// 也可在列表中套字典，如 list1 : [{'name':'fire', 'price': 1}, {'name': 'water', 'price': 2}]
list1: [1, 2, 3]
}
}
}
</script>
|
v-model:数据双向绑定。
v-show: 使用方法与v-if相同，不同的是无论v-show的值是false或true，元素都会存在于html代码中。
v-bind: 用于给DOM绑定元素属性。
v-on: 用于监听DOM事件，语法与v-bind类似，如监听点击事件
语法糖:例如 v-bind: 可以用:来表示，这就叫做语法糖，同时v-on可以用@来表示。
vue文件内script标签下各种组件及作用:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <script>
export default{
// 定义数据
data(){
return {
msg: '这是定义数据的语法'
}
},
// 定义函数
method:{
test:function(){
var name="这就是定义一个函数的语法";
}
},
// 计算属性
computed:{
},
// 钩子函数
beforeCreate(){
},
// 监听属性。方法要和变量同名，不然监听不到它的变化
watch:{
// 如一个变量为conter, nval为新值（变化后的值）, oval为老值（变化前的值）
conter:function(nval, oval){
console.log('计数器由' + oval + '变换为新的' + nval);
}
},
}
</script>
|
