Vue2入门学习笔记

Vue2入门必备！
⭐关注我查看更多配套笔记

学习视频：https://www.bilibili.com/video/BV1Zy4y1K7SH/

【尚硅谷Vue全家桶】

本博客是对该视频内容的整理以及加入自己的理解 想全面学习的推荐大家去看原视频

1.Vue动画

自己使用 Css 也能实现

<!-- 使用标签transition包裹 -->
// apper属性可以让动画加载时出现 简写 apper 属性直接添加
<transition name="hello" :apper="true" apper>
    <div>
        <button @click="isShow = !isShow">
            显示/隐藏
        </button>
        <h1 v-show="isShow">
            我是动画元素
        </h1>
    </div>
</transition>


<!-- 必须使用 vue 规定的名称识别 -->
<style>
    
    /* .之后的名称与name一致 不加name默认为v */
    .hello-enter-active {
        animation: 动画名 持续时间;
    }
    .hello-leave-active {
        animation: 动画名 持续时间 everse;
    }
    
    
    .v-enter-active {
        animation: 动画名 持续时间;
    }
    .v-leave-active {
        animation: 动画名 持续时间 everse;
    }
    
    @keyfarm 动画名{
        ...
    }
</style>

2.Vue过渡

<!-- 使用标签transition包裹 -->
// apper属性可以让动画加载时出现 简写 apper 属性直接添加
<transition name="hello" :apper="true" apper>
    <div>
        <button @click="isShow = !isShow">
            显示/隐藏
        </button>
        <h1 v-show="isShow">
            我是动画元素
        </h1>
    </div>
</transition>


<!-- 必须使用 vue 规定的名称识别 -->
<style>
    
    /* .之后的名称与name一致 不加name默认为v */
    /* 给所需动画添加过度属性 */
    h1 {
        transition: all 0.5s linear;
    }

    /* 初始效果 离开的终点 */
    .v-enter,.v-leave-to {
        animation: 动画名 持续时间;
    }
    
    /* 过渡效果中 */
    .v-enter-active,.v-leave-active {
        transition: all 0.5s linear;
    }    
    
    /* 结束效果 结束的起点 */
    .v-leave-enter-to,.v-leave {
        animation: 动画名 持续时间 everse;
    }
    
    @keyfarm 动画名{
        ...
    }
</style>

3.多个元素过渡

<!-- 使用标签transition包裹 -->
// apper属性可以让动画加载时出现 简写 apper 属性直接添加
<button @click="isShow = !isShow">
    显示/隐藏
</button>
<!-- 多个动画添加需要使用transition-group -->
<transition-group group name="hello" apper>
    <div>
        <h1 v-show="isShow">
            我是动画元素
        </h1>
        <h1 v-show="isShow">
            我是动画元素
        </h1>
    </div>
</transition-group>


<!-- 必须使用 vue 规定的名称识别 -->
<style>
    
    /* .之后的名称与name一致 不加name默认为v */
    /* 给所需动画添加过度属性 */
    h1 {
        transition: all 0.5s linear;
    }

    /* 初始效果 离开的终点 */
    .v-enter,.v-leave-to {
        animation: 动画名 持续时间;
    }
    
    /* 过渡效果中 */
    .v-enter-active,.v-leave-active {
        transition: all 0.5s linear;
    }    
    
    /* 结束效果 结束的起点 */
    .v-leave-enter-to,.v-leave {
        animation: 动画名 持续时间 everse;
    }
    
    @keyfarm 动画名{
        ...
    }
</style>

4.超级好用的动画库

animate.css

<transition
      enter-active-class="animate__fadeIn"
      leave-active-class="animate__fadeOut"
    >
      <h1 v-show="visible" class="animate__animated">Animate.css</h1>
    </transition>

// 使用方法
// name="animate__animated animate__bounce" 在 transition中添加该属性

// 在官网找到喜欢的属性配置 复制添加到
// enter-active-class="" leave-active-class=""

// npm安装
// npm install animate.css

// 引用 animate.css 动画库
import animate from 'animate.css'
Vue.use(animate)

官网：Animate.css | A cross-browser library of CSS animations.

5.Http请求代理

// 对 xhr 进行封装
// xhr new XMLHttpRequest() xhr.open() xhr.send()
// jQuery $.get $.post
// axios

// 与 xhr平级
// fetch

Vue 项目中推荐使用 axios

