尚硅谷Vue2.0+Vue3.0全套教程视频笔记 + 代码 [P101-135]

时间：2022-08-22 18:00:01 p119举升传感器

视频链接：尚硅谷Vue2.0 Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili

P1-50：尚硅谷Vue2.0 Vue3.0全套教程视频笔记代码 [P001-050]_小白桶博客-CSDN博客

P51-100：尚硅谷Vue2.0 Vue3.0全套教程视频笔记代码 [P051-100]_小白桶博客-CSDN博客

P101-135：当前页面。

P101-110：

- P101 - vue-resource

课堂笔记：

(1)安装说明:npm i vue-resource

(2)这个库没有官方维护，转移的团队维护频率低。只有了解了，最好用。axios。

- P102 - 默认插槽

（总结在P104）本节部分代码：

App.vue页面：

Category.vue页面：

- P103 - 具名插槽

（总结在P104）本节部分代码：

App.vue页面：

Category.vue页面：

- P104 - 作用域插槽

老师总结：

插槽：

1.作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 ===>子组件。

2.分类：默认插槽、具名插槽、作用域插槽。

3.使用方式：

（1）默认插槽：

父组件中：
    
        html结构1
    
子组件中：

（2）具名插槽：

父组件中：
    
        
    
    
        
    
子组件中：

（3）作用域插槽：

①理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

②具体编码：

父组件中：
    
        
    
    
        
    
子组件中：

本节部分代码：

App.vue页面：

Category.vue页面：

- P105 - Vuex简介

课堂笔记：

（1）老师的课件图：

老师总结：

vuex是什么：

1.概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中对各组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

2.Github地址：GitHub - vuejs/vuex: 🗃️ Centralized State Management for Vue.js.

什么时候用Vuex：

1.多个组件依赖于同一状态

2.来自不同组件的行为需要变更同一状态

- P106 - 求和案例_纯vue版

课堂笔记：

（1）关于select的option值问题：

为什么value前面加冒号有效？不加就是字符串。加上冒号之后，引号里的内容都会当成JS表达式去分析，就变成了数字。

最好的做法还是在v-model中加number修饰符。但是上面那个方法也要清楚。

本节部分代码：

Count.vue页面：

- P107 - Vuex工作原理图

课堂笔记：

（1）图：

（2）图总流程简述：

①State：把数据交给Vuex其实就是把数据交给Vuex中的state。这个state的本质就是Object对象（本节的例子是{ ... sum:0 }）。

②Vue Components：把数据递给Vue组件。在组件中调用API，为dispatch。

dispatch在调用的时候需要传两个参数，分别是动作类型和值（如dispatch( 'jia',2 )）。

③Actions：本质也是一个Object对象。

在调用了dispatch之后，Actions里面一定会有一个key，和该动作对应（如{ ... jia:function }）。

这个函数一旦被调用，就会收到dispatch传的值（如2）。

在这个对应的函数中，自己调用commit（如commit( 'jia',2 )）。提交后继续往下走。

④Mutations：数据类型也是一个Object对象。

其中也会有很多key value，但是肯定会有之前传入的动作（如{ ... jia:function }）。

这个函数会拿到两个东西，一个是整个state，还有一个是传过来的值（如2）。只要函数中写了“ state.sum += 2 ”，那么Mutate就会自动执行。

⑤再到State：最后State中的值变了（如{ ... sum:2}）。通过Render重新渲染传给组件。

（3）图其它解析：

①为什么需要Actions，而不是直接传给Mutations来Mutate？

Actions对接Backend API（后端接口），它是用来执行异步操作的。

②如果已经有了数据的话，官方是允许Vue Components直接Commit给Mutations的。

③Devtools是vuex官方开发的浏览器插件。

④图中没画出来的是，Vuex中的Actions、Mutations、State都需要经过store管理。dispatch、commit都是由store提供的。

（4）老师的比喻，助理解：

Vue Components是客人，Actions是服务员，Mutations是后厨团队，State就是最终上的菜。

