什么是Vue
Vue是一款流行的前端JavaScript框架,用于构建用户界面和单页面应用程序(SPA)。Vue具有简单易学的API、双向数据绑定、组件化开发等特点,使得开发者能够更高效地构建交互性强、响应速度快的Web应用程序。Vue已经成为许多开发者喜爱的前端框架之一,并且拥有庞大的社区支持和丰富的生态系统。
插值表达式
在 Vue 模板中,插值表达式使用双大括号 {{ }}
包裹,例如:{{ message }}
。这里的 message
是 Vue 实例中的一个数据属性,它会在模板渲染时被动态替换为实际的数据值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">{{msg}}</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
msg: 'hello'
}
})
</script>
</body>
</html>
响应式
响应式"是指当数据发生变化时,相关的视图会自动更新。Vue通过使用数据劫持和观察的方式来实现响应式,即当 Vue 实例的数据发生变化时,Vue能够自动检测到这些变化,并更新相关的视图。
响应式的特点包括:
-
数据驱动视图:Vue中的视图是根据数据的状态来动态渲染的,只要数据发生变化,相关的视图就会自动更新,无需手动操作DOM。
-
声明式编码:使用Vue,你只需要专注于描述你的目标数据状态,而不需要考虑如何去更新DOM,Vue会根据数据的变化自动更新视图。
-
精确追踪:Vue能够精确地追踪每个组件所依赖的数据,从而在数据发生变化时只更新受影响的部分视图,而不是整个页面。
-
高效性能:由于Vue的响应式系统可以精确追踪数据的变化,因此在更新视图时能够做到高效、快速,并且避免不必要的DOM操作。
Vue指令
v-html
用于将数据作为原始 HTML 插入到 DOM 中。这意味着该指令会将数据解释为 HTML,并将其插入到指定元素的内部。需要注意的是,由于潜在的安全风险,应谨慎使用v-html
,并确保所插入的内容是可信任的。
v-show
用于根据表达式的真假条件来控制元素的显示或隐藏。当表达式的值为真时,元素会显示;当表达式的值为假时,元素会隐藏,但仍然会保留在DOM中。
v-if
当使用v-if
指令时,元素的存在与否是动态切换的,即当条件为真时,元素存在于 DOM 中,条件为假时,元素从 DOM 中移除。
<div v-if="Math.random() > 0.5">
Now you see me
</div>
v-else
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
v-else-if
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
v-for
用于循环遍历数组或对象,并生成对应的 HTML 元素列表。
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
v-on
用于绑定事件处理函数的指令。通过 v-on
指令,你可以在 DOM 事件触发时执行特定的 JavaScript 代码。
基本的用法是,在需要监听的 HTML 元素上使用 v-on
指令,并指定要监听的事件和要执行的方法名。例如:
<button v-on:click="handleClick">点击我</button>
上面的例子中,当按钮被点击时,handleClick
方法将会被调用。
另一种常见的简写形式是使用 @
符号来表示 v-on
:
<button @click="handleClick">点击我</button>
除了 click
事件,你还可以监听其他事件,比如 mouseover
, input
, submit
等等。
v-bind
用于动态绑定 HTML 特性的指令。通过 v-bind
,你可以将 Vue 实例中的数据和表达式与 HTML 元素的特性进行绑定,从而实现动态更新页面内容的效果。
基本的用法是,在需要绑定的 HTML 元素上使用 v-bind
指令,并指定要绑定的特性名和要绑定的数据或表达式。例如:
<img v-bind:src="imageSrc">
上面的例子中,imageSrc
是 Vue 实例中的一个数据,它将动态地绑定到 src
特性上,根据 imageSrc
的值来显示对应的图片。
另一种常见的简写形式是使用 :
符号来表示 v-bind
:
<img :src="imageSrc">
除了 src
特性,你还可以通过 v-bind
绑定其他特性,比如 href
, class
, style
等等。这样可以根据应用的状态动态地修改元素的属性。
v-model
用于在表单输入元素和 Vue 实例的数据之间创建双向绑定。通过使用 v-model
,可以轻松地在表单输入元素(如 input、textarea、select 等)和 Vue 实例的数据之间实现数据的双向绑定。
例如,当你在一个输入框中使用 v-model
指令时,输入框中的值会自动与 Vue 实例中指定的数据进行同步,当你修改输入框中的值时,Vue 实例中的数据也会相应地更新,反之亦然。
示例:
<div id="app">
<input v-model="message" placeholder="Edit me">
<p>Message is: {{ message }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: { message: 'Hello Vue!' }
})
</script>
在上面的示例中,输入框中的值和 message
数据会实现双向绑定,它们会始终保持同步。
计算属性
用于根据已有的数据计算并生成新的数据。计算属性的好处在于它们可以根据依赖的数据自动更新,而且能够缓存计算结果,只有在相关数据发生改变时才会重新计算,这样可以提高性能并减少不必要的计算。
计算属性通常用于对已有的数据进行处理、筛选、过滤等操作,从而生成新的衍生数据,而且可以在模板中直接使用,就像普通的数据属性一样。
简写:
var vm = new Vue({
data: {
firstName: 'John',
lastName: 'Doe'
},
computed: {
// 计算属性的 getter
fullName: function () {
return this.firstName + ' ' + this.lastName;
}
}
})
完整写法:
var app = new Vue({
el:'#app',
data: {
firstName: 'John',
lastName: 'Doe'
},
computed: {
fullName: {
get(){
return this.firstName + ' ' + this.lastName;
},
set(){
修改的代码
}
}
}
})
watch(监视器)
watch
选项用来监控 Vue 实例上的数据变化,并在数据变化时执行相应的操作。
在 Vue 实例中使用 watch
选项,可以监听指定的数据属性,当这些数据属性发生变化时,可以执行一些自定义的操作,比如发送请求、更新其他数据等。
简单写法:
<div id="app">
<p>Current count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
count: 0
},
watch: {
count: function (newCount, oldCount) {
console.log('count 发生了变化:' + oldCount + ' => ' + newCount);
// 在 count 变化时执行其他操作
}
},
methods: {
increment: function () {
this.count++;
}
}
})
</script>
完整写法:
深度检测:deep
watch: {
obj: {
handler: function (val, oldVal) { /* 处理程序 */ },
deep: true
}
}
立即执行回调(immediate)
默认情况下,Vue 在创建 watch 时不会立即执行回调函数,而是在被监听的数据发生变化后才执行。如果需要在 watch 创建时立即执行一次回调函数,可以设置 immediate: true
。
watch: {
value: {
handler: function (val, oldVal) { /* 处理程序 */ },
immediate: true
}
}
生命周期
生命周期可以分为四个阶段,分别是创建阶段、挂载阶段、更新阶段和销毁阶段。
-
创建阶段:
- beforeCreate:在实例初始化之后,数据观测和事件配置之前调用。
- created:实例已经创建完成之后调用。在这一步,实例已完成了数据观测、属性和方法的运算,但挂载阶段还未开始,因此
$el
属性目前不可见。
-
挂载阶段:
- beforeMount:在挂载开始之前被调用,相关的 render 函数首次被调用。
- mounted:
el
被新创建的vm.$el
替换,并挂载到实例上之后调用该钩子。
-
更新阶段:
- beforeUpdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
- updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。
-
销毁阶段:
- beforeDestroy:在实例销毁之前调用。实例仍然完全可用。
- destroyed:在实例销毁之后调用。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例被销毁。