Vue 是一套前端框架,免除原生JavaScript中的DOM操作,简化书写. 基于MVVM(Model-View-ViewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上。
- 官网: https://v2.cn.vueis.org/
- 框架: 是一个半成品软件,是一套可重用的、通用的、软件基础代码模型。基于框架进行开发,更加快捷、更加高效。
Vue快速入门
- 新建HTML页面,引入Vue.js文件,注意,该文件网上到处都有下载,也可以直接下载文末附上的资源,免积分(我选的是0积分,要是下不了可以私信私发)
<script src="js/vue.js"></script>
- 在JS代码区域,创建Vue核心对象,定义数据模型
<script> new Vue({ el:"#app", data:{ message: "Hello Vue!" } ); </script>
- 编写视图
<div id="app"> <input type="text” V-model="message"> {{message}} </div>
注意插值表达式: {{表达式}}
内容可以是: 变量, 三元运算符, 函数调用, 算术运算
常用指令
指令: HTML标签上带有 v-前缀
的特殊属性,不同指令具有不同含义。例如: v-if,v-for…常用指令
指令 | 作用 |
---|---|
v-bind | 为HTML标签绑定属性值,如设置href,css样式等 |
v-model | 在表单元素上创建双向数据绑定 |
V-on | 为HTML标签绑定事件 |
v-if | 条件性的渲染某元素, 判定为true时渲染,否则不渲染 |
V-else-if | |
V-else | |
V-show | 根据条件展示某元素,区别在于切换的是display属性的值 |
v-for | 列表渲染,遍历容器的元素或者对象的属性 |
v-bind / v-model
-
v-bind:
<a v-bind:href="url">传智教育</a>
or 只保留冒号
<a :href="url">传智教育</a>
-
v-model
<input type="text" v-model="url">
-
对应Vue对象
<script>
new Vue(){
el: "#app",
data: {
url: "https://www.github.com"
}
};
</script>
- view 片段
<div id="app">
<a v-bind:href="ur1">链接1</a>
<a :href="ur1">链接2</a>
<input type="text" v-model="url">
</div>
v-on
v-on 为HTML标签绑定事件
<input type="button" value="按钮" v-on:click="handle()">
or
<input type="button" value="按钮" @click="handle()">
- js 代码片段
<script>
new Vue(){
el:"#app",
data: {
//...
}
methods: {
handle:function(){
alert("我被点击了");
}
}
}
<script>
v-if / V-else-if / v-else / v-show
分别使用 if-else-if 和 show 完成以下逻辑:
在输入框输入一个代表年龄的正整数, 判断并显示年龄阶段, 例如 <=35: 青年人, <60: 中年人, 老年人;
- view snippet
<input type="text" v-model: "age">
年龄{{age}},经判定为:
<span v-if: "age <= 35">年轻人</span>
<span v-else-if: "age < 60">中年人</span>
<span V-else>老年人</span>
v-for
案例
通过Vue完成表格数据的渲染展示
var 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}
]
性别:
gender == 1: 男gender == 2:女
评价:
score >= 85: 优秀; score >= 60:及格; 否则: 不及格
不及格用红色渲染
编号 | 姓名 | 年龄 | 性别 | 成绩 | 评价 |
---|---|---|---|---|---|
1 | Tom | 20 | 男 | 78 | 及格 |
2 | Rose | 18 | 女 | 86 | 优秀 |
3 | Jerry | 26 | 男 | 90 | 优秀 |
4 | Tony | 30 | 男 | 52 | 不及格 |
a html table snippet example
<!-- border="1" cellspacing="0" width="60%" -->
<table>
<tr>
<th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>成绩</th><th>评价</th>
</tr>
<tr align="center">
<td>1</td>
<td>Itcast</td>
<td>18</td>
<td><span>男</span><span>女</span></td>
<td>90</td>
<td><span>优秀</span><span>及格</span><span style="color:red">不及格</span></td>
</tr>
</table>
生命周期
生命周期:指一个对象从创建到销毁的整个过程
生命周期的八个阶段:每触发一个生命周期事件,会自动执行一个生命周期方法(钩子)。
状态 | 阶段周期 |
---|---|
beforeCreate | 创建前 |
created | 创建后 |
beforeMount | 挂载前 |
mounted | 挂载完成 |
beforeUpdate | 更新前 |
updated | 更新后 |
beforeDestroy | 销毁前 |
destroyed | 销毁后 |
<script>
new Vue(){
el:"#app"
data: {
// ...
}
mounted(): function(){
console.log("Vue挂载完毕,发送请求获取数据");
}
// methods:
}
</script>
- 回顾
- Vue是什么?
Vue是一个基于MVVM模型的前端is框架 - Vue常用指令?
v-bind、V-model、V-on、v-if、v-show、v-for - Vue生命周期?
mounted
- Vue是什么?
附录–代码形式的入门教程
主文件 vue快速入门.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Day2-chapter01-Vue快速入门</title>
<!-- 引入 vue.js 文件 -->
<script src="../static/js/vue.js"></script>
<style>
div{
font-size: 16px;
line-height: 32px;
}
body{
width: 80%;
margin: 10%;
}
</style>
</head>
<body>
<div id="vmodel">
<h2>1. v-model</h2>
v-model 在表单元素上创建双向数据绑定双向数据绑定, 在视图页面修改输入框文本等价于修改了 message 对象, 因而后面的插值语句也跟着改变
<br>
<input type="text" name="hello" V-model="message"> {{message}}
</div>
<br><br>
<div id="vbind">
<h2>2. v-bind</h2>
v-bind: 为HTML标签绑定属性值, 如设置href, css样式等
修改输入框的url可以改变链接指向的url
<br>
<a :href="url" target="_blank">bilibili 无限矿业公司</a>
<br>
<input type="text" V-model="url">
</div>
<br><br>
<div id="von">
<h2>3. v-on</h2>
v-on 为HTML标签绑定事件
例如为按钮绑定点击事件: v-on:click="handle()"
<br>
<input type="button" value="click me!" @click="handle()">
</div>
<br><br>
<div id="vif">
<h2>4. v-if / V-else-if / v-else / v-show</h2>
分别使用 if-else-if 和 show 完成以下逻辑:在输入框输入一个代表年龄的正整数, 判断并显示年龄阶段, 例如 不超过35: 青年人, 小于60: 中年人, 其他老年人;
<br>a. 使用 v-if, v-else-if, v-else: 只渲染一个元素<br>
<input type="text" V-model="age">
经判定,属于<span v-if="age <= 35">青年</span>
<span v-else-if="age<60">中年</span>
<span v-else>老年</span>
<br>b. 使用 v-show: 都渲染, 但通过 hidden 将指定元素隐藏<br>
<input type="text" V-model="age2">
经判定,属于<span v-show="age2 <= 35">青年</span>
<span v-show="35<age2 && age2<60">中年</span>
<span v-show="age2>=60">老年</span>
<br>v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
</div>
<div id="vexample">
<h2>3. 案例 v-for</h2>
通过Vue完成表格数据的渲染展示, 基于源数据多次渲染元素或模板块。v-for指令之值,必须使用特定语法 alias in expression,为当前遍历的元素提供别名.
<br>
<code>
var 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}
]
</code>
<br>
<table border="1" cellspacing="0" width="60%">
<tr>
<th>姓名</th><th>性别</th><th>年龄</th><th>成绩</th><th>评级</th>
</tr>
<tr v-for="u in users" align="center">
<td>{{u.name}}</td>
<td><span v-if="u.gender == 1">男</span><span v-else>女</span></td>
<td><span>{{u.age}}</span></td>
<td><span>{{u.score}}</span></td>
<td>
<span v-if="u.score>=85">优秀</span>
<span v-else-if="u.score>60">及格</span>
<span style="color:red" v-else>不及格</span>
</td>
</tr>
</table>
</div>
<div>
<h2>生命周期</h2>
生命周期:指一个对象从创建到销毁的整个过程. 生命周期的八个阶段:每触发一个生命周期事件,会自动执行一个生命周期方法(钩子)。
<br>
<code>
mounted(): function(){<br>
console.log("Vue挂载完毕,发送请求获取数据");<br>
}<br>
</code>
</div>
</body>
<script>
// 在JS代码区域,创建Vue核心对象,定义数据模型
new Vue({
el: "#vmodel", // 绑定视图
data: {
message: "Hello Vue!" // 数据模型
}
});
new Vue({
el: "#vbind",
data: {
url: "https://bilibili.com"
}
});
new Vue({
el: "#von",
data: {
// ...
},
methods:{
handle(){
alert("点击事件!")
}
}
});
new Vue({
el: "#vif",
data: {
age: "20",
age2: "45"
}
});
new Vue({
el: "#vexample",
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}
],
}
});
var user = {name:"Rose", age: 18, gender: 2, score: 86};
console.log(JSON.stringify(user))
</script>
</html>
附带其它静态资源的示例包: