一、计算属性例子注意调用计算属性时不可以带括号那样调用的就是方法如以下调用fullName时不可funnName()div idroot姓input typetextv-modelfirstNamebr/br/名input typetextv-modellastNamebr/br/测试input typetextv-modelxbr/br/全名span{{fullName}}/spanbr/br/!--全名span{{fullName}}/spanbr/br///在调用fullName就是从内存里面取了全名span{{fullName}}/spanbr/br/全名span{{fullName}}/span--/divdata:{firstName:张,lastName:三,x:你好}computed:{fullName:{//get有什么作用当有人读取fullName时get就会被调用且返回值就作为fullName的值//get什么时候调用1.初次读取fullName时。2.所依赖的数据发生变化时。get(){console.log(get被调用了)// console.log(this) //此处的this是vmreturnthis.firstName-this.lastName},//set什么时候调用? 当fullName被修改时。set(value){console.log(set,value)constarrvalue.split(-)this.firstNamearr[0]this.lastNamearr[1]}}}简写二、vueX刷新vuex的值会回归初始化, 所以早做持久化1.安装vue默认vue3版本vuex默认vuex4版本vuex4只能在vue3中使用在vue2中能使用vuex3,那么不能默认下载最新的版本如果你出现了版本的问题只需要npm install vuex3 --save重新安装对应版本就好的importVuefromvueimportVuexfromvuexVue.use(Vuex)conststorenewVuex.Store({state:{token:},mutations:{updateToken(state,newToken){state.tokennewToken}}})exportdefaultstore2.在main.js中importstorefrom/storenewVue({router,store,//--------这里render:hh(App)}).$mount(#app)3.src/store/index.js注意大写importVuefromvueimportVuexfromvuexVue.use(Vuex)exportdefaultnewVuex.Store({state:{count:123},getters:{},mutations:{addCount(state,count){state.countcount}},actions:{},modules:{}})2.Store state2.1获取 store仓库1.Vue模板中获取this.$store2.js文件中获取import导入 store2.2获取状态state数据模板中{{$store.state.xxx}}组件逻辑中this.$store.state.xxxJS模块中 store.state.xxxcomputed:{token(){returnthis.$store.state.count}}每次都像这样一个个的提供计算属性, 太麻烦了,我们有没有简单的语法帮我们获取state中的值呢2.2通过辅助函数mapState 获取数据第一步导入mapState (mapState是vuex中的一个函数)import{mapState}fromvuex第二步采用数组形式引入state属性mapState([count])前两部代码类似于count(){returnthis.$store.state.count}第三步利用展开运算符将导出的状态映射给计算属性computed:{...mapState([count])}2.3state的持久化前面说到state是存在内存中刷新之后会回到初始值这里介绍一个vuex的插件包叫做vuex-persistedstate3.2.1版本(配合vue2使用, 默认最新版是配合vue3使用)下载此包到当前工程中npmi vuex-persistedstate3.2.1在src/store/index.js中, 导入并配置importVuefromvueimportVuexfromvueximportcreatePersistedStatefromvuex-persistedstateVue.use(Vuex)exportdefaultnewVuex.Store({state:{// 1. 用来存储登录成功之后得到的 tokentoken:},mutations:{// 2. 更新 token 的 mutation 函数updateToken(state,newToken){state.tokennewToken}},// 配置为 vuex 的插件plugins:[createPersistedState()]})3.Storemutationsmutations是一个对象对象中存放修改state的方法3.1组件中提交handle(){this.$store.commit(addCount,10)}小tips: 提交的参数只能是一个, 如果有多个参数要传, 可以传递一个对象this.$store.commit(addCount,{count:10})3.2通过辅助函数 mapMutations提交import{mapMutations}fromvuexmethods:{...mapMutations([addCount])}上面代码的含义是将mutations的方法导入了methods中和参没关系等价于methods:{// commit(方法名, 载荷参数)addCount(){this.$store.commit(addCount)}}3.3调用button clickaddCount值1/button4. Storeactionsactions则负责进行异步操作如: 一秒钟之后, 要给一个数 去修改state4.1 定义actionsmutations:{changeCount(state,newCount){state.countnewCount}}actions:{setAsyncCount(context,num){// 一秒后, 给一个数, 去修改 numsetTimeout((){context.commit(changeCount,num)},1000)}},4.2 组件中通过dispatch调用setAsyncCount(){this.$store.dispatch(setAsyncCount,666)}4.3辅助函数 -mapActionsimport{mapActions}fromvuexmethods:{...mapActions([changeCountAction])}上面代码的含义是将actions的方法导入了methods中等价于methods:{changeCountAction(n){this.$store.dispatch(changeCountAction,n)},}4.4调用button clickchangeCountAction(200)异步/button5.Storegetters除了state之外有时我们还需要从state中筛选出符合条件的一些数据这些数据是依赖state的此时会用到getters例如state中定义了list为1-10的数组state:{list:[1,2,3,4,5,6,7,8,9,10]}组件中需要显示所有大于5的数据正常的方式是需要list在组件中进行再一步的处理但是getters可以帮助我们实现它5.1定义gettersgetters:{// getters函数的第一个参数是 state// 必须要有返回值filterList:statestate.list.filter(itemitem5)}5.2原始方式-$storediv{{ $store.getters.filterList }}/div5.3辅助函数 - mapGetterscomputed:{...mapGetters([filterList])}5.4调用div{{filterList}}/div6.小结三、路由1.引入importrouterfrom./router/index...newVue({render:hh(App),router}).$mount(#app)importVuefromvueimportVueRouterfromvue-routerVue.use(VueRouter)constroutes[{path:/,redirect:/home},//重定向默认打开是/然后跳转到 /home{path:/home,name:Home,component:()import(../views/home.vue)},{path:*,component:()import(/views/error/error)}//放到最后]constrouternewVueRouter({mode:history,// 默认是hash history常用 会把路径中的#消除routes})exportdefaultrouter2.重定向{path:匹配路径,redirect:重定向到的路径},比如{path:/,redirect:/home}3.404routes:[...{path:*,component:NotFind}//最后一个]4.Vue路由-模式设置路由的路径看起来不自然, 有#能否切成真正路径形式?hash路由(默认) 例如: http://localhost:8080/#/homehistory路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持开发环境webpack给规避掉了history模式的问题)constrouternewVueRouter({mode:histroy,//默认是hashroutes:[]})5.两种路由跳转方式path 路径跳转 简易方便name 命名路由跳转 (适合 path 路径长的场景)5.1path路径跳转语法简易方便//简单写法this.$router.push(路由路径)//完整写法this.$router.push({path:路由路径})5.2path跳转方式特点适合 path 路径长的场景{name:路由名,path:/path/xxx,component:XXX}跳转this.$router.push({name:路由名})6.两种传参方式① path 路径跳转传参② name 命名路由跳转传参6.1path路径跳转传参query传参//简单写法this.$router.push(/路径?参数名1参数值1参数2参数值2)//完整写法this.$router.push({path:/路径,query:{参数名1:参数值1,参数名2:参数值2}})接受参数的方式依然是$route.query.参数名6.2path路径跳转传参动态路由传参//简单写法this.$router.push(/路径/参数值)//完整写法this.$router.push({path:/路径/参数值})接受参数的方式依然是$route.params.参数值注意path不能配合params使用7.嵌套多级路由在一级路由下配置children属性constrouternewVueRouter({routes:[{path:/parent,component:Parent,-----------------------------------------------------||children:[|//children中的配置项 跟一级路由中的配置项一模一样|{path:son1,component:xxxx.vue},|{path:son2,component:xxxx.vue}|]|-----------------------------------------------------}]})注意二级路由或者说是子路由路径不要/如上面的 son1、son2上面的路由路径是/parent/son1/parent/son2四、插槽官网讲的比较好黑马的视频 作用域插槽讲的也不错该页面假设你已经阅读过了组件基础。如果你还对组件不太了解推荐你先阅读它。在 2.6.0 中我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和slot-scopeelementUI中目前还在使用 这两个目前已被废弃但未被移除且仍在文档中的 attribute。新语法的由来可查阅这份 RFC。1.插槽内容组件navigation-linkurl/profileYour Profile/navigation-link插槽navigation-linkav-bind:hrefurlclassnav-linkslot/slot/anavigation-link最终渲染当组件渲染的时候 将会被替换为“Your Profile”navigation-linkurl/profileav-bind:hrefurlclassnav-linkYour Profile/anavigation-link2.后备内容组件没有向插槽传递数据是插槽有个默认的后备的不至于组件不会像插槽传数据solt嘿嘿嘿就知道你会不传递数据给我这就是我的后备内容slot3.具名插槽就是有名字的插槽上面使用插槽只使用了一个slotslot所以不需要指定名称而接下来的插槽是多个slotslot标签, 并且为slot标签起名字slot namesoltName如果不写默认名字为default所以组件再向插槽传递数据时就要对号入座组件在向插槽传递数据时使用template/template标签包裹数据在template标签中指定要为那个插槽传递数据template v-slot:soltName向名为soltName插槽传递数据template如果没有template标签包裹那么会将组件标签中的所有数据都会传递给名为defalut的插槽或者没命名的插槽例子插槽divclasscontainerheaderslotnameheader/slot/headermainslot/slot/mainfooterslotnamefooter/slot/footer/div组件:base-layouttemplatev-slot:headerh1Here might be a page title/h1/templatepA paragraph for the main content./ppAnd another one./p**上面两行等价于**templatev-slot:defaultpA paragraph for the main content./ppAnd another one./p/templatetemplatev-slot:footerpHeres some contact info/p/template/base-layout渲染:divclasscontainerheaderh1Here might be a page title/h1/headermainpA paragraph for the main content./ppAnd another one./p/mainfooterpHeres some contact info/p/footer/div4.作用域插槽自 2.6.0 起有所更新。已废弃的使用 slot-scope目前Element UI还有用到作用域插槽定义插槽的同时是可以传递数据的给插槽上可以绑定数据比如组件父给插槽子传递的是buttonbutton标签现在button需要用到父组件中的数据id这可怎么办所以在传递时将button和id一起传递给插槽或者理解为将button传递给插槽将id传递给button这就是作用域插槽组件父中的数据在插槽子中被使用id的作用域发生了变化所以叫作用域插槽。场景下图4.5.6是使用作用域插槽的步骤1.父传子表格中的数据2.利用默认插槽定制操作列3.操作列再删除时需要用到当前项的id属于组件内部数据4.向删除插槽绑定组件中的数据数据以添加属性的方式传递slot:iditem.idmsg测试文本/slot5.所有添加的属性都会被收集到一个对象中在组件使用时进行接收{id:3,msg:测试文本}6.在template通过#插槽名“obj”v-slot:插槽名“obj”接收默认插槽名为defaultobj是任意起个名字接收数据以属性的方式传递过来的数据对象第五点中的数据MyTabletemplate#defaultobj这里的obj父组件中传递过来的数据对象类似第5点中的数据buttonclickdel(obj.id)删除/button/template/Mytable4.5.6是使用作用域插槽的步骤