目录
- Vue
- Vue常用指令
- Vue生命周期
Vue
什么是Vue？
- Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
- 基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。
- 官网： https://v2.cn.vuejs.org/
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 第一步：引入vue的js文件 --><script src="js/vue.js"></script>
</head><body><!-- 第三步：编写视图层的展示 --><div id="app"><input type="text" v-model="message">{{message}}</div>
</body>
<script> // 第二步：定义vue对象new Vue({el: "#app", // vue接管的区域data: {message: "Hello Vue"}})
</script></html>
🐱插值表达式：
形式：
- {{ 表达式 }}
内容可以是：
- 变量
- 三元运算符
- 函数调用
- 算术运算
Vue常用指令
指令：HTML 标签上带有 v- 前缀 的特殊属性，不同指令具有不同含义。例如：v-if，v-for…
⭐️常用指令：
| 指令 | 作用 |
|---|---|
| v-bind | 为HTML标签绑定属性值，如设置 href，css样式等 |
| v-model | 在表单元素上创建双向数据绑定 |
| v-on | 为HIM标签绑定事件 |
| v-if | 条件性的渲染某元素，判定为true时渲染,否则不渲染 |
| v-else-if | |
| v-else | |
| v-show | 根据条件展示某元素，区别在于切换的是display属性的值 |
| v-for | 列表渲染，遍历容器的元素或者对象的属性 |
- v-bind：为HTML标签绑定属性值，如设置 href，css样式等
<a v-bind:href="url">传智教育</a><a :href="url">传智教育</a> // 简化写法
- v-model：在表单元素上创建双向数据绑定
<input type="text" v-model="url">
// v-bind
// v-model
<script>new Vue({el: "#app",data: {url: "https://www.itcast.cn"}})
</script>
❔vs vode自动提示：下载vuehelpr插件
🌰举例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</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", // vue接管区域data: {url: "https://www.baidu.com"}})
</script></html>
- v-on：为HIM标签绑定事件
<input type="button" value="按钮" v-on:click="handle()">
<input type="button" value="按钮" @click="handle()">
<script>new Vue({el: "#app",data: {//...},methods: {handle:function(){alert('我被点击了');}},})
</script>
- v-if、v-else-if、v-else：条件性的渲染某元素，判定为true时渲染,否则不渲染
// 年龄{{age}},经判定为:
<span v-if="age <= 35">年轻人</span>
<span v-else-if="age > 35 && age < 60">中年人</span>
<span v-else>老年人</span>
- v-show：根据条件展示某元素，区别在于切换的是display属性的值
// 年龄{{age}},经判定为:
<span v-show="age <= 35">年轻人</span>
🌰举例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/vue.js"></script>
</head><body><div id="app">年龄<input type="text" v-model="age">经判定，为：<span v-if="age <= 35">年轻人（35及以下）</span><span v-else-if="age > 35 && age < 60">中年人（35-60）</span><span v-else>老年人（60及以上）</span><br><br>年龄<input type="text" v-model="age">经判定，为：<span v-show="age <= 35">年轻人（35及以下）</span><span v-show="age > 35 && age < 60">中年人（35-60）</span><span v-show="age >= 60">老年人（60及以上）</span></div>
</body>
<script>// 定义vue对象new new Vue({el: "#app",data: {age: 20},methods: {}})
</script></html>
- v-for：列表渲染，遍历容器的元素或者对象的属性
<div v-for="addr in addrs">{{addr}}</div>
<div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>
data: {. . .addrs: ['北京','上海','广州','深圳','成都','杭州']
},
🌰举例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/vue.js"></script>
</head><body><div id="app"><div v-for="addr in addrs">{{addr}}</div><div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div></div>
</body>
<script>// 定义vue对象new Vue({el: "#app",data: {addrs: ["北京", "上海", "西安", "成都", "深圳"]},methods: {}})
</script></html>
☁️案例：通过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><script src="js/vue.js"></script>
</head><body><div id="app"><table border="1" cellspacing="0" width="60%"><!-- 包含它的父元素宽度的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=0">女</span></td><td>{{user.score}}</td><td><span v-if="user.score>=85">优秀</span><span v-else-if="user.score>=60">及格</span><span v-else="user.score<60" style="color:red">不及格</span></td></tr></table></div>
</body>
<script>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>
Vue生命周期
- 生命周期：指一个对象从创建到销毁的整个过程。
- 生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。
| 状态 | 阶段周期 |
|---|---|
| beforeCreate | 创建前 |
| created | 创建后 |
| beforeMount | 挂载前 |
| mounted | 挂载完成 |
| beforeUpdate | 更新前 |
| updated | 更新后 |
| beforeDestroy | 销毁前 |
| destroyed | 销毁后 |
<script>new Vue({el: "#app",data: {},mounted() {console.log("Vue挂载完毕,发送请求获取数据");},methods: {},})
</script>
🐱主要掌握mounted：
- mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。（发送请求到服务端，加载数据）