客人张嘴说话就是dispatch，客人点单蛋炒饭一份，就相当于dispatch( 'jia',2 )。

服务员收到后，将具体的单交给后厨团队就是commit。

后厨收到菜单后做菜就是Mutate。

最后做出菜Statue，给客人上菜。

如果客人跟后厨很熟（不需要服务员的菜单Backend API调用数据），也可以直接跳过服务员Actions，跟后厨讲一下，上菜就好了。

- P108 - 搭建Vuex环境

课堂笔记：

（1）Vuex安装指令：npm i vuex@3

（如果直接npm i vuex，那么安装的是vuex4，只能在Vue3中使用）

老师总结：

搭建vuex环境

1.创建文件：src/store/index.js

// 引入Vue核心库
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 应用Vuex插件
Vue.use(Vuex)

// 准备actions对象——用于响应组件中的动作
const actions = {}
// 准备mutations对象——用于操作数据（state）
const mutations = {}
// 准备state对象——用于存储数据
const state = {}

// 创建并暴露store
export default new Vuex.Store({
    actions,mutations,state
})

2.在main.js中创建vm时传入store配置项

......
// 引入store
import store from './store'
......

// 创建vm
new Vue({
    el:'#app',
    render: h => h(App),
    store
})

- P109 - 求和案例_vuex版

无

本节部分代码：

store.js页面：

// 该文件用于创建Vuex中最为核心的store
// 引入Vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 应用Vuex插件
Vue.use(Vuex)

// 准备actions——用于响应组件中的动作
const actions = {
    /* jia(context,value){
        // console.log('actions中的jia被调用了',context,value)
        context.commit('JIA',value)
    },
    jian(context,value){
        // console.log('actions中的jian被调用了',context,value)
        context.commit('JIAN',value)
    }, */
    jiaOdd(context,value){
        if(context.state.sum % 2){
            context.commit('JIA',value)
        }
    },
    jiaWait(context,value){
        setTimeout(() =>{
            context.commit('JIA',value)
        },500)
    },
}
// 准备mutations——用于操作数据（state）
const mutations = {
    JIA(state,value){
        // console.log('mutations中的JIA被调用了',state,value)
        state.sum += value
    },
    JIAN(state,value){
        // console.log('mutations中的JIAN被调用了',state,value)
        state.sum -= value
    }

}
// 准备state——用于存储数据
const state = {
    sum:0 //当前的和
}

// 创建并暴露store
export default new Vuex.Store({
    actions,mutations,state
})

Count.vue页面：

- P110 - vuex开发者工具的使用

课堂笔记：

（1）vue控制台切换：

老师视频里是这样的：

我这里的更新了，和老师的不一样，直接选这个：

P111-120：

- P111 - getters配置项

课堂笔记：

（1）state和getters的关系就像data和computed的关系。

（2）不是说数据处理必须要用这个，在数据处理逻辑复杂，且需要复用的情况下推荐使用。

老师总结：

1.概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。

2.在store.js中追加getters配置：

......
const getters = {
    bigSum(state){
        return state.sum*10
    }
}
......
// 创建并暴露store
export default new Vuex.Store({
    actions,mutations,state,getters
})

3.组件中读取数据：$store.getters.bigSum

- P112 - mapState和mapGetters

课堂笔记：

（1）ES6中的 ... 为扩展运算符，能将 [ 数组 ] 或对象转换为逗号分隔的参数序列。

老师总结：

四个map方法的使用（前两个）：

1.mapState方法：用于帮助我们映射state中的数据为计算属性

computed:{    
    // 借助mapState生成计算属性，从state中读取数据。（对象写法）
    ...mapState({sum:'sum',school:'school',subject:'subject'}),
    
    // 借助mapState生成计算属性，从state中读取数据。（数组写法）
    ...mapState(['sum','school','subject']),
},

2.mapGetters方法：用于帮助我们映射getters中的数据为计算属性

