Vue
是一套前端框架,免除原生JavaScript中的DOM操作,简化书写。基于MVVM思想,实现数据的双向绑定,将编程的关注点放在数据上。
框架:是一个半成品软件,是一套可重用的,通用的,软件基础代码模型。基于框架开发,更加快捷,更加高效。
插值表达式
形式:{{表达式}}
内容可以是:
- 变量
- 三元运算符
- 函数调用
- 算术运算
指令
HTML标签上带有v-前缀 的特殊属性,不同指令具有不同含义。例如:v-if,v-for...s
常用指令
- v-bind 为HTML标签绑定属性值,如设置 href,css样式等
- v-model 在表单元素上创建双向数据绑定
- v-on 为HTML标签绑定事件
- v-if、v-else-if、v-else 条件性的渲染某元素,判定为true时渲染,否则不渲染
- v-show 根据条件展示某元素,区别在于切换的是display属性的值
- v-for 列表渲染,遍历容器的元素或者对象的属性
v-bind和v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue-指令</title>
<script src="./JS/vue.js"></script>
</head>
<body>
<div id="app">
<a v-bind:href="url">链接1</a>
<a :href="url">链接2</a>
<input type="text" v-model="url">
</div>
</body>
<script>
//定义vue对象
new Vue({
el:"#app",
data:{
url:"https://www.baidu.com"
}
})
</script>
</html>
v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue-指令</title>
<script src="./JS/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="点我一下" v-on:click="handle()">
<!-- 简化写为 -->
<input type="button" value="点我一下" @click="handle()">
</div>
</body>
<script>
//定义vue对象
new Vue({
el:"#app",
data:{
},
methods: {
handle:function() {
alert("你点我了");
}
},
})
</script>
</html>
案例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue-指令-案例</title>
<script src="./JS/vue.js"></script>
</head>
<body>
<div id="app">
<table border="1" cellspacing="0" width="60%">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
<th>等级</th>
</tr>
<tr align="center" v-for="(user, index) in users">
<td>{{index+1}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>
<span v-if="user.gender==1">男</span>
<span v-if="user.gender==2">女</span>
</td>
<td>{{user.score}}</td>
<td>
<span v-if="user.score>=85">优秀</span>
<span v-else-if="user.score>=60">及格</span>
<span style="color: red;" v-else>不及格</span>
</td>
</tr>
</table>
</div>
</body>
<script>
//定义vue对象
new Vue({
el:"#app",
data:{
users:[{
name:"Tom",
age:20,
gender:1,
score:78
},{
name:"Rose",
age:18,
gender:2,
score:86
},{
name:"Jerry",
age:26,
gender:1,
score:90
},{
name:"Tony",
age:30,
gender:1,
score:52
},
]
},
methods: {
},
})
</script>
</html>
生命周期
指一个对象从创建到销毁的整个过程。
生命周期的八个阶段:每触发一个生命周期事件,会自动执行一个生命周期方法(钩子)。
- beforeCreate 创建前
- created 创建后
- beforeMount 挂载前
- mounted 挂载完成,Vue初始化完成,HTML页面渲染成功。(发送请求到服务端,加载数据)
- beforeUpdate 更新前
- updated 更新后
- beforeDestroy 销毁前
- destroyed 销毁后