玛琳的笔记-php中文网

关注他

关注后可及时了解他的动态信息

课程笔记

所属章节课程：Vue路由（一）02

$route 当前组件路由$route.fullpath()$route.path()$route.query() $router 全局组件路由$router.path()$router.push({path,query})$router.go() topage(path:'',query:{})

2023-08-110个赞

所属章节课程：Vue路由（二）01

嵌套路由{    path:'/home',     name:'home',     compnonet:Home,     children:[                    {                        path:'order/:id',                         name:'order',                         compnont:Order                     },                                                {                        path:'cart',                         name:'cart',                         compnont:Cart                         },                    ] } 选中状态<a :class="{active:$route.path=='/home/order'}" href="/home/order">我的订单</a><a :class="{active:$route.path=='/home/cart'}" href="/home/cart">我的购物车</a> <style>.active{    color:red; }</style>

2023-08-110个赞

所属章节课程：Vue路由（二）02

<pre class="brush:js;toolbar:false">//隐藏图片 document.querySelector('.vb-a').style.display='none'</pre>别名 {    path:'/',     name:'home',    component:Home,     alias:['/a','/b','/c'] } 导航守卫=》前置，后置前置作用：跳转页面前，判断权限后跳转<pre class="brush:js;toolbar:false">router.beforeEach((to,from)=>{ });</pre> 后置作用：优化<pre class="brush:js;toolbar:false">router.afterEach((to,from)=>{ })</pre> 

2023-08-110个赞

所属章节课程：Vue路由（二）03

导航守卫<pre class="brush:js;toolbar:false">//路由页面设置meta信息，设置页面title const routes = {     path:'/home',     name:'home',     component:Home,     meta:{         title:'首页'     } } //路由设置后置守卫 router.beforeEach((to,from)=>{     //console.log(to.path) }) router.afterEach((to,from)=>{     //跳转前设置title     document.title = to.meta.title })</pre> 

2023-08-110个赞

所属章节课程：状态管理（上）01

Vuex 状态管理全局数据共享，用于多个页面级组件，不用反复请求，比如登录信息，购物车数量......

2023-08-110个赞

所属章节课程：状态管理（上）02

vuex <pre class="brush:js;toolbar:false">state 相当于单个组件内的 data getter 相当于单个组件内的 computed</pre> <pre class="brush:js;toolbar:false">// store/index.js下配置全局data数据 state:{     st_str:'hello',     st_num:100,     st_arr:[1,2,3],     st_obj:{name:'张三',age:18},     st_flag:false }</pre>创建后，所有组件内this.$store都可以访问到数据，而且是响应式。 

2023-08-110个赞

所属章节课程：状态管理（上）03

vuex 里面getters的方法<pre class="brush:js;toolbar:false">state:{     st_num:10, } //把state作为参数传入方法内 getters:{     st_num_pow(state){         return state.st_num * state.st_num     } }</pre>其他组件就使用vuex内getters的方法 <pre class="brush:js;toolbar:false">{{ $store.getters.st_num_pow }}</pre> 

2023-08-110个赞

所属章节课程：状态管理（下）01

vuex 里面的操作方法在mutations里添加<pre class="brush:js;toolbar:false">mutations{     mu_add(state,payload){         console.log(payload.str)         state.st_num+=payload.n     } }</pre>组件使用 commit方法调用,commit()方法只能传2个参数，第一个为state <pre class="brush:js;toolbar:false">$store.commit('mu_add')</pre>组件传参，只允许传2个参数，必须包含一个state,想要传多个，可以包装成对象形式<pre class="brush:js;toolbar:false">add(){     const payload = {n:5,str:'hello'}     this.$store.commit('mu_add',payload) }</pre> 

2023-08-120个赞

所属章节课程：状态管理（下）02

vuex  actions的异步操作actions要最先处理，所以得操作所有的数据，里面的第一个参数，得包含state,getters,commit,第一个参数用context(上下文) <pre class="brush:js;toolbar:false">actions:{     ac_add(context,payload){         context.commit('mu_add',payload)         comtext.getters.st_add_pow     } }</pre>为了简便，context参数，可以直接解构成{state,commit,getters} <pre class="brush:js;toolbar:false">actions:{     ac_add({state,commit,getters},padload){         commit('mu_add',payload)         getters.st_add_pow     } }</pre> 

2023-08-120个赞

所属章节课程：状态管理（下）03

模块化可以按功能创建多个js文件，默认导出state.js，getters.js mutations.js actions.js moudle.js<pre class="brush:js;toolbar:false">//state.js export default {     st_num : 100 }</pre>在index.js导入 <pre class="brush:js;toolbar:false">//index.js import {createStore} from 'vuex' import state from './state' import getters from './getters' import mutations from './mutations' import actions from './actions' import modules from './modules' export default createStore({     state,     getters,     mutations,     actions,     modules })</pre> 

2023-08-120个赞

所属章节课程：组合式API（一）02

组合式apisetup()在beforecreate()创建实例之前就调用了，所以获取不到this 同一个组件内，使用了setup()方法，还可以使用原有的结构，data(){},methods：{}，可以共存，但不建议，使用起来混乱

2023-08-120个赞

所属章节课程：组合式API（一）03

setup()方法里面的数据必须return出去，且必须是json格式的对象，界面才能获取到。不是响应式的。<pre class="brush:js;toolbar:false">setup(){     //let str = 'hello'     //let num = 100     //const func = ()=>{           console.log('hello')       }     return {      num:100,      str:'hello',      func          } }</pre>原来的data()方法，也是要return界面才能获取到。<pre class="brush:js;toolbar:false">data(){     return {     num:100,     str:'hello'     } }</pre> 

2023-08-120个赞

所属章节课程：组合式API（二）01

setup()的参数有两个:props,context<ul class=" list-paddingleft-2" style="list-style-type: disc;"><li>props为父组件传过来的属性的对象 </li><li>context内有 attrs,slots,emit方法</li></ul><ol class=" list-paddingleft-2" style="list-style-type: decimal;"><li>attrs为props中没有声明的其他属性对象,相当于this.$attrs</li><li>slots为插槽内容的对象，相当于this.$slots</li><li>emit为发送过来的自定义时间的函数，相当于this.$emit</li></ol>接收的参数context可以解构出来想用的参数<pre class="brush:js;toolbar:false">setup(props,{emit,attrs}){ }</pre> 

2023-08-120个赞