解决跨域问题

1.CORS

2.Jsonp script src 只能使用 get

3.代理服务器 代理服务器默认端口号 8080

1.-- nginx

2.-- vue-cli

5.1简易代理

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
    // 在配置文件中添加以下配置 开启代理服务器 代理服务器开启在 8080
  devServer: {
      // 需要转发给谁
    proxy:'http://后端服务器地址',
  }
})

/*
注意
8080端口服务器 的根目录为 public 其中有的东西直接回返回
不会转发请求
*/

// 在axios中请求
axios.get('http://localhost:8080/后端路由地址').then(
    response =>{
        
    },
    errror =>{
        
    },
)

5.2完美代理

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
    // 在配置文件中添加以下配置 开启代理服务器 代理服务器开启在 8080
  devServer: {
     proxy:{
         // 配置 转发服务器的前缀
         '/api':{
             // 转发地址
             target:'http://后端服务器地址',
             //加入此配置项 转发地址为 /api/student 替换为 /student 不然会请求原路径
             pathRewrite:{
                 '^/api':''
             },
             ws:true, // 用于支持 websocket 
             changeOrigin:true, // 说谎(伪装请求地址) 默认为 true
         },
         // 可配置多个
         '/cas':{
             target:'http://后端服务器地址',
             pathRewrite:{
                 '^/cas':''
             },
             ws:true,
             changeOrigin:true,
         }
     }
  }
})

axios.get('http://localhost:8080/配置的前缀/后端路由地址')

6.静态组件

import '....' // vue 会进行严格的语法检查 放在assat进行引入
// 推荐放入 public 文件夹 在 index.html 中使用 link 引入 bootstrap.. 等

ES6 合并对象语法 Obj = {...对象1名称,...对象2名称}

7.vue-resource vue的插件库

对 xhr 进行封装

Vue.use(vueResource) 在main.js中进行全局配置

在 vm 中会出现 $http

使用 this.$http 代替 axios api完全一致 vue1.0广泛使用

8.slot 插槽

8.1默认插槽

<!-- 正常自闭和组件 / 正常组件 -->
<Student/>
<Student></Student>

<!-- 相同组件需要展示不同的元素时使用 -->
<!-- 默认插槽写法 -->
<!-- 父组件 -->
<Student>
    <!-- 需要插入的内容 -->
    <img src="">
</Student>

<!-- 子组件 -->
<div>
    <!-- 父组件传入插槽的内容 -->
    <slot>使用者没有传入插槽 会将我展示</slot>
</div>

<!-- style 可以在 父/子 组件书写 -->

8.2(具名插槽)多个插槽

<!-- 多个插槽写法 -->
<!-- 父组件 -->
<Student>
    <!-- 需要插入的内容 -->
    <img src="" slot="slot名称1">
    <vido src="" slot="slot名称2">
        
    <!-- template写法 template标签 不影响结构-->
    <!-- slot:slot名称1 为 vue2.7 更新的写法 只能在 template标签中使用 -->    
    <template slot="slot名称1" slot:slot名称1>
        <h1>我是h1</h1>
        <div>我是div</viv>
    </template>
</Student>

<!-- 子组件 -->
<div>
    <!-- 父组件传入插槽的内容 -->
    <slot name="slot名称1">使用者没有传入插槽 会将我展示</slot>
    <slot name="slot名称2">使用者没有传入插槽 会将我展示</slot>
</div>

<!-- style 可以在 父/子 组件书写 -->

8.3作用域插槽

<!-- 作用域插槽写法 -->
<!-- 父组件 -->
<Student>
    <!-- 作用域必须使用 template 标签 传参 作用域 -->
    <template scop="Obj">
        <!-- games msg 在Obj中 -->
        <h1>{{Obj.games}}</h1>
        <h1>{{Obj.msg}}</h1>
    </template>
</Student>

<!-- 子组件 -->
<div>
    <!-- 子组件插槽中给父组件传参 -->
    <slot :games="games" msg="这里是msg信息">使用者没有传入插槽 会将我展示</slot>
</div>

<!-- style 可以在 父/子 组件书写 -->

9.Vuex

多组件共享数据 状态 = 数据

多个组件依赖于同一个状态
来自不同组件的行为需要修改同一状态

1.npm i vuex

2.import Vuex from 'vuex' // 在 index.js 中 引入
// vue2 -> vuex3
// vue3 -> vuex4
3.Vue.use(Vuex)

