本文最后更新于 2024年7月4日 早上
Vue 的简单引入，以 HTML 为例
1
2
3
4
5
6
| <script src="./vue.min.js"></script>
<script>
const vm = new Vue({
})
</script>
|
此时我们创建了一个 Vue 实例，并准备在大括号中传入 Vue 的配置信息，前面可以通过一个变量 vm 来接受创建的 Vue 实例
响应式数据与插值表达式
基础框架写法
在 Vue 内部对响应式数据进行操作时，会自动更新到视图中，从而减少了大量的 DOM 操作。
确定元素的生效位置，此处设置 el 属性
然后写一个 data 方法属性，再在 data 方法的内部使用 return 方式，这是一个固定写法
1
2
3
4
5
6
7
8
9
10
11
12
| <script src="./vue.min.js"></script>
<script>
const vm = new Vue({
el: '#id',
data() {
return {
title: '这是标题内容',
content: '这是内容文本'
}
}
})
</script>
|
这里的 el 属性指定到了 id 为 id 的标签中
接着可以通过插值表达式在文本中进行响应、
1
2
3
4
| <div id="id">
<p>{{ title }}</p>
<p>{{ content }}</p>
</div>
|
此时便可以直接显示到视图中 title 和 content 的内容
这是标题内容
这是内容文本
当以后对 title 和 content 进行修改的时候，它便会直接显示到视图中，而不用进行额外的DOM操作
当在 console 中执行 vm.title = '新的标题' 时，视图中的内容同样会发生变化（Vue 的返回值被 vm 所接受）
插值表达式
插值表达式中还可以进行其他额外的操作，例如计算，逻辑判断等
1
2
| <p>{{ 1 + 2 + 3 }}</p>
<p>{{ 1 > 2 ? '对' : '错'}}</p>
|
此时视图中的内容应为
6
错
methods 属性
methods 是一个与 data 方法并列的属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <script src="./vue.min.js"></script>
<script>
const vm = new Vue({
el: '#id',
data() {
return {
title: '这是标题内容',
content: '这是内容文本'
}
},
methods: {
output() {
return '标题为' + this.title + ',' + '内容为' + this.content
}
}
})
</script>
|
此时执行 output 的方式应该为
视图中的内容为
标题为这是标题内容,内容为这是内容文本
所以，methods 的关键之处就在于函数的使用，在这之中可以封装一些用于处理响应式处理的逻辑，和以前做函数封装有异曲同工之妙。注意，在methods 内部的调用是使用 this
计算属性
computed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <script src="./vue.min.js"></script>
<script>
const vm = new Vue({
el: '#id',
data() {
return {
title: '这是标题内容',
content: '这是内容文本'
}
},
methods: {
output() {
console.log('methods 执行了')
return '标题为' + this.title + ',' + '内容为' + this.content
}
},
computed: {
outputComputed() {
console.log('computed 执行了')
return '标题为' + this.title + ',' + '内容为' + this.content
}
}
})
</script>
|
1
2
3
4
5
6
| <p>{{ output () }}</p>
<p>{{ output () }}</p>
<p>{{ output () }}</p>
<p>{{ outputComputed }}</p>
<p>{{ outputComputed }}</p>
<p>{{ outputComputed }}</p>
|
虽然methods和computed都打印了三次内容，但是调用console可以看出
methods执行了打印了三次
computed执行了只打印了一次
这是因为computed具有缓存性，当我们做第一次计算的时候，它会将计算结果去在内部做一个缓存，如果在第二次计算的时候发现内部的响应式数据没有变，那么整体结果也不会变，此时便不会再做计算。
在重复计算次数过多时具备优化性能的作用
注意，与methods不同，outputComputed 不需要加括号
侦听器
监听某个数据是否有变化，以前修改一个内容的时候会自动做一个页面的更新，如果说也希望在变化的过程中去进行一些操作的话，便可以使用侦听器 watch
1
2
3
4
5
| watch:{
title(newValue,oldValue){
console.log(newValue,oldValue)
}
}
|
注意：监听的一定时响应式数据
指令
内容指令
1
2
| <p v-text='htmlContent'>123</p>
<p v-html='htmlContent'>123</p>
|
页面的内容为
这是一个span标签<span> span </span>
这是一个span标签 span
同时也会覆盖掉原来的内容，类似于 innertext和 innerhtml
渲染指令
v-for
1
| <p v-for="item in 5">渲染五次</p>
|
页面内容为
渲染五次
渲染五次
渲染五次
渲染五次
渲染五次
扩展的写法
1
| <p v-for="item in arr">这是内容:{{item}}</p>
|
其中 arr 是一个数组 arr: ['a', 'b', 'c', 'd']
页面的内容便是
这是内容:a
这是内容:b
这是内容:c
这是内容:d
1
| <p v-for="(item,key,index) in obj">这是内容:{{ item }} {{ key }} {{ index }}</p>
|
其中 obj 是一个对象 obj: { a: 10, b: 20, c: 30 }
页面的内容为
这是内容:10 a 0
这是内容:20 b 1
这是内容:30 c 2
v-if
1
| <p v-if="false">标签内容</p>
|
此时页面没有内容，相当于销毁标签
v-show
1
| <p v-show="false">标签内容</p>
|
此时页面虽然没有内容，但是标签并没有被销毁而是被隐藏
相当于 display: none;
属性指令
绑定 class
对象写法
我们可以传给 v-bind:class 一个对象，以动态地切换 class：
1
| <div v-bind:class="{ active: isActive }"></div>
|
上面的语法表示 active 这个 class 存在与否将取决于数据 property isActive 的 truthiness。
你可以在对象中传入更多字段来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class attribute 共存。当有如下模板：
1
2
3
4
| <div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
|
和如下 data：
1
2
3
4
| data: {
isActive: true,
hasError: false
}
|
结果渲染为：
1
| <div class="static active"></div>
|
当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 true，class 列表将变为 "static active text-danger"。
渲染的结果和上面一样。我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：
1
2
3
4
5
6
7
8
9
10
11
12
13
| <div v-bind:class="classObject"></div>
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
|
数组写法
我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：
1
2
3
4
5
| <div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
|
渲染为：
1
| <div class="active text-danger"></div>
|
绑定 style —— 内联样式
1
2
3
4
5
6
7
| <div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
|
v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：
1
| <div v-bind:style="[baseStyles, overridingStyles]"></div>
|
事件指令
v-on
1
| <button v-on:click="output">按钮</button>
|
可以用 v-on 来监听DOM事件，并在触发时运行一些JavaScript代码
这样便可以节约我们写JavaScript的时间
简便写法
1
| <button @click="output">按钮</button>
|
表单指令
这是一个适用于表单元素的指令
数据到视图，视图到数据的双向绑定
1
2
| <input type="text" v-model="inputValue">
<p v-text='inputValue'></p>
|
此时在页面中的内容是
默认内容
默认内容
如果我们修改表单中的内容为 默认内容132
则text中的内容也会相应变为 默认内容132
这便是表单数据的双向绑定
修饰符
空格清除
1
| <input type="text" v-model.trim="inputValue">
|
此时在表单输入空格的时候，在数据的绑定中会自动清除空格
除此以外，还有一些按键修饰符详见Vue官方文档