尚硅谷Vue2-3,学习笔记经常吃猪头肉好吗

作者: 小周 2023-11-29 03:35:37
阅读(108)
(一)基本01基础模板语法1.1插值语法--解析标签体里的内容data->{{}}里可以写js表达式,或者js语句:通过{{}}在标签体里插入data里面的数据{{}}
//{{}}:插值语法-vue模板1.2指令语法--解析标签数据绑定条件渲染1.2.1**v-bind:xxx**简写->:xxx一般用于解析标签属性,经过解析后值也要写成js表达式,**v-bind:为单向数据绑定,数据只能从data流向页面**{{school.age}}
//:指令语法-v-bind简写v-bind:动态绑定样式1.2.2v-model:xxx**为双向数据绑定,数据可以在页面与data中双向流动,但是一般用于表单类元素上(如:inport,select等)****在获取表单数据时,v-model会获取value值****对于一般的文本框,则输入的内容就是value的值****对于单选则要设置要获取的value值**对于多选框设置要获取的value后还要把v-model绑定的数据写成数组的形式修饰符v-model.number使输入的数据类型转换成Number类型v-model.lazy时输入的数据在失去焦点后,才会被收集v-model.trim去掉前后的空格1.2.3**v-on:xxx**简写->@xxx用于绑定事件,事件的回调要配置在methods中最终会在Vue实例(vm)上,存放在data里的数据才会有数据劫持与数据代理,@click='showInfo(占位符,可以传递even参数

{{name}}

{{address}}

1.2.4事件的修饰符:Vue中的事件修饰符:1.prevent:阻止默认事件(常用);**2.stop:阻止事件冒泡(常用);**3.once:事件只触发一次(常用)4.capture:使用事件的捕获模式,在事件捕获阶段进行处理;5.self:只有event.target是当前操作的元素时才触发事件;6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕;在绑定事件的后面添加点我提示信息修饰符可以连用1.2.5键盘事件:1.Vue中常用的按键别名:回车=>enter删除=>delete(捕获“删除”和“退格”键)退出=>esc空格=>space换行=>tab(特殊,必须配合keydown去使用)上=>up下=>down左=>left右=>right2.系统修饰键(用法特殊):ctrl、alt、shift、meta(1).配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。(2).配合keydown使用:正常触发事件。4.也可以使用keyCode去指定具体的按键编码(不推荐,以后可能会移除)5.Vue.config.keyCodes.自定义键名=键码,可以去定制按键别名Vue.config.keyCodes.huiche=13//定义了一个别名按键1.2.6v-if/v-else-if写法:v-if=‘表达试’,功能与js中的一样,适用于切换频率比较低的场景,不展示的DOM元素会直接别移除,且与v-else-if结合使用时中间不能添加其他元素,否则结构会被打断1.2.7v-show写法:v-show=‘表达式’,适用于切换频率比较低的场景,不展示的DOM元素会不会被移出,而是使用样式进行隐藏,在vue3中v-if比v-show的优先级要高,但使用v-if时,元素可能会获取不到,而使用v-show时则一定会获取到1.2.8v-forv-for用于展示列表数据语法:v-for=“(item,index)inxxx“:key=”yyy”可以遍历:数组,对象,字符串,指定遍历次数v-for中key值得作用b站尚硅谷Vue31.2.9其他不常用的内置指令v-textv-html与差值语法类似,但v-text不能解析标签,v-html可以解析结构标签转成字符串,但会造成xss(跨域脚本攻击)漏洞v-cloak为使用该指令的标签提供一个遮罩,在Vue实例创建完成,并接管容器后,会删除v-cloak使用css的display:none属性,配合v-cloak解决网速过慢时页面展示出{{xxx}}的问题,防止页面闪烁v-oncev-prev-once:所在节点模板只动态渲染一次,然后视为静态渲染,可以优化性能,v-pre:跳过所在节点的编译过程,可用于不使用插值语法,指令语法的节点,会加快编译1.2.10自定义指令见1.3.61.3Vue实例里的配置项1.3.1el[element(元素)]el:'xxx'用于挂载当前vue实例指定的容器,值一般为css的选择器字符串,本质是调用了vue实例里的$mount属性constvm=newVue({el:'#root'})vm.$mount('root')1.3.2datadata用于定义属性(属性名+属性值)constvm=newVue({el:'#root',//对象方法,一般用法data:{name:'张三'},//函数方法,用于组件,使函数的this指向Vue实例data(){name:'张三'}})1.3.3methodsmethods方法,主要用于定义绑定事件的方法

{{name}}

{{address}}

methods定义的方法也可以在插值语法{{}},中使用当data里的数据发生改变则vue会对模板进行重新解析,当解析到定义的函数时,进行调用1.3.4computedcomputed计算属性:1.定义:要用的属性不存在,要通过已有属性计算得来。2.原理:底层借助了`Objcet.defineproperty`方法提供的getter和setter。3.get函数什么时候执行?(1).初次读取时会执行一次。(2).当依赖的数据发生改变时会被再次调用。4.优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。5.备注:1.计算属性最终会出现在vm上,直接读取使用即可。2.如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。3.==注意:computed里不能写异步任务==1.3.5watch监视属性watch:`immediate:true`在初始化时就进行调用`handler(新值,旧值){}`1.当被监视的属性变化时,回调函数自动调用,进行相关操作2.监视的属性必须存在,才能进行监视!!3.监视的两种写法:(1).newVue时传入watch配置(2).通过vm.$watch监视4.`deep:true`开启深度监视,要写成完整形式1.3.6directives用于自定义指令

