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 销毁后