Vueの基础语法
# 2. vue 基础语法
# 模板语法
- 文本渲染
数据是什么,模版就渲染什么。
<body>
<div id="app">
{{ message }}
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: "this is a test"
}
})
</script>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
v-once,这个东西称之为指令。数据只会在第一次进行渲染,之后改变数据,页面不会重新更新。
<body>
<div id="app">
<p>{{ message }}</p>
<p v-once>{{ message }}</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
message: "this is a test"
}
})
</script>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
v-cloak,用于控制数据还没有插值到模板里面的时候,不让用户看到我们的占位符。
<style>
[v-cloak]{
display: none;
}
</style>
<body>
<div id="app">
<p v-cloak>{{ message }}</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
message: "this is a test"
}
})
</script>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- 原始 HTML
有些时候,我们对应的数据是一段 html 代码,但是使用文本渲染的话,渲染出来的是字符串,所以这个时候可以使用 v-html 指令。
<body>
<div id="app">
<p v-html="message"></p>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
message: "<span style='color:red'>this is a test</span>"
}
})
</script>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
- 属性动态绑定
以前,我们操作html元素的属性的时候,需要先获取节点,再通过 setAttribute 方法来进行设置。
现在,使用了vue之后,我们让元素的属性和vm产生联系,回头只要vm里面的数据一变,html元素的属性也自动的发生变化。
<body>
<div id="app">
<p v-bind:title='one'>this is a test</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
one : 'two'
}
})
</script>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
v-bind 提供了一种简写,直接写一个冒号即可,如下:
<body>
<div id="app">
<p :title='one'>this is a test</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
one : 'two'
}
})
</script>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
- Javascript 表达式
在模版里面,我们可以使用简单的 js 表达式。
所谓表达式,就是最终能够得到一个值的东西。语句,是构成程序的基本单位,我们的程序就是由一条一条的语句组成。
// 语句
if(a>b){
console.log(a)
} else {
console.log(b)
}
// 表达式
a>b ? console.log(a) : console.log(b)
2
3
4
5
6
7
8
9
在 vue 模板中使用 js 表达式示例:
<body>
<div id="app">
<p>{{ number+1 }}</p>
<p>{{ ok ? 'YES' : 'NO'}}</p>
<p>{{ message.split('').reverse().join('') }}</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
number : 1,
ok : true,
message : 'this is a test',
price : 100
}
})
</script>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Js 表达式的作用在于对服务器端拿到的数据,不是直接渲染,而是作出一定的处理后,在进行渲染。
但是需要注意,使用 js 表达式,仅仅是简单的处理,可以使用 js 表达式。
如果要对数据的操作非常复杂,官方推荐使用计算属性。
# 计算属性
模板内使用表达式来处理数据很方便,但是不利于处理复杂的逻辑,如果涉及到复杂的逻辑,那么可以使用计算属性。
快速入门示例:
<body>
<div id="app">
<p>{{ message }}</p>
<p>{{ reverseMessage }}</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
message : 'this is a test'
},
computed: {
reverseMessage : function(){
return this.message.split('').reverse().join('')
}
},
})
</script>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
计算属性依赖的数据发生变化,计算属性也会重新进行计算。
# 计算属性和方法的区别
首先,我们来看一下方法,示例如下:
<body>
<div id="app">
<!-- 原始字符串 -->
<p>{{ message }}</p>
<!-- 计算属性 -->
<p>{{ reverseMessage1 }}</p>
<p>{{ reverseMessage2() }}</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
message : 'this is a test'
},
computed: {
reverseMessage1 : function(){
return this.message.split('').reverse().join('')
}
},
methods: {
reverseMessage2 : function(){
return this.message.split('').reverse().join('')
}
},
})
</script>
</body>
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
那么,计算属性和方法有什么区别?
计算属性只有在依赖的值发生变化的时候,才会重新计算。
但是方法,只要有数据发生变化,就会重新执行方法。
<body>
<div id="app">
<button @click='a++'>a++</button>
<button @click='b++'>b++</button>
<p>{{computedA}}</p>
<p>{{computedB}}</p>
<p>{{methodA()}}</p>
<p>{{methodB()}}</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
a : 1,
b : 1
},
computed: {
computedA : function(){
console.log('computedA 执行了');
return this.a;
},
computedB : function(){
console.log('computedB 执行了');
return this.b;
}
},
methods: {
methodA : function(){
console.log('methodA 执行了');
return this.a;
},
methodB : function(){
console.log('methodB 执行了');
return this.b;
}
},
})
</script>
</body>
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
32
33
34
35
36
37
38
39
40
而且,方法更多的是用于绑定事件的时候,一般不会用于对数据的二次更改(推荐使用计算属性)。
# 计算属性的 setter
默认情况下,计算属性只提供了 getter,没有提供 setter,但是我们可以自己设置 setter。
<body>
<div id="app">
<p>{{computedA}}</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
a : 1
},
computed: {
// 这种就是单纯的提供了一个 getter
// getter 就是在获取 computedA 的时候会触发
// 我们也可以设置一个setter,setter 就是在设置计算属性的时候会触发
computedA : {
get : function(){
return 'william'
},
set : function(value){
console.log('触发的 setter');
console.log(`传入的值为${value}`);
}
}
}
})
</script>
</body>
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
# 数据监听
$watch,可以监听数据的变化。在Vue配置选项里面,也可以配置数据监听。
vm.$watch('a',function(newVal,oldVal){
console.log(`新的值为${newVal},旧的值为${oldVal}`);
})
2
3
实际上在数据配置选项中,也可以设置数据监听。
<body>
<div id="app">
<p @click="a++">{{a}}</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
a: 1
},
watch : {
a : function(newVal,oldVal){
console.log(`新的值为${newVal},旧的值为${oldVal}`);
}
}
})
</script>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
虽然$watch和数据配置选项中的watch都能实现数据监听,但是还是有细微的区别。
$watch返回一个停止监听的函数。
<body>
<div id="app">
<p @click="a++">{{a}}</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
a: 1
}
})
// 两者虽然都是对数据进行监听,但是还是有些许区别
// $watch 会有一个返回值,这个返回值用于停止数据监听
let i = vm.$watch('a', function (newVal, oldVal) {
if(newVal === 10){
i();
}
console.log(`新的值为${newVal},旧的值为${oldVal}`);
})
</script>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# class 和 style 的绑定
在 html 元素里面有 class 属性和 style 属性。
<p class="xxxx" style="xxxx"></p>
要动态修改 class 和 style 属性,我们当然可以使用属性动态绑定。
但是由于这两个属性使用的频率非常高,所以在 vue 中,专门提供了相应的语法来处理 style 和 class。
# class
- 对象语法
<body>
<div id="app">
<div :class="test">this is a test</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
test : {
one : true,
two : true,
three : true
}
}
})
</script>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
- 数组语法
<body>
<div id="app">
<div :class="[a,b,c]">this is a test</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
a : 'one',
b : 'two',
c : 'three'
}
})
</script>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# style
- 对象语法
<body>
<div id="app">
<div :style="test">this is a test</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
test : {
color : 'red',
textDecoration : 'underline',
fontSize : '30px'
}
}
})
</script>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
- 数组语法
<body>
<div id="app">
<div :style="[style1,style2]">this is a test</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
style1: {
color: 'red'
},
style2: {
textDecoration: 'underline',
fontSize: '30px'
}
}
})
</script>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 条件渲染和循环
条件渲染使用 v-if,条件性的渲染一块内容。
<body>
<div id="app">
<div v-if="test">this is a test</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
test: true
}
})
</script>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
同样,可以使用双分支,如下:
<body>
<div id="app">
<div v-if="test">this is a test</div>
<div v-else>this is a test,too</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
test: true
}
})
</script>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
如果要渲染的内容是一大块内容,可以使用 template 标签,如下:
<body>
<div id="app">
<template v-if="test">
<div>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
</ul>
<p>this is a test</p>
</div>
<p>天气好</p>
</template>
<template v-else>
<div>
<ul>
<li>vue</li>
<li>react</li>
<li>angular</li>
</ul>
<p>this is a test,too</p>
</div>
<p>天气好得很</p>
</template>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
test: true
}
})
</script>
</body>
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
32
33
34
35
36
下面是一个 elseif 的示例:
<body>
<div id="app">
<div v-if="type===1">type 的值为 1</div>
<div v-else-if="type===2">type 的值为 2</div>
<div v-else-if="type===3">type 的值为 3</div>
<div v-else>type 的值不为1、2、3</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
type: 1
}
})
</script>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# v-if 和 v-show 的区别?
v-show 为 false 的时候,会渲染元素,只不过会设置元素的 display 为 none。
v-if 为 false 的时候,连元素都不会渲染,在 dom 结构中不会出现相应的元素。
# 循环渲染
循环渲染使用 v-for 指令。示例如下:
<body>
<div id="app">
<ul>
<li v-for="(item,index) in stus">{{index}}---{{ item }}</li>
</ul>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
stus : [
'张三',
'李四',
'王五',
'赵六'
]
}
})
</script>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
重点:循环渲染的时候,我们要给循环的项目添加一个 key,用来标志性这个循环项目的唯一性。
<body>
<div id="app">
<ul>
<li v-for="(item,index) in stus" :key="index">{{index}}---{{ item }}</li>
</ul>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
stus : [
'张三',
'李四',
'王五',
'赵六'
]
}
})
</script>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22