Vue({
    store:"hello",
})

// 在 vm 中 出现 $store 保存传入的数据

在components同级文件夹下添加 store 文件夹

添加 index.js

// 该文件用于创建 Vuex 中最为核心的store

// 引入 
import Vue from 'vue'
import Vuex from 'vuex'
// 应用Vuex插件
Vue.use(Vuex)
// 准备 actions
const actions = {
    // 需要dispatch的函数
    "函数名"(context,value){
        console.log('actions 中的函数被调用了',context,value); 
        
        // 分配给 其他 dispatch 分段处理 便于维护代码
        context.dispatch("函数2",value);
        
        context.commit("函数名(使用大写与actions进行区分)",value);
    }
}
// 准备 mutations 操作 data
// 开发者工具 检测 mutations
const mutations = {
    "大写函数名"(state,value){
        state.value += value;
    }
}
// 准备 state 用于存储数据 全局 data
const state = {
    // 准备数据
    "value":0,
    // 改变后会替代 vc 里的 data
}

// 实现全局的 计算属性 computed
const getters = {
    // 对 state 进行加工
    bigSum(state){
        return state.sum*10;
    }
}

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

main.js

import store from './store/index.js'
// 配置项中添加store
new Vue({
    store
})

js 执行 import 全部 import 会被提升到最高层

vue 规定必须先 ues(vuex) 再创建 store 实例

使用2.import Vuex from 'vuex'
// vue2 -> vuex3
// vue3 -> vuex4
3.Vue.use(Vuex)

methds:{
    this.$store.dispatch("事件名",传入的数据);
    // 直接跨过action
    this.$store.commit("事件名",传入的数据);
    // 获得计算属性
    this.$store.getters.bigSum;
}

可直接夸过 Actions 进行 Commit 调用 mutation 的函数

vuex 开发者工具历史记录符号

回到该次数据 历史记录符号

可以删除历史记录 禁用符号

合并记录 下载符号

底部分可以 导入导出 / 粘贴复制

ES6 语法

let Obj1 = {x:1,y:2}
let Obj2 ={
    z:3,
    ...Obj1, // 直接将Obj1的键值对插入
    m:7,
}

9.1 mapState mapGetters

import {mapState} from 'vue'
// 映射 State 中的数据
computed:{
    // 借助mapState生成计算属性 从state中读取数据
    ...mapState({sum:'sum',adress:'adress'}) // 可直接在计算属性中添加
    // 不可简写 对象简写方式为 {sum:sum} === {sum}  !== {sum:"sum"}
    
    // Vue 可识别 简写方法 与上述方法用途一致
    ...mapState(['sum','subject'])
    
    // 全局计算属性获取
    ...mapGeters(['bigSum'])
}

9.2 mapAction mapMutations

import {mapState} from 'vue'
// 映射 State 中的数据
methods:{
    
    // 数组 / 对象 形式默认生成方法 需要在调用时传参
    /*add(value){
        this.$store.commit('add',value)
    }*/  
    
    ...mapActions(['add']),
    ...mapMutations(['add'])
}

9.3Vuex模块化

index.js

import Vuex from 'vuex'

// 计数相关属性
const countOptions = {
   // 配置该项可在 组件 中使用更简洁的写法
   namespaced:true,
   
   // 与正常 vuex 配置完全一致
   action:{},
   mutation:{},
   state:{},
   getter:{},
}

// 人员相关属性
const personOptions = {
   action:{},
   mutation:{},
   state:{},
   getter:{},
}

export default new Vuex.Store({
   modules:{
       countAbout:countOptions,
       personAbout:personOptions
   }
})

// 组件中简写使用
computed:{
    // 普通简写
    // 调用 state时 需要使用 countAbout.data
    ...mapState(['countAbout','personAbout']),
    
    // 需要在 vuex 中 开启 namespaced
    // 调用时 直接使用 data 就可以
    ...mapState('countAbout',['data']),
    ...mapState('personAbout',['data']),
        
    // 其他 map 同理使用
        
        // getter 模块化之后 值为 countAbout/bigSum  countAbout不再为对象
}

10.路由

10.1 路由基础

单页面应用 路由改变页面局部刷新 (没有全部刷新)

使用 vue 的插件库 vue-router

npm install -g vue-router