放大10倍后的n值是:

newVue({el:'#root',data:{name:'尚硅谷',n:1},//定义全局指令yyy是对象形式,如果配置函数形式的全局,则使用回调函数Vue.directive('yyy',{//注意在定义全局时,是directive不是directives//指令与元素成功绑定时(一上来)bind(element,binding){element.value=binding.value},//指令所在元素被插入页面时inserted(element,binding){element.focus()},//指令所在的模板被重新解析时update(element,binding){element.value=binding.value}})directives:{//xxx函数合适会被调用?1,指令与元素绑定成功时2,指令所在的模板被重新解析时//函数形式,适合简单的操作xxx(element,binding){//element:绑定v-xxx所在的元素(span)binnding:绑定v-xxx所在的值(n)console.log(this)//此处的this是指向window},//对象形式,适合一些细节上的操作yyy:{}}})(1).局部指令:newVue({directives:{指令名:配置对象}})或newVue({directives{指令名:回调函数})}(2).全局指令:Vue.directive(指令名,配置对象)或Vue.directive(指令名,回调函数)1.3.7mountedVue完成模板的解析并把初始的,真实DOM元素放入页面后(挂载完毕)调用mounted(回调函数)02MVVM模型01.png02.png模板(view)通过-->Vue实例对象-->监听对应data中的数据(model)data中的数据(model)通过-->Vue实例对象-->绑定模板(view)data中的所有属性,最后都会出现在vm身上vm身上所有的数据,及Vue原型身上所有的属性,在Vue模板中都可以直接使用==03数据代理==letnumber=18letperson={name:'张三',sex:'男',}Object.defineProperty(person,'age',{//第二个参数,表示要读/写第一个参数的那个属性//value:18,//enumerable:true,//控制属性是否可以枚举,默认值是false//writable:true,//控制属性是否可以被修改,默认值是false//configurable:true//控制属性是否可以被删除,默认值是false//当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值get(){console.log('有人读取age属性了')returnnumber},//当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值set(value){//参数value就是收到的修改的值console.log('有人修改了age属性,且值是',value)number=value}})//console.log(Object.keys(person))console.log(person)数据代理--通过一个对象代理对另一个对象中属性的操作(读/写)letobj={x:100}letobj2={y:200}Object.defineProperty(obj2,'x',{get(){returnobj.x},set(value){obj.x=value}})使用数据代理可以通过obj2.x来操作obj.x的值得变化03.png通过vm对象来代理data对象中的属性操作(读/写),更方便的data中的数据,通Object.defineProperty()把data对象中所有属性添加到vm上,并为每个添加上的属性都指定一个getter/setter来操作(读/写)data中的对应属性如果不做数据处理则在使用插值语法插入data中的数据时要这样{{_data.name}}{{_data.adderss}}插入04监视数据原理**Vue监视数据的原理:**1.vue会监视data中所有层次的数据。2.如何监测对象中的数据?通过setter实现监视,且要在newVue时就传入要监测的数据。(1).对象中后追加的属性,Vue默认不做响应式处理(2).如需给后添加的属性做响应式,请使用如下API:Vue.set(target,propertyName/index,value)或vm.$set(target,propertyName/index,value)3.如何监测数组中的数据?04.png通过包裹数组更新元素的方法实现,本质就是做了两件事:(1).调用原生对应的方法对数组进行更新。(2).重新解析模板,进而更新页面。4.在Vue修改数组中的某个元素一定要用如下方法:1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()2.Vue.set()或vm.$set()特别注意:Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性!!!==05Vue的生命周期==生命周期:1.又名:**生命周期回调函数**、生命周期函数、**生命周期钩子**。2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。3.生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的。4.生命周期函数中的this指向是vm或组件实例对象。生命周期.png常用的生命周期钩子:1.mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等**【初始化操作】**。2.beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等**【收尾工作】**。**关于销毁Vue实例**1.销毁后借助Vue开发者工具看不到任何信息。2.销毁后自定义事件会失效,但原生DOM事件依然有效。3.一般不会在beforeDestroy操作数据,因为即便操作数据,也不会再触发更新流程了。(二)组件化模块01组件基本使用定义:实现应用中局部功能代码和资源的集合Vue中使用组件的三大步骤:一、定义组件(创建组件)二、注册组件三、使用组件(写组件标签)一、如何定义一个组件?使用Vue.extend(options)创建,其中options和newVue(options)时传入的那个options几乎一样,但也有点区别;区别如下:1.el不要写,为什么?———最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器。2.data必须写成函数,为什么?————避免组件被复用时,数据存在引用关系(this指向)。备注:使用template可以配置组件结构。二、如何注册组件?1.局部注册:靠newVue的时候传入components选项2.全局注册:靠Vue.component('组件名',组件)三、编写组件标签:``//全局组件标签Vue.config.productionTip=false//第一步:创建school组件constschool=Vue.extend({//el:'#root',组件定义时,一定不要写el配置项,因为最终所有的组件都要被一个vm管理,由vm决定服务于哪个容器。template:`//template标签会替换模板标签

学校名称:{{schoolName}}

学校地址:{{address}}

点我提示学校名`,data(){return{schoolName:'尚硅谷',address:'北京昌平'}},})//第一步:创建student组件conststudent=Vue.extend({template:`

学生姓名:{{studentName}}

学生年龄:{{age}}

`,data(){return{studentName:'张三',age:18}}})//第一步:创建hello全局组件consthello=Vue.extend({//Vue.extend可省略template:`

你好啊!{{name}}

`,data(){return{name:'Tom'}}})//第二步:全局注册组件Vue.component('hello',hello)//创建vmnewVue({el:'#root',data:{msg:'你好啊!'},//第二步:注册组件(局部注册)components:{school,student}})newVue({el:'#root2',})==02关于VueComponent:==1.school组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的。**2.我们只需要写``或``,Vue解析时会帮我们创建(new了一个)school组件的实例对象,即Vue帮我们执行的:newVueComponent(options),当然你也可以自己new一个。****3.特别注意:每次调用Vue.extend,返回的都是一个全新的VueComponent!!!!**4.关于this指向:(1).组件配置中:data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】。(2).newVue(options)配置中:data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】。==03对象原型==对象原型.pngVue构造函数的属性中存在一个prototype属性,值为一个对象,this指向他的原型对象.这个指向也叫作做==显式原型链==.当new一个Vue的实例对象时,他的属性中存在一个__proto__属性,值为一个对象,this也指向Vue原型对象,这个指向也叫作,==隐式原型链==.而Vue的原型对象属性里也会在一个__proto__属性,this指向Object的原型对象,他的属性中也存在一个__proto__属性,this指向为nullVueComponent构造函数的属性中存在一个prototype属性,值为一个对象,this指向他的原型对象.这个指向也叫作做==显式原型链==.当编写一个组件标签时(或者new一个VueComponent的实例对象)时,他的属性中存在一个__proto__属性,值为一个对象,this也指向VueComponent原型对象,这个指向也叫作,==隐式原型链==.而VueComponent的原型对象属性里也会在一个__proto__属性,(原本的this指向应该指向Object的原型对象,),但是在Vue中,Vue把这条==隐式原型链==,指向了Vue的原型对象,即:==VueComponent.prototype.__proto__===Vue.prototype==,从而使组件实例对象可以访问到Vue原型上的属性和方法04render()函数关于不同版本的Vue:1.vue.js与vue.runtime.xxx.js的区别:(1).vue.js是完整版的Vue,包含:核心功能+模板解析器。(2).vue.runtime.xxx.js是运行版的Vue,只包含:核心功能;没有模板解析器。2.因为vue.runtime.xxx.js没有模板解析器,所以不能使用template配置项,需要使用render函数接收到的ceateElement函数去指定具体内容。newVue({el:'#app',//render函数完成了这个功能:将App组件放入容器中render:h=>h(App),//render:q=>q('h1','你好啊')//template:`

你好啊

`,//components:{App},})(二)脚手架01文件目录结构├──node_modules├──public│├──favicon.ico:页签图标│└──index.html:主页面├──src│├──assets:存放静态资源││└──logo.png││──component:存放组件││└──HelloWorld.vue││──App.vue:汇总所有组件││──main.js:入口文件├──.gitignore:git版本管制忽略的配置├──babel.config.js:babel的配置文件├──package.json:应用包配置文件├──README.md:应用描述文件├──package-lock.json:包版本控制文件02vue.config.js配置文件使用vueinspect>output.js可以查看到Vue脚手架的默认配置。使用vue.config.js可以对脚手架进行个性化定制,详情见:https://cli.vuejs.org/zh03ref属性被用来给元素或子组件注册引用信息(id的替代者)应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)使用方式:打标识:.....或
获取:this.$refs.xxx04props配置项功能:让组件接收外部传过来的数据传递数据:父组件===>子组件接收数据:第一种方式(只接收):props:['name']第二种方式(限制类型):props:{name:String}第三种方式(限制类型、限制必要性、指定默认值):props:{name:{type:String,//类型required:true,//必要性default:'老王'//默认值}}备注:props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据。05mixin(混入)功能:可以把多个组件共用的配置提取成一个混入对象使用方式:第一步定义混合:{data(){....},methods:{....}....}第二步使用混入:全局混入:Vue.mixin(xxx)局部混入:mixins:['xxx']06插件功能:用于增强Vue本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。定义插件:对象.install=function(Vue,options){//1.添加全局过滤器Vue.filter(....)//2.添加全局指令Vue.directive(....)//3.配置全局混入(合)Vue.mixin(....)//4.添加实例方法Vue.prototype.$myMethod=function(){...}Vue.prototype.$myProperty=xxxx}使用插件:Vue.use()05scoped样式作用:让样式在局部生效,防止冲突。写法:06总结TodoList案例组件化编码流程:(1).拆分静态组件:组件要按照功能点拆分,命名不要与html元素冲突。(2).实现动态组件:考虑好数据的存放位置,数据是一个组件在用,还是一些组件在用:1).一个组件在用:放在组件自身即可。2).一些组件在用:放在他们共同的父组件上(状态提升)。(3).实现交互:从绑定事件开始。props适用于:(1).父组件==>子组件通信(2).子组件==>父组件通信(要求父先给子一个函数)使用v-model时要切记:v-model绑定的值不能是props传过来的值,因为props是不可以修改的!props传过来的若是对象类型的值,修改对象中的属性时Vue不会报错,但不推荐这样做。07webStorage存储内容大小一般支持5MB左右(不同浏览器可能还不一样)浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制。相关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。08组件的自定义事件一种组件间通信的方式,适用于:子组件===>父组件使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)。绑定自定义事件:第一种方式,在父组件中:第二种方式,在父组件中:......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指向会出问题!09全局事件总线(GlobalEventBus)一种组件间通信的方式,适用于任意组件间通信。安装全局事件总线:newVue({......beforeCreate(){Vue.prototype.$bus=this//安装全局事件总线,$bus就是当前应用的vm(this)},......})使用事件总线:接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身。methods(){demo(data){......}}......mounted(){//this.$bus.$on('xxxx',this.demo)//使用箭头函数,不用再上面使用methods配置项this.$bus.$on('xxx',(data)=>{console.log(data)})}发送数据:this.$bus.$emit('xxxx',数据)最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件。10消息订阅与发布(pubsub)一种组件间通信的方式,适用于任意组件间通信。使用步骤:安装pubsub:npmipubsub-js引入:importpubsubfrom'pubsub-js'接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身。methods(){demo(data){......}}......mounted(){this.pid=pubsub.subscribe('xxx',this.demo)//订阅消息}提供数据:pubsub.publish('xxx',数据)最好在beforeDestroy钩子中,用PubSub.unsubscribe(pid)去取消订阅。11nextTick语法:this.$nextTick(回调函数)作用:在下一次DOM更新结束后执行其指定的回调。什么时候用:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行。12Vue封装的过度与动画作用:在插入、更新或移除DOM元素时,在合适的时候给元素添加样式类名。写法:准备好样式:元素进入的样式:v-enter:进入的起点v-enter-active:进入过程中v-enter-to:进入的终点元素离开的样式:v-leave:离开的起点v-leave-active:离开过程中v-leave-to:离开的终点使用包裹要过度的元素,并配置name属性:你好啊!备注:若有多个元素需要过度,则需要使用:,且每个元素都要指定key值。(三)vue脚手架配置代理01方法一在vue.config.js中添加如下配置:devServer:{proxy:"http://localhost:5000"}说明:优点:配置简单,请求资源时直接发给前端(8080)即可。缺点:不能配置多个代理,不能灵活的控制请求是否走代理。工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器(优先匹配前端资源)02方法二编写vue.config.js配置具体代理规则:module.exports={devServer:{proxy:{//请求一'/api1':{//匹配所有以'/api1'开头的请求路径target:'http://localhost:5000',//代理目标的基础路径changeOrigin:true,pathRewrite:{'^/api1':''}//重写路径头.把所有符合正则匹配的转为空字符串},//请求二'/api2':{//匹配所有以'/api2'开头的请求路径target:'http://localhost:5001',//代理目标的基础路径changeOrigin:true,pathRewrite:{'^/api2':''}}}}}/*changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080changeOrigin默认值为true*/说明:优点:可以配置多个代理,且可以灵活的控制请求是否走代理。缺点:配置略微繁琐,请求资源时必须加前缀。03插槽作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件===>子组件。分类:默认插槽、具名插槽、作用域插槽使用方式:默认插槽:父组件中:
html结构1
子组件中:具名插槽:父组件中:
html结构1
html结构2
子组件中:作用域插槽:理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。(games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定)具体编码:父组件中:
    {{g}}
{{g}}子组件中:(四)Vuex1.概念在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。vuex.png在Vuex中存在三个对象-->:State,Actions,Mutations首先在State中进行声明初始状态,然后在组件VueComponents中定义事件,调用dispatch(‘事件类型’,事件操作)进入Actions对象,且Actions对象中存在一对(key,value)与dispatch的参数对应(value为一个函数会有,dispatch中的事件操作),调用commit()进行事件提交,进入Mutations对象,且存在一对(key,value)(value为一个函数会有,dispatch中的事件操作和,state中定义的初始状态),通过Vuex底层的Mutate进行加工修改,使state中的初始状态发生改变,进入State,重新编译解析VueComponents组件,把经过Mutate进行加工修改的值,通过Vuex底层的Render进行渲染到页面一般情况下可以跳过dispatch(),直接使用commit()进入到Mutations对象,但是因为Actions对象与后端接口绑定(BackendApi),所以在执行异步请求数据时,则不能跳过也可以使用context上下文参数,来直接对state进行操作,跳过Mutations对象,但是因为Mutations对象与Devtools(开发者工具)进行绑定,跳过则Vue的开发者工具会监听不到操作2.何时使用?多个组件需要共享数据时3.搭建vuex环境创建文件:src/store/index.js//引入Vue核心库importVuefrom'vue'//引入VueximportVuexfrom'vuex'//应用Vuex插件Vue.use(Vuex)//准备actions对象——响应组件中用户的动作constactions={}//准备mutations对象——修改state中的数据constmutations={}//准备state对象——保存具体的数据conststate={}//创建并暴露storeexportdefaultnewVuex.Store({actions,mutations,state})在main.js中创建vm时传入store配置项......//引入storeimportstorefrom'./store'......//创建vmnewVue({el:'#app',render:h=>h(App),store})4.基本使用初始化数据、配置actions、配置mutations,操作文件store.js//引入Vue核心库importVuefrom'vue'//引入VueximportVuexfrom'vuex'//引用VuexVue.use(Vuex)constactions={//响应组件中加的动作jia(context,value){//console.log('actions中的jia被调用了',miniStore,value)context.commit('JIA',value)},}constmutations={//执行加JIA(state,value){//console.log('mutations中的JIA被调用了',state,value)state.sum+=value}}//初始化数据conststate={sum:0}//创建并暴露storeexportdefaultnewVuex.Store({actions,mutations,state,})组件中读取vuex中的数据:$store.state.sum组件中修改vuex中的数据:$store.dispatch('action中的方法名',数据)或$store.commit('mutations中的方法名',数据)备注:若没有网络请求或其他业务逻辑,组件中也可以越过actions,即不写dispatch,直接编写commit5.getters的使用概念:当state中的数据需要经过加工后再使用时,可以使用getters加工。在store.js中追加getters配置......constgetters={bigSum(state){returnstate.sum*10}}//创建并暴露storeexportdefaultnewVuex.Store({......getters})组件中读取数据:$store.getters.bigSum6.四个map方法的使用mapState方法:用于帮助我们映射state中的数据为计算属性computed:{//借助mapState生成计算属性:sum、school、subject(对象写法)...mapState({sum:'sum',school:'school',subject:'subject'}),//借助mapState生成计算属性:sum、school、subject(数组写法)...mapState(['sum','school','subject']),},mapGetters方法:用于帮助我们映射getters中的数据为计算属性computed:{//借助mapGetters生成计算属性:bigSum(对象写法)...mapGetters({bigSum:'bigSum'}),//借助mapGetters生成计算属性:bigSum(数组写法)...mapGetters(['bigSum'])},mapActions方法:用于帮助我们生成与actions对话的方法,即:包含$store.dispatch(xxx)的函数methods:{//靠mapActions生成:incrementOdd、incrementWait(对象形式)...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})//靠mapActions生成:incrementOdd、incrementWait(数组形式)...mapActions(['jiaOdd','jiaWait'])}mapMutations方法:用于帮助我们生成与mutations对话的方法,即:包含$store.commit(xxx)的函数methods:{//靠mapActions生成:increment、decrement(对象形式)...mapMutations({increment:'JIA',decrement:'JIAN'}),//靠mapMutations生成:JIA、JIAN(对象形式)...mapMutations(['JIA','JIAN']),}备注:mapActions与mapMutations使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件对象。在使用数组方式时,要与在mapActions,mapMutations里定义的名字一样7.模块化+命名空间目的:让代码更好维护,让多种数据分类更加明确。修改store.jsconstcountAbout={namespaced:true,//开启命名空间state:{x:1},mutations:{...},actions:{...},getters:{bigSum(state){returnstate.sum*10}}}constpersonAbout={namespaced:true,//开启命名空间state:{...},mutations:{...},actions:{...}}conststore=newVuex.Store({modules:{countAbout,personAbout}})开启命名空间后,组件中读取state数据://方式一:自己直接读取this.$store.state.personAbout.list//方式二:借助mapState读取:...mapState('countAbout',['sum','school','subject']),开启命名空间后,组件中读取getters数据://方式一:自己直接读取this.$store.getters['personAbout/firstPersonName']//方式二:借助mapGetters读取:...mapGetters('countAbout',['bigSum'])开启命名空间后,组件中调用dispatch//方式一:自己直接dispatchthis.$store.dispatch('personAbout/addPersonWang',person)//方式二:借助mapActions:...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})开启命名空间后,组件中调用commit//方式一:自己直接committhis.$store.commit('personAbout/ADD_PERSON',person)//方式二:借助mapMutations:...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),(五)路由理解:一个路由(route)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理。前端路由:key是路径,value是组件。1.基本使用安装vue-router,命令:npmivue-router应用插件:Vue.use(VueRouter)编写router配置项://引入VueRouterimportVueRouterfrom'vue-router'//引入Luyou组件importAboutfrom'../components/About'importHomefrom'../components/Home'//创建router实例对象,去管理一组一组的路由规则constrouter=newVueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home}]})//暴露routerexportdefaultrouter实现切换(active-class可配置高亮样式)About指定展示位置2.几个注意点路由组件通常存放在pages文件夹,一般组件通常存放在components文件夹。通过切换,“隐藏”了的路由组件,默认是被销毁掉的,需要的时候再去挂载。每个组件都有自己的$route属性,里面存储着自己的路由信息。整个应用只有一个router,可以通过组件的$router属性获取到。3.多级路由(多级路由)配置路由规则,使用children配置项:routes:[{path:'/about',component:About,},{path:'/home',component:Home,children:[//通过children配置子级路由{path:'news',//此处一定不要写:/newscomponent:News},{path:'message',//此处一定不要写:/messagecomponent:Message}]}]跳转(要写完整路径):News4.路由的query参数传递参数跳转//在``模板字符串里,使用js表达式-->${表达式}跳转到{{m.title}}接收参数:
  • 编号:{{$route.query.id}}
  • 标题:{{$route.query.title}}
  • 5.命名路由作用:可以简化路由的跳转。如何使用给路由命名:{path:'/demo',component:Demo,children:[{path:'test',component:Test,children:[{name:'hello'//给路由命名path:'welcome',component:Hello,}]}]}简化跳转:跳转跳转跳转6.路由的params参数配置路由,声明接收params参数{path:'/home',component:Home,children:[{path:'news',component:News},{component:Message,children:[{name:'xiangqing',path:'detail/:id/:title',//使用占位符声明接收params参数component:Detail}]}]}传递参数跳转跳转特别注意:路由携带params参数时,若使用to的对象写法,则不能使用path配置项,必须使用name配置!接收参数:$route.params.id$route.params.title7.路由的props配置作用:让路由组件更方便的收到参数{name:'xiangqing',path:'detail/:id',component:Detail,//第一种写法:props值为对象,该对象中所有的key-value的组合最终都会通过props传给Detail组件//props:{a:900}//第二种写法:props值为布尔值,布尔值为true,则把路由收到的所有params参数通过props传给Detail组件//props:true//第三种写法:props值为函数,该函数返回的对象中每一组key-value都会通过props传给Detail组件props($route){return{id:$route.query.id,title:$route.query.title}}}8.的replace属性作用:控制路由跳转时操作浏览器历史记录的模式浏览器的历史记录有两种写入方式:分别为push和replace,push是追加历史记录,replace是替换当前记录。路由跳转时候默认为push如何开启replace模式:News9.编程式路由导航作用:不借助实现路由跳转,让路由跳转更加灵活具体编码://$router的两个APIthis.$router.push({//一般栈结构,name:'xiangqing',params:{id:xxx,title:xxx}})this.$router.replace({//栈结构,但新的数据,会替换旧的name:'xiangqing',params:{id:xxx,title:xxx}})this.$router.forward()//前进this.$router.back()//后退this.$router.go()//可前进也可后退,通过传递参数,来控制前进与后退的跳转页数10.缓存路由组件作用:让不展示的路由组件保持挂载,不被销毁。具体编码://include:添加保持挂载的范围(News),值为'组件名',写成数组形式,可添加多个范围11.两个新的生命周期钩子作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态。具体名字:activated路由组件被激活时触发。deactivated路由组件失活时触发。12.==路由守卫==作用:对路由进行权限控制分类:全局守卫、独享守卫、组件内守卫全局守卫://全局前置守卫:初始化时执行、每次路由切换前执行router.beforeEach((to,from,next)=>{console.log('beforeEach',to,from)if(to.meta.isAuth){//判断当前路由是否需要进行权限控制if(localStorage.getItem('school')==='atguigu'){//权限控制的具体规则next()//放行}else{alert('暂无权限查看')//next({name:'guanyu'})}}else{next()//放行}})//全局后置守卫:初始化时执行、每次路由切换后执行router.afterEach((to,from)=>{console.log('afterEach',to,from)if(to.meta.title){document.title=to.meta.title//修改网页的title}else{document.title='vue_test'}})独享守卫:beforeEnter(to,from,next){console.log('beforeEnter',to,from)if(to.meta.isAuth){//判断当前路由是否需要进行权限控制if(localStorage.getItem('school')==='atguigu'){next()}else{alert('暂无权限查看')//next({name:'guanyu'})}}else{next()}}组件内守卫://进入守卫:通过路由规则,进入该组件时被调用beforeRouteEnter(to,from,next){},//离开守卫:通过路由规则,离开该组件时被调用beforeRouteLeave(to,from,next){}13.路由器的两种工作模式对于一个url来说,什么是hash值?——#及其后面的内容就是hash值。hash值不会包含在HTTP请求中,即:hash值不会带给服务器。hash模式:地址中永远带着#号,不美观。若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法。兼容性较好。history模式:地址干净,美观。兼容性和hash模式相比略差。应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题。(六)Vue3新特性一、创建Vue3.0工程1.使用vue-cli创建官方文档:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create##查看@vue/cli版本,确保@vue/cli版本在4.5.0以上vue--version##安装或者升级你的@vue/clinpminstall-g@vue/cli##创建vuecreatevue_test##启动cdvue_testnpmrunserve2.使用vite创建官方文档:https://v3.cn.vuejs.org/guide/installation.html#vitevite官网:https://vitejs.cn什么是vite?——新一代前端构建工具。优势如下:开发环境中,无需打包操作,可快速的冷启动。轻量快速的热重载(HMR)。真正的按需编译,不再等待整个应用编译完成。传统构建与vite构建对比图web.pngvite.png##创建工程npminitvite-app##进入工程目录cd##安装依赖npminstall##运行npmrundev二、常用CompositionAPI官方文档:https://v3.cn.vuejs.org/guide/composition-api-introduction.html1.拉开序幕的setup理解:Vue3.0中一个新的配置项,值为一个函数。setup是所有CompositionAPI(组合API)“表演的舞台”。组件中所用到的:数据、方法等等,均要配置在setup中。setup函数的两种返回值:若返回一个对象,则对象中的属性、方法,在模板中均可以直接使用。(重点关注!)若返回一个渲染函数:则可以自定义渲染内容。(了解)注意点:尽量不要与Vue2.x配置混用Vue2.x配置(data、methos、computed...)中可以访问到setup中的属性、方法。但在setup中不能访问到Vue2.x配置(data、methos、computed...)。如果有重名,setup优先。setup不能是一个async函数,因为返回值不再是return的对象,而是promise,模板看不到return对象中的属性。(后期也可以返回一个Promise实例,但需要Suspense和异步组件的配合)2.ref函数作用:定义一个响应式的数据语法:constxxx=ref(initValue)创建一个包含响应式数据的引用对象(reference对象,简称ref对象)。JS中操作数据:xxx.value模板中读取数据:不需要.value,直接:
    {{xxx}}
    备注:接收的数据可以是:基本类型、也可以是对象类型。基本类型的数据:响应式依然是靠Object.defineProperty()的get与set完成的。对象类型的数据:内部“求助”了Vue3.0中的一个新函数——reactive函数。3.reactive函数作用:定义一个对象类型的响应式数据(基本类型不要用它,要用ref函数)语法:const代理对象=reactive(源对象)接收一个对象(或数组),返回一个代理对象(Proxy的实例对象,简称proxy对象)reactive定义的响应式数据是“深层次的”。内部基于ES6的Proxy实现,通过代理对象操作源对象内部数据进行操作。==4.Vue3.0中的响应式原理==1.vue2.x的响应式实现原理:对象类型:通过Object.defineProperty()对属性的读取、修改进行拦截(数据劫持)。数组类型:通过重写更新数组的一系列方法来实现拦截。(对数组的变更方法进行了包裹)。Object.defineProperty(data,'count',{get(){},set(){}})存在问题:新增属性、删除属性,界面不会更新。直接通过下标修改数组,界面不会自动更新。2.Vue3.0的响应式实现原理:通过Proxy(代理):拦截对象中任意属性的变化,包括:属性值的读写、属性的添加、属性的删除等。通过Reflect(反射):对源对象的属性进行操作。MDN文档中描述的Proxy与Reflect:Proxy:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ProxyReflect:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflectletdata={name:'张三',age:18}newProxy(data,{//拦截读取属性值get(target,propName){returnReflect.get(target,prop)},//拦截设置属性值或添加新属性set(target,propName,value){returnReflect.set(target,prop,value)},//拦截删除属性deleteProperty(target,prop){returnReflect.deleteProperty(target,prop)}})proxy.name='tom'5.reactive对比ref从定义数据角度对比:ref用来定义:基本类型数据。reactive用来定义:对象(或数组)类型数据。备注:ref也可以用来定义对象(或数组)类型数据,它内部会自动通过reactive转为代理对象。从原理角度对比:ref通过Object.defineProperty()的get与set来实现响应式(数据劫持)。reactive通过使用Proxy来实现响应式(数据劫持),并通过Reflect操作源对象内部的数据。从使用角度对比:ref定义的数据:操作数据需要.value,读取数据时模板中直接读取不需要.value。reactive定义的数据:操作数据与读取数据:均不需要.value。6.==setup的两个注意点==setup执行的时机在beforeCreate之前执行一次,this是undefined。,因此在setup中不能使用,this.来找数据setup的参数props:值为对象,包含:组件外部传递过来,且组件内部声明接收了的属性。context:上下文对象attrs:值为对象,包含:组件外部传递过来,但没有在props配置中声明的属性,相当于this.$attrs。slots:收到的插槽内容,相当于this.$slots。在使用具名插槽时,要使用v-slots:xxx的方式命名emit:分发自定义事件的函数,相当于this.$emit。==7.计算属性与监视==1.computed函数与Vue2.x中computed配置功能一致写法import{computed}from'vue'setup(){...//计算属性——简写,(不考虑,计算属性被修改的情况)letfullName=computed(()=>{returnperson.firstName+'-'+person.lastName})//计算属性——完整letfullName=computed({get(){returnperson.firstName+'-'+person.lastName},set(value){constnameArr=value.split('-')person.firstName=nameArr[0]person.lastName=nameArr[1]}})}2.watch函数与Vue2.x中watch配置功能一致两个小“坑”:监视reactive定义的响应式数据时:oldValue无法正确获取、强制开启了深度监视(deep配置失效)。监视reactive定义的响应式数据中某个属性时:deep配置有效。//情况一:监视ref定义的响应式数据watch(sum,(newValue,oldValue)=>{console.log('sum变化了',newValue,oldValue)},{immediate:true})//情况二:监视多个ref定义的响应式数据watch([sum,msg],(newValue,oldValue)=>{console.log('sum或msg变化了',newValue,oldValue)})/*情况三:监视reactive定义的响应式数据中的全部属性若watch监视的是reactive定义的响应式数据,则无法正确获得oldValue!!若watch监视的是reactive定义的响应式数据,则强制开启了深度监视*/watch(person,(newValue,oldValue)=>{console.log('person变化了',newValue,oldValue)},{immediate:true,deep:false})//此处的deep配置不再奏效//情况四:监视reactive定义的响应式数据中的某个属性watch(()=>person.job,(newValue,oldValue)=>{console.log('person的job变化了',newValue,oldValue)},{immediate:true,deep:true})//情况五:监视reactive定义的响应式数据中的某些属性watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{console.log('person的job变化了',newValue,oldValue)},{immediate:true,deep:true})//特殊情况watch(()=>person.job,(newValue,oldValue)=>{console.log('person的job变化了',newValue,oldValue)},{deep:true})//此处由于监视的是reactive素定义的对象中的某个属性,所以deep配置有效3.watchEffect函数watch的套路是:既要指明监视的属性,也要指明监视的回调。watchEffect的套路是:不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性。watchEffect有点像computed:但computed注重的计算出来的值(回调函数的返回值),所以必须要写返回值。而watchEffect更注重的是过程(回调函数的函数体),所以不用写返回值。//watchEffect所指定的回调中用到的数据只要发生变化,则直接重新执行回调。watchEffect(()=>{constx1=sum.valueconstx2=person.ageconsole.log('watchEffect配置的回调执行了')})8.生命周期vue2生命周期.pngvue3生命周期.jpgVue3.0中可以继续使用Vue2.x中的生命周期钩子,但有有两个被更名:beforeDestroy改名为beforeUnmountdestroyed改名为unmountedVue3.0也提供了CompositionAPI形式的生命周期钩子,与Vue2.x中钩子对应关系如下:beforeCreate===>setup()created======>setup()beforeMount===>onBeforeMountmounted=======>onMountedbeforeUpdate===>onBeforeUpdateupdated=======>onUpdatedbeforeUnmount==>onBeforeUnmountunmounted=====>onUnmounted9.自定义hook函数什么是hook?——本质是一个函数,把setup函数中使用的CompositionAPI进行了封装。类似于vue2.x中的mixin。自定义hook的优势:复用代码,让setup中的逻辑更清楚易懂。10.toRef作用:创建一个ref对象,其value值指向另一个对象中的某个属性。直接使用ref,与使用toRef,可以理解为前者只是==复制==原对象中的某个属性来进行响应式,而toRef则是==引用==原对象中的某个属性来进行响应式语法:constname=toRef(person,'name')应用:要将响应式对象中的某个属性单独提供给外部使用时。扩展:toRefs与toRef功能一致,但可以批量创建多个ref对象,语法:toRefs(person)三、其它CompositionAPI1.shallowReactive与shallowRefshallowReactive:只处理对象最外层属性的响应式(浅响应式)。shallowRef:只处理基本数据类型的响应式,不进行对象的响应式处理。什么时候使用?如果有一个对象数据,结构比较深,但变化时只是外层属性变化===>shallowReactive。如果有一个对象数据,后续功能不会修改该对象中的属性,而是生新的对象来替换===>shallowRef。2.readonly与shallowReadonlyreadonly:让一个响应式数据变为只读的(深只读)。shallowReadonly:让一个响应式数据变为只读的(浅只读)。应用场景:不希望数据被修改时。3.toRaw与markRawtoRaw:作用:将一个由==reactive==生成的响应式对象转为普通对象。使用场景:用于读取响应式对象对应的普通对象,对这个普通对象的所有操作,不会引起页面更新。markRaw:作用:标记一个对象,使其永远不会再成为响应式对象。应用场景:有些值不应被设置为响应式的,例如复杂的第三方类库等。当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能。4.customRef作用:创建一个自定义的ref,并对其依赖项跟踪和更新触发进行显式控制。实现防抖效果:5.provide与inject[图片上传失败...(image-bb16a6-1659157988580)]作用:实现祖与后代组件间通信套路:父组件有一个provide选项来提供数据,后代组件有一个inject选项来开始使用这些数据具体写法:祖组件中:setup(){......letcar=reactive({name:'奔驰',price:'40万'})provide('car',car)......}后代组件中:setup(props,context){......constcar=inject('car')return{car}......}6.响应式数据的判断isRef:检查一个值是否为一个ref对象isReactive:检查一个对象是否是由reactive创建的响应式代理isReadonly:检查一个对象是否是由readonly创建的只读代理isProxy:检查一个对象是否是由reactive或者readonly方法创建的代理四、CompositionAPI的优势1.OptionsAPI存在的问题使用传统OptionsAPI中,新增或者修改一个需求,就需要分别在data,methods,computed里修改。OptionsAPI模式.gifOptionsAPI模式.gif2.CompositionAPI的优势我们可以更加优雅的组织我们的代码,函数。让相关功能的代码更加有序的组织在一起。CompositionAPI模式.gifCompositionAPI模式.gif五、新的组件1.Fragment在Vue2中:组件必须有一个根标签在Vue3中:组件可以没有根标签,内部会将多个标签包含在一个Fragment虚拟元素中好处:减少标签层级,减小内存占用2.Teleport什么是Teleport?——Teleport是一种能够将我们的组件html结构移动到指定位置的技术。

    我是一个弹窗

    关闭弹窗3.Suspense等待异步组件时渲染一些额外内容,让应用有更好的用户体验使用步骤:异步引入组件import{defineAsyncComponent}from'vue'constChild=defineAsyncComponent(()=>import('./components/Child.vue'))使用Suspense包裹组件,并配置好default与fallback

    加载中.....

    六、其他1.全局API的转移Vue2.x有许多全局API和配置。例如:注册全局组件、注册全局指令等。//注册全局组件Vue.component('MyButton',{data:()=>({count:0}),template:'Clicked{{count}}times.'})//注册全局指令Vue.directive('focus',{inserted:el=>el.focus()}Vue3.0中对这些API做出了调整:将全局的API,即:Vue.xxx调整到应用实例(app)上2.x全局API(Vue)3.x实例API(app)Vue.config.xxxxapp.config.xxxxVue.config.productionTip移除Vue.componentapp.componentVue.directiveapp.directiveVue.mixinapp.mixinVue.useapp.useVue.prototypeapp.config.globalProperties2.其他改变data选项应始终被声明为一个函数。过度类名的更改:Vue2.x写法.v-enter,.v-leave-to{opacity:0;}.v-leave,.v-enter-to{opacity:1;}Vue3.x写法.v-enter-from,.v-leave-to{opacity:0;}.v-leave-from,.v-enter-to{opacity:1;}移除keyCode按键编码作为v-on的修饰符,同时也不再支持config.keyCodes自定义按键事件移除v-on.native修饰符父组件中绑定事件子组件中声明自定义事件移除过滤器(filter)过滤器虽然这看起来很方便,但它需要一个自定义语法,打破大括号内表达式是“只是JavaScript”的假设,这不仅有学习成本,而且有实现成本!建议用方法调用或计算属性去替换过滤器。其他:https://v3.cn.vuejs.org/guide/migration/introduction.html#%E6%A6%82%E8%A7%88!