1.什么是Vue
-
Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。 -
基于**
MVVM(Model-View-ViewModel)思想，实现数据双向绑定**，将编程的关注点放在数据上。 -
官网：https://v2.cn.vuejs.org/
-
框架：是一个半成品软件，是一个可重用的，通用的，软件基础代码模型。基于框架进行开发，更加快捷，更加高效。
Vue快速入门
- 新建HTML页面，引入
Vue.js文件
<script src="js/vue.js"></script>
- 在JS代码区域，创建Vue核心对象，定义数据模型
<script>
new Vue({
el: "#app", //Vue接管区域
data: {
message: "Hello Vue"
}
})
</script>
- 编写视图
<div id="app">
<input type="text" v-model="message">
{{message}}
- 完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue-快速入门</title>
<!-- 第一步：引入vue -->
<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-bind：为HTML标签绑定属性值。如设置href、css样式等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-指令-v-bind，v-model</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> new Vue({ el: "#app", data:{ url: "https:www.baidu.com" } }) </script> </html>v-on：为HTML标签绑定事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue-指令-v-on</title> <script src="js/vue.js" ></script> </head> <body> <div id="app"> <input type="button" v-on:click="handle()" value="点我一下"> <!-- 简化写法 --> <input type="button" @click="handle()" value="点我一下"> </div> </body> <script> new Vue({ el: "#app", data:{ }, methods: { handle: function(){ alert("我被点了一下"); } } }) </script> </html>v-if、v-else-if、v-else：条件性的渲染某元素，判定为true时渲染，否则不渲染v-show：根据条件展示某元素，区别在于切换的时display属性的值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue-指令-v-on</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> 年龄<input type="number" v-model="age">经判定，为： <span v-if="age<=35">年轻人（35岁及以下）</span> <span v-else-if="35<age&&age<=60">中年人（35-60）</span> <span v-else>老年人（60岁及以上）</span> <br><br> 年龄<input type="number" v-model="age">经判定，为： <span v-show="age<=35">年轻人（35岁及以下）</span> <span v-show="35<age&&age<=60">中年人（35-60）</span> <span v-show="age>60">老年人（60岁及以上）（35-60）</span> </div> </body> <script> new Vue({ el: "#app", data: { age: 20 }, methods: { } }) </script> </html>v-for：列表渲染，遍历容器的元素或者对象的属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue-指令-v-for</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <!-- 第一种遍历方式，不带索引 --> <div v-for="addre in addres">{{addre}}</div> <hr> <!-- 第二种遍历方式，带索引，从0开始 --> <div v-for="(addre, index) in addres">{{index + 1}} : {{addre}}</div> </div> </body> <script> new Vue({ el: "#app", //Vue接管区域 data: { addres: ["北京", "上海", "西安", "成都", "深圳"] }, methods: { } }) </script> </html> -
注意事项：通过
v-bind或者v-model绑定的变量，必须在数据模型中声明
Vue生命周期
- 生命周期：指一个对象从创建到销毁的整个过程
- 生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）
| 状态 | 阶段周期 |
|---|---|
beforeCreat | 创建前 |
created | 创建后 |
beforeMount | 挂载前 |
mounted | 挂载完成 |
beforeUpdate | 更新前 |
updated | 更新后 |
beforeDestroy | 销毁前 |
destroyed | 销毁后 |
- 下图是
Vue官网提供的从创建Vue到效果Vue对象的整个过程及各个阶段对应的钩子函数：
mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。（发送请求到服务端，加载数据）
![[计算机入门] 设置屏幕分辨率](https://img-blog.csdnimg.cn/67e0e85044aa45d38b81bc96ef02663d.png)
![[自学记录06|*百人计划]Gamma矫正与线性工作流](https://img-blog.csdnimg.cn/img_convert/fb9053fca186cfaba119a681ab098e7a.jpeg)