/*
vue-router 3 版本对应 vue 2
vue-router 4 版本对应 vue 3
*/

// npm install vue-router@3

在 components 同级文件夹下创建 router 文件夹

index.js

// 引入 vue-router
import VueRouter from 'vue-router'
// 引入组件
import TheList from '../components/TheList.vue';
import AboutSnowman from '../components/AboutSnowman.vue';

// 创建 并 暴露 一个路由器
export default new VueRouter({
    routes: [
        {
            path:"/TodoList",
            component:TheList,
        },
        {
            path:"/about",
            component:AboutSnowman,
        },
        // path 为 * 表示匹配全部 可以匹配全部路径 路径匹配为从上至下
        {
            path:"*",
            component:AboutSnowman,
        },

    ]
})

main.js

// 引入 路由器
import router from './router'

new Vue({
  render: h => h(App),
  // 设置 router
  router:router,
}).$mount('#app')

<!-- 最终 在 html 页面中转化为 a 标签 -->
<!-- to 为跳转到的路由 -->
<!-- active-class 为在该路由时应用的 样式 -->
<router-link to="/TodoList" active-class="active">每日清单</router-link>
<router-link to="/about" active-class="active">关于我的主页</router-link>

<!-- 视图展示 对应路由的位置 -->
<router-view></router-view>

在 components 同级文件夹下创建 pages 文件夹

便于分类 pages存放 路由组件 components文件夹存放 一般组件

原理： {不断销毁与挂在组件}

每个组件都有自己的$route属性，里面存储着自己的路由信息
整个应用只有一个router, 可以通过组件的$router属性获取到

10.2 多级路由 (嵌套路由)

index.js

// 引入 vue-router
import VueRouter from 'vue-router'
// 使用插件
import Vue from 'vue'
Vue.use(VueRouter)
// 引入组件
import TheList from '../components/TheList.vue';
import AboutSnowman from '../components/AboutSnowman.vue';

// 创建 并 暴露 一个路由器
export default new VueRouter({
    routes: [
        // 一级路由
        {
            path:"/TodoList",
            component:TheList,
            // 路由嵌套从这里开始
            // 二级路由
            children:[{
                // 第二级不需要加 / 会出问题
                path:"new",
                component:TheList,
            }]
        },
        // 一级路由
        {
            path:"/about",
            component:AboutSnowman,
        },

    ]
})

<!-- 最终 在 html 页面中转化为 a 标签 -->
<!-- to 为跳转到的路由 -->
<!-- active-class 为在该路由时应用的 样式 -->

<!-- 二级路由必须携带父亲级路由的路径 -->
<router-link to="/TodoList/new" active-class="active">每日清单</router-link>
<router-link to="/about/new" active-class="active">关于我的主页</router-link>

<!-- 视图展示 对应路由的位置 -->
<router-view></router-view>

10.3 路由传参

query参数 get传参

<router-link to="/TodoList/new?name=雪人&age=18" active-class="active">每日清单</router-link>

<!-- 加 v-bind + ES6 `` 动态传参 -->
<router-link :to="`/TodoList/new?name=${name}&age=${age}`" active-class="active">每日清单</router-link>