computed:{    
    // 借助mapGetters生成计算属性，从getters中读取数据。（对象写法）
    ...mapGetters({bigSum:'bigSum'}),
    
    // 借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
    ...mapGetters(['bigSum'])
},

（代码在P116）

- P113 - mapActions与mapMutations

老师总结：

四个map方法的使用（后两个）：

3.mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数。

methods：{ 
    // 借助mapActions生成对应的方法，方法中会调用commit去练习mutations（对象写法）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),

    // 借助mapActions生成对应的方法，方法中会调用commit去练习mutations（数组写法）
    ...mapActions(['jiaOdd','jiaWait']),
}

4.mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数。

methods：{ 
    // 借助mapMutations生成对应的方法，方法中会调用commit去练习mutations（对象写法）
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),

    // 借助mapMutations生成对应的方法，方法中会调用commit去练习mutations（数组写法）
    ...mapMutations(['JIA','JIAN']),
}

备注：mapActions与mapMutations使用时，若需要传递参数，需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

（代码在P116）

- P114 - 多组件共享数据

无

（代码在P116）

- P115 - vuex模块化+namespace_1

无

（代码在P116）

- P116 - vuex模块化+namespace_2

课堂笔记：

（1）老师的小语录链接：

https://api.uixsj.cn/hitokoto/get?type=social

老师总结：

模块化+命名空间

1.目的：让代码更好维护，让多种数据分析更加明确。

2.修改store.js

const countAbout = {
    namespaced:true,//开启命名空间
    state:{x:1},
    mutations:{......},
    actions:{......},
    getters:{
        bigSum(state){
            return state.sum*10
        }
    }
}

const personAbout = {
    namespaced:true,//开启命名空间
    state:{......},
    mutations:{......},
    actions:{......}
}

const store = new Vuex.Store({
    modules:{
        countAbout,
        personAbout
    }
    
})

3.开启命名空间后，组件中读取state数据：

//方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取
...mapState('countAbout',['sum','school','subject']),

4.开启命名空间后，组件中读取getters数据：

//方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取
...mapGetters('countAbout',['bigSum'])

5.开启命名空间后，组件中调用dispatch：

//方式一：自己直接读取
this.$store.dispatch('personAbout/addPersonWang',personObj)
//方式二：借助mapGetters读取
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),

6.开启命名空间后，组件中调用commit：

//方式一：自己直接读取
this.$store.commit('personAbout/ADD_PERSON',personObj)
//方式二：借助mapGetters读取
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

本节部分代码（求和案例_vuex升级版）：

store/index.js页面：

// 该文件用于创建Vuex中最为核心的store
// 引入Vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
import countOptions from './count'
import personOptions from './person'
// 应用Vuex插件
Vue.use(Vuex)

// 创建并暴露store
export default new Vuex.Store({
    modules:{
        countAbout:countOptions,
        personAbout:personOptions
    }
    
})

store/count.js页面:

// 求和相关的配置
export default {
    namespaced:true,
    actions:{
        jiaOdd(context,value){
            if(context.state.sum % 2){
                context.commit('JIA',value)
            }
        },
        jiaWait(context,value){
            setTimeout(() =>{
                context.commit('JIA',value)
            },500)
        },
    },
    mutations:{
        JIA(state,value){
            // console.log('mutations中的JIA被调用了',state,value)
            state.sum += value
        },
        JIAN(state,value){
            // console.log('mutations中的JIAN被调用了',state,value)
            state.sum -= value
        },
    },
    state:{
        sum:0, //当前的和
        school:'尚硅谷',
        subject:'前端',
    },
    getters:{
        bigSum(state){
            return state.sum*10
        }
    },
}

store/person.js页面：

import axios from "axios"
import { nanoid } from "nanoid"

