一、Vue2模板语法
1.1 插值语法
在Demo中通过在线引入的方式去使用vue,在body中引入如下代码:
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
插值语法:{{js表达式 或者 data中对应的属性名}},插值语法用于解析标签的内容能将vue实例对象中data数据里的一些属性渲染到页面上,以下代码展示了插值语法的使用
<!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}},{{count}}</div>
<!-- 引入vue包,在线 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
msg:"嗨咯啊",
count:1000
}
}
)
</script>
</body>
</html>
在一个vue实例中,el表示绑定的哪个容器,这里使用的是id选择器进行绑定,而data属性负责放数据,在data中我们放置了俩个属性数据,并且在 id为app的容器中,通过{{}}语法进行渲染到界面上
1.2 指令语法
与插值语法不同的是,指令语法解析标签内容的同时,还能给标签绑定属性,绑定事件
指令的常用形式都是v-????
v-bind的使用
<body>
<div id="app">
{{msg}},{{count}}
<a v-bind:href="msg1">点击我去bilibili</a>
</div>
<!-- 引入vue包,在线 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
msg: "嗨咯啊",
count: 1000,
msg1: "https://www.bilibili.com/"
}
}
)
</script>
</body>
上述代码使用v-bind绑定了data数据中的msg1,作为a标签的url路径,v-bind也可以进行简写,将v-bind去掉保持:(冒号)即可
1.3 {{}}插值语法和v-bind解析成表达式执行
插值和v-bind写法中除了写成单一的变量形式,进而去解析到data中的数据,本质上其实就是将写的东西当作js表达式去看待并且执行,看如下代码:
<body>
<div id="app">
{{msg}},{{count}}
<a v-bind:href="msg1">点击我去bilibili</a>
<div>
学生姓名:{{school.name}} <br>
学生年龄:{{school.age}} <br>
英文名转大写:{{school.engname.toUpperCase()}}
</div>
</div>
<!-- 引入vue包,在线 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
msg: "嗨咯啊",
count: 1000,
msg1: "https://www.bilibili.com/",
school:{
name:"李四",
age:12,
address:"北京",
engname:"mick"
}
}
}
)
</script>
</body>
上述代码在{{}}中执行了转大写方法,{{}将js表达式解析,结果如下:
二、 数据绑定
2.1 单向绑定v-bind
v-bind实现单向绑定数据,v-bind绑定数据只能实现data中的数据变化了,从而页面中数据也跟着变的效果,不能实现页面中数据变化,而data中的数据也变化,示例如下:
<body>
<div id="app">
{{msg}},{{count}}
<a v-bind:href="msg1">点击我去bilibili</a>
<div>
学生姓名:{{school.name}} <br>
学生年龄:{{school.age}} <br>
英文名转大写:{{school.engname.toUpperCase()}}
</div>
<input v-bind:value="msg" type="text" />
</div>
<!-- 引入vue包,在线 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
msg: "嗨咯啊",
count: 1000,
msg1: "https://www.bilibili.com/",
school: {
name: "李四",
age: 12,
address: "北京",
engname: "mick"
}
}
}
)
</script>
</body>
页面效果:
数据的走向只能从上图中的第一条线走
修改input框中的值没有效果,msg的数值没变化
2.2 双向数据绑定
v-model的简写方式:删去冒号以及value,v-model实现双向数据绑定,也就是上图数据走向图中俩条线都能实现走向,具体看如下代码示例:
初始数据如下:
代码:
<body>
<div id="app">
{{msg}},{{count}}
<a v-bind:href="msg1">点击我去bilibili</a>
<div>
学生姓名:{{school.name}} <br>
学生年龄:{{school.age}} <br>
英文名转大写:{{school.engname.toUpperCase()}}
</div>
<input v-bind:value="msg" type="text" />
<input type="text" v-model:value="count"/>
</div>
<!-- 引入vue包,在线 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
msg: "嗨咯啊",
count: 1000,
msg1: "https://www.bilibili.com/",
school: {
name: "李四",
age: 12,
address: "北京",
engname: "mick"
}
}
}
)
</script>
</body>
修改input框中的值,俩边数据都改变
点击count值,修改数据,俩边也都改变
v-model适用于input这样带value属性的表单,也就是跟用户具有交互的元素,如果使用在h2这样的标签上就报错
<body>
<div id="app">
{{msg}},{{count}}
<a v-bind:href="msg1">点击我去bilibili</a>
<div>
学生姓名:{{school.name}} <br>
学生年龄:{{school.age}} <br>
英文名转大写:{{school.engname.toUpperCase()}}
</div>
<input v-bind:value="msg" type="text" />
<input type="text" v-model:value="count"/>
<h2 v-model:x="count"></h2>
</div>
<!-- 引入vue包,在线 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
msg: "嗨咯啊",
count: 1000,
msg1: "https://www.bilibili.com/",
school: {
name: "李四",
age: 12,
address: "北京",
engname: "mick"
}
}
}
)
</script>
</body>
三、Vue事件监听
3.1 v-on的基本用法
在vue2中我们可以使用v-on来监听事件
<button v-on:click="handleClick">点击我</button>
在模板方法methods中定义对应的事件处理函数:
methods: {
handleClick() {
// 处理点击事件的逻辑
console.log('按钮被点击了');
}
}
v-on后面跟上相应的事件即可,通过所定义的函数监听执行,比如,鼠标覆盖:
<button v-on:mouseover="handleClick">点击我</button>
我们还可以监听多个事件:
<div v-on:click="handleClick" v-on:mouseover="handleMouseOver">
<!-- 元素内容 -->
</div>
3.2 事件修饰符
.stop
:阻止事件冒泡。.prevent
:阻止默认行为。.capture
:使用事件捕获模式。.self
:只当事件在该元素本身(而不是子元素)触发时触发回调。
只需在相应的事件后面跟上修饰符即可:
<a v-on:click.prevent="handleClick">禁止跳转链接</a>
四、Vue2中的生命周期函数
4.1 Vue 2 中常见的生命周期钩子函数
-
beforeCreate
:在实例初始化之前被调用,此时数据观测和事件配置尚未完成,不能访问data
、computed
和methods
中的方法。 -
created
:实例已经创建完成,此时可以访问data
、computed
和methods
中的方法,但尚未挂载到 DOM 上,因此还不能操作 DOM。 -
beforeMount
:在挂载开始之前被调用,此时模板已经编译完成,但尚未渲染到页面。 -
mounted
:组件被挂载到 DOM 上,此时可以操作 DOM 元素。 -
beforeUpdate
:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。 -
updated
:数据更新导致的虚拟 DOM 重新渲染和打补丁之后调用。 -
beforeDestroy
:实例销毁之前调用。在这一步,实例仍然完全可用。 -
destroyed
:实例销毁后调用,此时所有的绑定和实例的监听都被移除,子实例也都被销毁。
new Vue({
data() {
return {
message: 'Hello Vue!'
};
},
beforeCreate() {
console.log('beforeCreate: 实例初始化之前');
},
created() {
console.log('created: 实例创建完成');
},
beforeMount() {
console.log('beforeMount: 挂载开始之前');
},
mounted() {
console.log('mounted: 组件挂载完成');
},
beforeUpdate() {
console.log('beforeUpdate: 数据更新前');
},
updated() {
console.log('updated: 数据更新后');
},
beforeDestroy() {
console.log('beforeDestroy: 实例销毁前');
},
destroyed() {
console.log('destroyed: 实例销毁后');
}
});
五、Vue2中的跳转方式
在 Vue 2 中,常见的页面跳转方式有以下几种:
5.1 使用 <router-link>
组件:
<router-link to="/path/to/page">跳转页面</router-link>
to
属性指定要跳转的路径
5.2 JavaScript 中通过编程式导航
this.$router.push('/path/to/page');
5.3 通过路由的名称进行跳转
前提是在路由配置中为相应的路由定义了名称
在路由配置文件(通常是 router.js
或类似的文件)中,可以为路由定义名称,例如:
const routes = [
{
path: '/user/:id',
name: 'User',
component: UserComponent
}
];
在组件的方法中,可以使用 this.$router.push({ name: 'User', params: { id: 1 } })
来进行跳转。
这里的 name: 'User'
指定了要跳转到名为 User
的路由,params: { id: 1 }
则是传递给该路由的参数。