<!-- 对象式 传参 -->
<router-link :to="`{
                  path="/TodoList/new",
                  query:{
                         name:name,
                         age:age,
                         }               
                  }
                  `" active-class="active">每日清单</router-link>

<router-link to="/about/new" active-class="active">关于我的主页</router-link>

// 组件中获取
this.$route.query.name
this.$route.query.age

10.4 命名路由

export default new VueRouter({
    routes: [
        {
            // 配置姓名 简化传参
            name:'ListName',
            path:"/TodoList",
            component:TheList,
            children:[{
                // 配置姓名 简化传参
                name:'new',
                path:"new",
                component:TheList,
            }]
        },
    ]
})

<!-- 对象式 传参 -->
<!-- 使用 name 必须使用对象式 -->
<router-link :to="`{
                  // 此处直接传入 路由器 定义的名字
                  name:"ListName",
                  query:{
                         name:name,
                         age:age,
                         }               
                  }
                  `" active-class="active">每日清单</router-link>

10.5 params参数

<!-- params参数 传参 需要配置占位符 -->
<router-link :to="`/TodoList/new/11/王二`" active-class="active">每日清单</router-link>
<!-- params参数 对象式 -->
<router-link :to="`{
                  // params 只能使用name path会报错！！！
                  name:"ListName",
                  params:{
                         id:11,
                         name:"王二",
                         }               
                  }
                  `" active-class="active">每日清单</router-link>

export default new VueRouter({
    routes: [
        {
            // 添加占位符设置参数
            name:'ListName',
            path:"/TodoList/:id/:name",
            component:TheList,
            children:[{
                // 添加占位符设置参数
                name:'new/:id/:name',
                path:"new",
                component:TheList,
            }]
        },
    ]
})

// 组件中获取
this.$route.params.name
this.$route.params.age

10.6 props的配置

export default new VueRouter({
    routes: [
        {
            name:'ListName',
            path:"/TodoList/:id/:name",
            component:TheList,
            children:[{
                name:'new/:id/:name',
                path:"new",
                component:TheList,
                // props 写法一
                // 该对象中的所有 key-value 都会以props的形式传给 组件 TheList中
                props:{id:1,name:'hello'},
                
                // props 写法二
                // props值为布尔值,若布尔值为真,就会把该参数的 params值当做 props 值传递给组件
                props:true,
                
                // props 写法三
                // 值为函数 返回值 以props 传递给组件
                // $route 被回调传入 真好
                props($route){
                    return {id:$route.query.id,name:'hello'}
                }
                
                // 结构赋值写法
                props({query}){
                    return {id:query.id,name:query.name}
                }
            }]
        },
    ]
})

10.7 replace 记录

默认为push记录栈的不断添加

replace 替换当前记录不能返回

<!-- 开启replace :replace="true" -->
<router-link to="/TodoList/new" active-class="active" :replace="true">每日清单</router-link>
<!-- 开启replace 简写方式 -->
<router-link to="/about/new" active-class="active" replace>关于我的主页</router-link>

10.8 编程式路由导航

在 $router 中直接操作不借助 router-link

<template>
    <button @click="showPush">
        push查看
    </button>
    <button @click="showReplace">
        replace查看
    </button>
    <button @click="back">
        后退
    </button>
    <button @click="forward">
        前进
    </button>
    <button @click="go">
        前进
    </button>
</template>

<script>
export default {
    name:'Message',
    methods:{
        showPush(){
             // 调用 $router 上的API
            this.$router.push({
                name:"xiangqing",
                query:{
                    id:'11',
                    name:'王二',
                }
            })
        },
        showReplace(){
             // 调用 $router 上的API
            this.$router.replace({
                name:"xiangqing",
                query:{
                    id:'11',
                    name:'王二',
                }
            })
        },
        back(){
            this.$router.back
        },
        forward(){
            this.$router.forward
        },
        go(){
            // 正数 前进 n 次
            // 复数 后退 n 次
            this.$router.go(n)
        },
    }
}
</script>

10.8 缓存路由组件

组件切走时会被销毁内容消失如何保存?

需要保存数据的去缓存

<!-- inlude="" 配置需要缓存的组件 否则缓存全部组件 -->
<!-- 防止组件被销毁 数据丢失 -->
<keep-alive inlude="组件名">
    <router-view></router-view>
</keep-alive>

<!-- 缓存多个组件 -->
<keep-alive :inlude="['组件名1','组件名2','组件名3']">
    <router-view></router-view>
</keep-alive>

10.9激活与失活声明周期

用于路由组件的开启定时器比 mounted更高效

methods:{
    activated(){
        // 开启定时器
    },
    deactivated(){
        // 定时器自动关闭
    }
}

10.10路由守卫

1.前 / 后置路由守卫

保护路由的安全 验证数据库再展示

全局前置路由守卫

export default new VueRouter({
    routes: [
        {
            path:"/TodoList",
            component:TheList,
            // 用于存放用户需要的特殊数据
            // 可以在判断中进行索引 不指定默认为 undefined 为 false
            meta:{isAuth:true,title:"每日清单"},
        }
    ]
})



// 全局前置路由守卫
// to 路由去向 路由对象
// from 路由由来 路由对象
// next 回调函数 使用 next()才能切换路由
router.beforeEach((to,from,next)=>{
    if(to.path === '/home'){
        // 利用meta判断
        if(from.meta.isAuth){
            next()
        }
        next()
    }
    next()
})
export default router

// 全局后置路由守卫
// 无 next 路由跳转已经完成后触发
router.afterEach((to,from)=>{
    // 可在跳转完成后更改路由
    doucment.title = to.meta.title || '网页标题' // 短路判断
})

2.独享路由守卫

export default new VueRouter({
    routes: [
        {
            path:"/TodoList",
            component:TheList,
            // 用于存放用户需要的特殊数据
            // 可以在判断中进行索引 不指定默认为 undefined 为 false
            meta:{isAuth:true,title:"每日清单"},
            
            // 独享路由守卫 仅有前置 无后置
            beforeEnter:(to,from,next)=>{
                if(...){
                   next()
                   }
            }
        }
    ]
})

3.组件内路由守卫

<script>
    mounted(){
        // 通过路由器规则 进该组件时被调用
        // 在beforeEnter 之前
        // to 一定是该组件路由
        beforeRouteEnter(to,from,next){
            
        },
        // 通过路由器规则 离开该组件时被调用
        // from 一定是该组件路由
        beforeRouteLeave(to,from,next){
            
        }
    }
</script>

11.浏览器路由模式

main.js

// hash 带 # 兼容性好 不美观 
// history 不带 # 兼容性差(相对) 美观 会寻找服务器路径资源 容易出错(后端解决)

new VueRouter({
    // 设置模式
    mode:history,
})

12.打包上传服务器

>>> npm run build
// 生成 dist 文件夹
// 为打包后的 css js html 文件
// 直接点击 index.html 无法运行必须在服务器部署

如何部署服务器

node.js express 框架

->npm init

->text_serve 包名

->npm i express

中间件解决 history 模式 404问题

->npm i connect-history-api-fallback

// 在 server.js 同级目录下新建 js

const express = require('express')
const history = require('connect-history-api-fallback')

const app = express()

// 解决history 404 问题
app.use(history)
// 默认选择 index.html
app.use(express.static(__dirname+"./static"))

app.get('/person',(req,res)=>{
    res.send({
        name:'tom',
        age:18
    })
})

app.listen(5005,(err)=>{
    if(!err) console.log('服务器启动成功了!')
})

13.Vue UI 组件库

7.1 移动端常用组件库

Cube UI https://didi.github.io/cube-ui
Mint Ul http://mint-ui.github.io

7.2PC端常用UI组件库

Element Ul https://element.eleme.cn
lView Ul https://www.iviewui.com
ant design Ant Design - 一套企业级 UI 设计语言和 React 组件库

直接用就行

此处介绍Element UI

->npm i element-ui

import Vue from 'vue';
import ElementUI from 'element-ui';
// 引入全部样式
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

// 此处use 后 会注册全部组件为全局组件
// 引入的 js 非常大 7.2M(别用)
Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

按需引入

-> npm install babel-plugin-component -D 按需引入的库 -D为开发依赖(开发环境)

->npm install babel-preset-es2015 --save

->npm install --save-dev @babel/cli

需要修改 babel.config.js 配置

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ['es2015', { modules: false }],
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk',
      },
    ],
  ],
}

main.js

// 按需引入 
import {Button,Row,...} from 'element-ui'
// 配置之后会引入需要的 css 而不是全部css
import 'element-ui/lib/theme-chalk/index.css';

// Button 的组件名 可以自定义
// 注册全局组件
VUe.component(Button.name,Button)

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

【Vue2学习笔记】Vue2入门学习-03

Vue2入门学习笔记

1.Vue动画

2.Vue过渡

3.多个元素过渡

4.超级好用的动画库

5.Http请求 代理

5.1简易代理

5.2完美代理

6.静态组件

7.vue-resource vue的插件库

8.slot 插槽

8.1默认插槽

8.2(具名插槽)多个插槽

8.3作用域插槽

9.Vuex

9.1 mapState mapGetters

9.2 mapAction mapMutations

9.3Vuex模块化

10.路由

10.1 路由基础

10.2 多级路由 (嵌套路由)

10.3 路由传参

10.4 命名路由

10.5 params参数

10.6 props的配置

10.7 replace 记录

10.8 编程式路由导航

10.8 缓存路由组件

10.9激活与失活声明周期

10.10路由守卫

1.前 / 后 置路由守卫

2.独享路由守卫

3.组件内路由守卫

11.浏览器路由模式

12.打包 上传服务器

13.Vue UI 组件库

热门文章

最新文章

相关课程

相关电子书

相关实验场景

5.Http请求代理

1.前 / 后置路由守卫

12.打包上传服务器