// 人员管理相关的配置
export default {
    namespaced:true,
    actions:{
        addPersonWang(context,value){
            if(value.name.indexOf('王') === 0){
                context.commit('ADD_PERSON',value)
            }else{
                alert('添加的人必须姓王')
            }
        },
        addPersonServer(context){
           axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
               response => {
                    context.commit('ADD_PERSON',{id:nanoid(),name:response.data})
               },
               error => {
                   alert(error.message)
               }
           ) 
        }
    },
    mutations:{
        ADD_PERSON(state,value){
            state.personList.unshift(value)
        }
    },
    state:{
        personList:[
            {id:'001',name:'张三'}
        ]
    },
    getters:{
        firstPersonName(state){
            return state.personList[0].name
        }
    },
}

Count.vue页面：

Person.vue页面：

- P117 - 路由的简介

课堂笔记：

（1）老师课件截图：

老师总结：

1.vue-router的理解：

vue的一个插件库，专门用来实现SPA应用。

2.对SPA应用的理解：

（1）单页Web应用（single page web application, SPA）。

（2）整个应用只有一个完整的页面。

（3）点击页面中的导航链接不会刷新页面，只会做页面的局部更新。

（4）数据需要通过 ajax 请求获取。

3.路由的理解：

（1）什么是路由？

① 一个路由就是一组映射关系（key - value）

② key 为路径, value 可能是 function 或 componen

（2）路由分类

① 后端路由：

1）理解：value 是 function, 用于处理客户端提交的请求。

2）工作过程：服务器接收到一个请求时, 根据请求路径找到匹配的函数来处理请求, 返回响应数据。

② 前端路由：

1）理解：value 是 component，用于展示页面内容。

2）工作过程：当浏览器的路径改变时, 对应的组件就会显示。

（important！从这节开始，路由系列一般不贴代码，老师的笔记里做法部分的代码写的很全，再贴代码就有点冗余了）

- P118 - 路由基本使用

课堂笔记：

（1）Vuex安装指令：npm i vue-router@3

（如果直接npm i vue-router，那么安装的是vue-router4，只能在Vue3中使用）

（2）router-link标签最终转换到页面上就是a标签。

老师总结：

路由

理解：一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。

前端路由：key是路径，value是组件。

1.基本使用：

（1）安装vue-router，命令：npm i vue-router

（2）应用插件：Vue.use(VueRouter)

（3）编写router配置项：

// 引入VueRouter
import VueRouter from "vue-router";
// 引入路由组件
import About from '../components/About'
import Home from '../components/Home'

// 创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
})
// 暴露router
expot default router

（4）实现切换（active-class可配置高亮样式）

About

（5）指定展示位置

- P119 - 几个注意点

老师总结：

2.几个注意点

（1）路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。

（2）通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。

（3）每个组件都有自己的$route属性，里面存储着自己的路由信息。

（4）整个应用中只有一个router，可以通过组件的$router属性获取到。

- P120 - 嵌套路由

老师总结：

3.多级路由

（1）配置路由规则，使用children配置项：

routes:[
    {
        path:'/about',
        component:About
    },
    {
        path:'/home',
        component:Home,
        children:[ //通过children配置子级路由
            {
                path:'news', //此处一定不要写‘/news’
                component:News,
            },
            {
                path:'message', //此处一定不要写‘/message’
                component:Message,
            }
        ]
    }
]

（2）跳转（要写完整路径）：

News

P121-130：

- P121 - 路由的query参数

课堂笔记：

（老师写了，但是视频没放出来，也没找到这个课件，所以我自己总结了一下）

路由的query参数

（1）作用：跳转的时候传递参数

（2）如何使用：

①跳转路由并携带query参数，有两种写法：


{
    
      {m.title}}



    {
    
      {m.title}}

②用$route.query接收参数：

消息编号：{
    
      {$route.query.id}}
消息标题：{
    
      {$route.query.title}}

- P122 - 命名路由

老师总结：

5.命名路由

（1）作用：可以简化路由的跳转。

（2）如何使用：

①给路由命名：

