测开 | Vue速查知识点
文章目录
- Vue知识
- 1. Vue 概述
- 2. Vue 代码格式
- 3. Vue 指令
- 3.1 v-bind & v-model
- 3.2 v-on
- 3.3 v-if和v-show
- 3.4 v-for
- 4. 生命周期
Vue知识
1. Vue 概述
-
简介：
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 -
原理：
MVVM:其实是Model-View-ViewModel的缩写，有3个单词，具体释义如下：- Model: 数据模型，特指前端中通过请求从后台获取的数据
- View: 视图，用于展示数据的页面，可以理解成我们的html+css搭建的页面，但是没有数据
- ViewModel: 数据绑定到视图，负责将数据（Model）通过JavaScript的DOM技术，将数据展示到视图（View）上
如图所示就是MVVM开发思想的含义：
2. Vue 代码格式
- 框架格式：
<!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>Vue-快速入门</title><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"},methods:{}})
</script>
</html>
3. Vue 指令
- Vue指令如下表：
| 指令 | 作用 |
|---|---|
| v-bind | 为HTML标签绑定属性值，如设置 href , css样式等 |
| v-model | 在表单元素上创建双向数据绑定 |
| v-on | 为HTML标签绑定事件 |
| v-if | 条件性的渲染某元素，判定为true时渲染,否则不渲染 |
| v-else | |
| v-else-if | |
| v-show | 根据条件展示某元素，区别在于切换的是display属性的值 |
| v-for | 列表渲染，遍历容器的元素或者对象的属性 |
3.1 v-bind & v-model
| 指令 | 作用 |
|---|---|
| v-bind | 为HTML标签绑定属性值，如设置 href , css样式等 |
| v-model | 在表单元素上创建双向数据绑定 |
- v-bind: 为HTML标签绑定属性值，如设置 href , css样式等。当vue对象中的数据模型发生变化时，标签的属性值会随之发生变化。
<a v-bind:href="url">链接1</a>
<a :href="url">链接2</a>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{message: "Hello Vue",url:"https://www.baidu.com"},methods:{}})
</script>
-
v-model： 在表单元素上创建双向数据绑定。什么是双向？
- vue对象的data属性中的数据变化，视图展示会一起变化
- 视图数据发生变化，vue对象的data属性中的数据也会随着变化。
data属性中数据变化，我们知道可以通过赋值来改变，但是视图数据为什么会发生变化呢？只有表单项标签！所以双向绑定一定是使用在表单项标签上的。编写如下代码：
<a v-bind:href="url">链接1</a>
<input type="text" v-model="url">
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{message: "Hello Vue",url:"https://www.baidu.com"},methods:{}})
</script>
表单项标签：
<input>：用于创建一个表单输入框，可以输入文本、密码、日期、数字等。<textarea>：用于创建一个多行文本输入框。<select>：用于创建一个下拉选择框，用户可以从预定义的选项中选择一个或多个选项。<checkbox>：用于创建一个复选框，用户可以从多个选项中选择一个或多个选项。<radio>：用于创建一个单选按钮，用户可以从多个选项中选择一个选项。<button>：用于创建一个按钮，用户可以点击执行特定的操作。<submit>：用于创建一个提交按钮，用于提交整个表单内容。<reset>：用于创建一个重置按钮，用于将表单内容重置为初始状态。<label>：用于创建一个标签，用于描述表单字段的用途或说明。<fieldset>：用于创建一个字段集，用于将相关的表单字段组合在一起。<legend>：用于创建字段集的标题，描述字段集的内容。
3.2 v-on
| 指令 | 作用 |
|---|---|
| v-on | 用来给html标签绑定事件的 |
- v-on语法给标签的事件绑定的函数，必须是vue对象种声明的函数
<input type="button" value="点我一下" v-on:click="demo()">
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{},methods: {demo: function(){alert("你点我了一下...");}}})
</script>
3.3 v-if和v-show
| 指令 | 描述 |
|---|---|
| v-if | 条件性的渲染某元素，判定为true时渲染,否则不渲染 |
| v-if-else | |
| v-else | |
| v-show | 根据条件展示某元素，区别在于切换的是display属性的值 |
- v-if:
年龄<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>
<script>// 定义 Vue 对象new Vue({el: "#app",data: {age: 20}})
</script>
- v-show:
年龄<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>
<script>// 定义 Vue 对象new Vue({el: "#app",data: {age: 20}})
</script>
3.4 v-for
| 指令 | 描述 |
|---|---|
| v-for | 列表渲染，遍历容器的元素或者对象的属性 |
- 格式：
<标签 v-for="变量 in 列表">{{变量名}}</标签>
<标签 v-for="(变量名,索引变量) in 列表">{{索引变量 + 1}} {{变量名}}</标签>
- 模板：
<div id="app"><div v-for="addr in addrs">{{addr}}</div><hr><div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>
</div>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{addrs:["北京", "上海", "西安", "成都", "深圳"]},methods: {}})
</script>
4. 生命周期
- vue的生命周期：指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为（钩子方法）。
| 状态 | 阶段周期 |
|---|---|
| beforeCreate | 创建前 |
| created | 创建后 |
| beforeMount | 挂载前 |
| mounted | 挂载完成 |
| beforeUpdate | 更新前 |
| updated | 更新后 |
| beforeDestroy | 销毁前 |
| destroyed | 销毁后 |
- Vue渲染流程：
mounted：挂载完成，Vue初始化成功，HTML页面渲染成功以后我们一般用于页面初始化自动的ajax（axios）请求后台数据
- 模板：
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{},methods: {},mounted () {alert("vue挂载完成,发送请求到服务端")}})
</script>