-
Vue入门与介绍（初学必看）
一、Vue是什么
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
官网: 链接
Vue作者：尤雨溪/中国无锡Vue 的两个核心功能
声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
响应性：Vue 会自动跟踪 JavaScript 状态变化并在改变发生时响应式地更新 DOM。想要更深层次了解的可以去官网去学习
二、Vue的基本用法
1.条件渲染
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。
v-else 为 v-if 添加一个“else 区块”。
v-else-if 提供的是相应于 v-if 的“else if 区块”。它可以连续多次重复使用：案例
当Type值为A为则显示A，为B时显示B，全都不是时显示C
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue基本元素之判断if-elsetitle> head> <body> <div id="app"> <h1 v-if="type==='A'">Ah1> <h1 v-else-if="type==='B'">Bh1> <h1 v-else>Ch1> div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script> <script> var vm = new Vue({ el:"#app", data:{ type:'B' } }); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
测试结果
2.列表渲染
2.1 v-for
我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名：
如：
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue基本元素之循环title> head> <body> <div id="app"> <li v-for="item in items"> {{item.message}} li> div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script> <script> var vm = new Vue({ el:"#app", data:{ items:[ {message:'波哥'}, {message: 'hhhh'} ] } }); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
在 v-for 块中可以完整地访问父作用域内的属性和变量。v-for 也支持使用可选的第二个参数表示当前项的位置索引。
如
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue基本元素之循环title> head> <body> <div id="app"> <li v-for="(item,index) in items"> {{item.message}} {{index}} li> div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script> <script> var vm = new Vue({ el:"#app", data:{ items:[ {message:'波哥'}, {message: 'hhhh'} ] } }); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
v-for 是如何对应 forEach 回调的函数签名的。实际上，你也可以在定义 v-for 的变量别名时使用解构，和解构函数参数类似
如
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue基本元素之循环title> head> <body> <div id="app"> <li v-for="{message} in items"> {{message}} li> <li v-for="({message},index) in items"> {{message}} {{index}} li> div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script> <script> var vm = new Vue({ el:"#app", data:{ items:[ {message:'波哥'}, {message: 'hhhh'} ] } }); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
2.2 v-for 与对象
可以使用 v-for 来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 Object.keys 的返回值来决定。
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue基本元素之循环遍历对象title> head> <body> <div id="app"> <ul> <li v-for="aa in Book "> {{aa}} li> ul> div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script> <script> var vm = new Vue({ el:"#app", data:{ Book:{ bid:1, bname:'jpm', bprice:34.6, bjj:'很好看' } } }); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
可以通过提供第二个参数表示属性名 (例如 key)：
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue基本元素之循环遍历对象title> head> <body> <div id="app"> <ul> <li v-for="(aa,key) in Book "> {{key}}:{{aa}} li> ul> div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script> <script> var vm = new Vue({ el:"#app", data:{ Book:{ bid:1, bname:'jpm', bprice:34.6, bjj:'很好看' } } }); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
第三个参数表示位置索引：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue基本元素之循环遍历对象</title> </head> <body> <div id="app"> <ul> <li v-for="(aa,key,index) in Book "> {{key}}:{{aa}}:{{index}} </li> </ul> </div> <!--导入Vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script> var vm = new Vue({ el:"#app", data:{ Book:{ bid:1, bname:'jpm', bprice:34.6, bjj:'很好看' } } }); </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
三、绑定事件
主要是一个指令methods，这里拿点击事件为例。
方法必须定义在Vue的methods中，v-on：事件DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Vue基本元素之循环遍历对象title> head> <body> <div id="app"> <button v-on:click="sayHi">click Mebutton> div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script> <script> var vm = new Vue({ el:"#app", data:{ message:"呵呵哈哈哈" }, methods:{//方法必须定义在Vue的methods中，v-on：事件 sayHi:function () { alert(this.message) } } }); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
四、双向绑定
什么是双向数据绑定
Vue.js是一个MVVM框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。
我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex，那么数据也是单项的，这时候就会和双向数据绑定有冲突。如我们有一个文本框，当我们在文本框输入内容时，后面内容就会同步展示出在后面
DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>titletitle> head> <body> <div id="app"> 输入的文本：<input type="text" v-model="message">{{message}} div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script> <script> var vm = new Vue({ el:"#app", data:{ message:null } }); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
五、生命周期
如图
代码解释
DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script> head> <body> <div id="d1"> <div>number:{{number}}div> <div>{{detail()}}div> <input type="text" v-model="number" /> div> <script> var data = { number:999, msg:null }; var vm = new Vue({ el:'#d1', data:data, methods:{ detail:function(){ return "使用方法来插值："+this.msg; } }, beforeCreate:function(){ console.log('beforeCreate:刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳') console.log(this.msg)//undefined console.log(document.getElementsByClassName("myp")[0])//undefined }, created:function(){ console.log('created:这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数') this.msg+='!!!' console.log('在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取') console.log('接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染') }, beforeMount:function(){ console.log('beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated') this.msg+='@@@' console.log('在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取') console.log(document.getElementsByClassName("myp")[0])//undefined console.log('接下来开始render，渲染出真实dom') }, // render:function(createElement){ // console.log('render') // return createElement('div','hahaha') // }, mounted:function(){ console.log('mounted：此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了') console.log(document.getElementsByClassName("myp")[0]) console.log('可以在这里操作真实dom等事情...') // this.$options.timer = setInterval(function () { // console.log('setInterval') // this.msg+='!' // }.bind(this),500) }, beforeUpdate:function(){ //这里不能更改数据，否则会陷入死循环 console.log('beforeUpdate:重新渲染之前触发') console.log('然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染') }, updated:function(){ //这里不能更改数据，否则会陷入死循环 console.log('updated:数据已经更改完成，dom也重新render完成') }, beforeDestroy:function(){ console.log('beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等...') // clearInterval(this.$options.timer) }, destroyed:function(){ console.log('destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳，这里也可以善后') } }); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
这里我们可以发现，Vue初始化调用四个函数beforeCreate和created 和 beforeMount
和Mountd
当我们修改文本框的值时，就会调用beforeUpdate 和Updated
六、过滤器
过滤器这边分局部过滤器和全局过滤器，其中两个方法用法差不多，而过滤器有分为串联过滤器，过滤器又有带参数的过滤器
串联过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>过滤器</title> </head> <body> <div id="app"> <!--引用全局过滤器 只要一个--> <!--{{msg|strSplit}}--> <!--过滤器串联--> {{msg|strSplit|strSplit2}} </div> <!--导入Vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script> //全局过滤器 过滤方法 Vue.filter('strSplit',function (value) { console.log(value); return value.substring(0,5); }), //全局过滤器 过滤方法 Vue.filter('strSplit2',function (value) { console.log(value); return value.substring(3,5); }) new Vue({ el:"#app", data() { return{ msg:'hello vue' } } }); </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
过滤器传参
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>过滤器</title> </head> <body> <div id="app"> <!--引用全局过滤器 只要一个--> <!--{{msg|strSplit}}--> <!--过滤器串联--> {{msg|strSplit|strSplit2}} <!--过滤器传参--> {{msg|strSplit3(3,5)}} </div> <!--导入Vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script> //全局过滤器 过滤方法 Vue.filter('strSplit',function (value) { console.log(value); return value.substring(0,5); }), //全局过滤器 过滤方法 Vue.filter('strSplit2',function (value) { console.log(value); return value.substring(3,5); }), Vue.filter('strSplit3',function (value,a,b) { console.log(value); return value.substring(a,b); }) new Vue({ el:"#app", data() { return{ msg:'hello vue' } } }); </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
七、计算属性&监听属性
7.1 计算属性
计算属性指两个变量，有一个变量能够影响到另外一个，而另外一个变量改变不能影响到
如
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算属性&监听属性</title> </head> <body> <div id="app"> <p>计算属性</p> 请输入第一个数：<input v-model="x"/><br> 请输入第二个数：<input v-model="y"/><br> 结果为：{{addFlag}} </div> <!--导入Vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script> new Vue({ el:"#app", data() { return{ x:0, y:0 } }, computed:{ //定义计算属性 addFlag:function() { return parseInt(this.x)+parseInt(this.y) } } }); </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
7.2 监听属性
指变量之间相互影响，如km换算到m
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算属性&监听属性</title> </head> <body> <div id="app"> <p>计算属性</p> 请输入第一个数：<input v-model="x"/><br> 请输入第二个数：<input v-model="y"/><br> 结果为：{{addFlag}} <p>监听属性</p> 请输入第一个数：<input v-model="km"/><br> 请输入第二个数：<input v-model="m"/><br> </div> <!--导入Vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script> new Vue({ el:"#app", data() { return{ x:0, y:0, km:0, m:0 } }, computed:{ //定义计算属性 addFlag:function() { return parseInt(this.x)+parseInt(this.y) } }, watch:{ km:function (v) { //：之前对应的是被监听的属性，V指的是被监听属性的值 // V代表是千米 // 当v发送变化，那么就会调用方法 this.m= parseInt(v)* 1000; }, m:function (v) { this.km = parseInt(v)/1000 } } }); </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
八、购物车案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物车案例</title> </head> <body> <div id="app"> <p>购物车案例</p> <table> <tr> <td>物品</td> <td>单价</td> <td>数量</td> <td>小计</td> </tr> <tr> <td>帽子</td> <td> {{aa}} </td> <td> <input v-model="aaa"/> </td> <td> {{aazj}} </td> </tr> <tr> <td>衣服</td> <td> {{bb}} </td> <td> <input v-model="bbb"/> </td> <td> {{bbzj}} </td> </tr> <tr> <td>裤子</td> <td> {{cc}} </td> <td> <input v-model="ccc"/> </td> <td> {{cczj}} </td> </tr> <tr> <td>总价</td> <td colspan="3">{{zj}}</td> </tr> </table> </div> <!--导入Vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script> new Vue({ el:"#app", data() { return{ aa:20, bb:3000, cc:200, aaa:1, bbb:1, ccc:1 } },computed:{ aazj(){ return parseInt(this.aa)*parseInt(this.aaa); }, bbzj(){ return parseInt(this.bb)*parseInt(this.bbb); }, cczj(){ return parseInt(this.cc)*parseInt(this.ccc); }, zj(){ return parseInt(this.aazj)+parseInt(this.bbzj)+parseInt(this.cczj); } } }); </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
-
相关阅读:
SystemVerilog语法中，在Class中引用层次化信号
Unity动画Animation Day05
有没有关于教育技术学的论文选题参考？
重装系统后如何在win10系统打开命令行窗口
Springboot导出mysql数据到Excel表
用js的moment插件 获取指定时间戳的所在月份的最后一天的最后一毫秒的时间戳。
PCB走线规则
多路彩灯控制器led流水灯VHDL速度可调仿真图视频、源代码
用机器学习识别不断变化的股市状况—隐马尔可夫模型(HMM)股票指数预测实战
[源码解析] TensorFlow 分布式之 ParameterServerStrategy V1
- 原文地址：https://blog.csdn.net/qq_63531917/article/details/126490607