{
    path:'/demo',
    component:Demo,
    children:[
        {
            path:'test',
            component:Test,
            children:[
                {
                    name:'hello',
                    path:'detail',
                    component:Detail,
                }
            ]
        }
    ]
}

②简化跳转：


跳转


跳转


跳转

- P123 - 路由的params参数

老师总结：

6.路由的params参数

（1）配置路由，声明接收params参数

{
    path:'/home',
    component:Home,
    children:[
        {
            path:'news',
            component:News,
        },
        {
            path:'message',
            component:Message,
            children:[
                {
                    name:'xiangqing',
                    path:'detail/:id/:title', //使用占位符声明接收params参数
                    component:Detail,
                }
            ]
        }
    ]
}

（2）传递参数


{
    
      {m.title}}



    {
    
      {m.title}}

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

（3）接收参数

$route.params.id
$route.params.title

- P124 - 路由的props配置

老师总结：

7.路由的props配置

作用：让路由组件更方便的收到参数

{
    name:'xiangqing',
    path:'detail',
    component:Detail,

    // props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件
    // props:{a:1,b:'hello'}

    // props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件
    // props:true

    // props的第三种写法，值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
    props({$route}){
        return {
            id:$route.query.id,
            title:$route.query.title
        }
    }
}

- P125 - router-link的replace属性

老师总结：

8. router-link的replace属性

（1）作用：控制路由跳转时操作浏览器历史记录的模式

（2）浏览器的历史记录有两种写入方式，分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push。

（3）如何开启replace模式：

News

- P126 - 编程式路由导航

老师总结：

9.编程式路由导航

（1）作用：不借助router-link实现路由跳转，让路由跳转更加灵活

（2）具体编码：

//$routere的两个API
this.$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(3) //可前进也可后退

- P127 - 缓存路由组件

老师总结：

10.缓存路由组件

（1）作用：让不展示的路由组件保持挂载，不被销毁。

（2）具体编码：

- P128 - 两个新的生命周期钩子

课堂笔记：

（1）$nextTick（真实DOM出来之后再回调，回顾P90）和activated、deactivated是生命周期中不在图中的剩下三个。

老师总结：

11.两个新的生命周期钩子

（1）作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。

（2）具体名字：

① activated 路由组件被激活时触发。

② deactivated 路由组件失活时触发。

- P129 - 全局前置_路由守卫

无（老师总结和P130整合在一起）

- P130 - 全局后置_路由守卫

课堂笔记：

（1）$route中的meta：路由元信息。

老师总结：

12.路由守卫

（1）作用：对路由进行权限控制

（2）分类：全局守卫、独享守卫、组件内守卫

（3）全局守卫：

// 全局前置路由守卫——初始化时执行、每次路由切换前被调用
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'   
    }
    
})

P131-135：

- P131 - 独享路由守卫

老师总结：

（4）独享守卫：

beforeEnter:(to, from, next) => {
    console.log('beforeEnter',to, from)
    if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
        if(localStorage.getItem('school')==='atguigu'){
            next()
        }else{
            alert('学校名不对，没有查看权限！')
        }
    }else{
        next()
    }
}

- P132 - 组件内路由守卫

老师总结：

（5）组件内守卫：

// 进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next){
},
// 离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next){
},

- P133 - history模式与hash模式

课堂笔记：

（1）哈希值（如 http://localhost:8080/#/home/message 中的 #/home/message 就是哈希值）最大的特点就是，不会随着http请求发送给服务器。

（2）打包指令：npm run build

（生成的东西需要放到服务器中部署才能用。）

（3）课中的nodeJS的express（仅了解不需要掌握），可以看这个：NodeJS之Express基础_不起眼的皮皮虾的博客-CSDN博客_express nodejs

（4）中间件 connect-history-api-fallback

安装指令：npm i connect-history-api-fallback

后端引入（必须得在静态资源前引入）调用：

const history = require('npm i connect-history-api-fallback');
......
app.use(history())

（5）nginx也可以实现，起到中间代理作用（仅了解）。

老师总结：

13.路由器的两种工作模式

（1）对于一个url来说，什么是hash值？——#及其后面的内容就是hash值。

（2）hash值不会包含在HTTP请求中，即：hash值不会带给服务器。

（3）hash模式：

①地址中永远带着#号，不美观。

②若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。

③兼容性较好。

（4）history模式：

①地址干净，美观。

②兼容性和hash模式相比略差。

③应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

- P134 - element-ui基本使用

课堂笔记：

（1）安装指令：npm i element-ui -S

老师总结：

Vue UI组件库

1.移动端常用 UI 组件库

（1）Vant Vant 3 - Mobile UI Components built on Vue

（2）Cube UI cube-ui Document

（3）Mint UI Mint UI

2.PC 端常用 UI 组件库

（1）Element UI Element - The world's most popular Vue UI framework

（2）IView UI iView / View Design 一套企业级 UI 组件库和前端解决方案

本节部分代码：

main.js页面：

// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'

// 完整引入
// 引入ElementUI组件库
import ElementUI from 'element-ui'
// 引入ElementUI全部样式
import 'element-ui/lib/theme-chalk/index.css'
// 关闭Vue的生产提示
Vue.config.productionTip = false
// 应用ElementUI
Vue.use(ElementUI)

// 创建vm
new Vue({
    el:'#app',
    render: h => h(App),
})

- P135 - element-ui按需引入

课堂笔记：

（1）按需引入指令：npm install babel-plugin-component -D

（npm xxx -D 代表着安装开发依赖。）

（2）报错解决：

如果报 not found ’xxx' 的错，那就在指令中输入： npm i xxx

如果是跟老师一样的问题，那需要在babel.config.js页面的presets配置项中，将原先的 es2015 修改成 @babel/preset-env

~ ❀ ✿ ~ Vue2.0 完结撒花 ~ ✿ ❀ ~

——————————————————————————————————————

——————————————原创不易，转载请声明——————————————

锐单商城拥有海量元器件数据手册、IC替代型号，打造电子元器件IC百科大全！

尚硅谷Vue2.0+Vue3.0全套教程视频笔记 + 代码 [P101-135]

P101-110：

- P101 - vue-resource

- P102 - 默认插槽

{ {title}}分类

- P103 - 具名插槽

欢迎观看电影

{ {title}}分类

- P104 - 作用域插槽

{ {g}}

{ {g}}

{ {title}}分类

- P105 - Vuex简介

- P106 - 求和案例_纯vue版

当前求和为：{ {sum}}

- P107 - Vuex工作原理图

- P108 - 搭建Vuex环境

- P109 - 求和案例_vuex版

当前求和为：{ {$store.state.sum}}

- P110 - vuex开发者工具的使用

P111-120：

- P111 - getters配置项

- P112 - mapState和mapGetters

- P113 - mapActions与mapMutations

- P114 - 多组件共享数据

- P115 - vuex模块化+namespace_1

- P116 - vuex模块化+namespace_2

当前求和为：{ {sum}}

当前求和放大10倍为：{ {bigSum}}

我在{ {school}},学习{ {subject}}

Person组件的总人数是：{ {personList.length}}

人员列表

Count组件求和为:{ {sum}}

列表中第一个人的名字是：{ {firstPersonName}}

- P117 - 路由的简介

- P118 - 路由基本使用

- P119 - 几个注意点

- P120 - 嵌套路由

P121-130：

- P121 - 路由的query参数

- P122 - 命名路由

- P123 - 路由的params参数

- P124 - 路由的props配置

- P125 - router-link的replace属性

- P126 - 编程式路由导航

- P127 - 缓存路由组件

- P128 - 两个新的生命周期钩子

- P129 - 全局前置_路由守卫

- P130 - 全局后置_路由守卫

P131-135：

- P131 - 独享路由守卫

- P132 - 组件内路由守卫

- P133 - history模式与hash模式

- P134 - element-ui基本使用

- P135 - element-ui按需引入

相关文章