Vue 笔记 5 - vue路由

安装：

1

npm i vue-router

使用router-link标签实现路由的切换

1
2

<router-link to="/about" class="list-group-item" active-class="active">About</router-link>
<router-link to="/home" class="list-group-item" active-class="active">Home</router-link>

使用router-view指定组件的呈现位置

1

<router-view></router-view>

几个注意点：

1. 路由组件通常存放在pages文件夹，以班组间通常存放在component文件夹
2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
3. 每个组件都有自己的$route属性，里面存储着自己的路由信息。
4. 整个应用只有一个router，可以通过组件的$router属性获取到。

嵌套（多级）路由

1. 配置路由规则，使用children配置项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

export default new VueRouter({
    routes: [
        {
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            children: [{
                path: 'news',
                component: News,
            },
            {
                path: 'message',
                component: Message,
            }
            ]
        },
    ]
})

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

1

<router-link to="/home/news">News</router-link>

路由传递参数

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

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

   { path: '/home', component: Home, children: [{ path: 'news', component: News, }, { path: 'message', component: Message, children: [{ name:'xq', // path: 'detail', // query路由 path: 'detail/:id/:title', // params路由 component: Detail, }] } ] }

2. 传递参数
   跳转路由并携带query参数，to的字符串写法

   1	<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>

   跳转路由并携带params参数

   1	<router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>

   跳转路由并携带query参数，to的对象写法

   1 2 3 4 5 6 7 8 9 10 11

   <router-link :to="{ // path:'/home/message/detail', // 使用命名路由 name:'xq', query: { id:m.id, title:m.title } }"> {{m.title}} </router-link>

   跳转路由并携带params参数，to的对象写法，这里需要注意的是params路由不能使用path，必须使用name方式：

   1 2 3 4 5 6 7 8 9 10 11

   <router-link :to="{ // path:'/home/message/detail', // error！ // 使用命名路由 name:'xq', params: { id:m.id, title:m.title } }"> {{m.title}} </router-link>

路由的props配置

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

{
    name: 'xq',
    path: 'detail/:id',
    component: Detail,

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

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

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

    // 这里可以使用解构赋值的连续写法简化
    props({params:{id, title}}){
        return {id, title}
    }
}

编程式路由导航

作用：不借助<router-link>实现路由跳转，让路由跳转更灵活
具体编码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

methods: {
  pushShow(m) {
    this.$router.push({
      name: "xq",
      params: {
        id: m.id,
        title: m.title,
      },
    });
  },
  replaceShow(m) {
    this.$router.replace({
      name: "xq",
      params: {
        id: m.id,
        title: m.title,
      },
    });
  },
},

缓存路由组件

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

• 具体编码：

  • 缓存一个路由组件

  1 2 3

  <keep-alive include="News"> <router-view></router-view> </keep-alive>

  • 缓存多个路由组件

  1 2 3

  <keep-alive :include="['News','Message']"> <router-view></router-view> </keep-alive>

路由守卫

作用： 对路由进行权限控制
分类： 全局守卫、独享守卫、组件内守卫
全局守卫：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// 全局前置路由守卫 -- 初始化及每次路由切换之前被调用
router.beforeEach((to, from, next) => {
    // console.log(to, from, next)
    if (to.meta.isAuth) {
        if (localStorage.getItem('school') === 'geekhall'){
            // 放行
            next()
        } else {
            alert('请先登录')
        }
    }
})

// 全局后置路由守卫 -- 初始化及每次路由切换之后被调用
// 使用的不多，可以用于切换页面title
router.afterEach((to, from) => {
    console.log('后置路由守卫：', to , from)
    document.title = to.meta.title || "geekhall"
})

独享路由守卫:beforeEnter

路由器的两种工作模式

1. 对于一个url来说，什么事hash值？ —-#及其后面的内容就是hash值。
2. hash值不会包含在HTTP请求中，即：hash值不会带给服务器。
3. hash模式：
   • 地址中永远带着#，不美观
   • 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
   • 兼容性较好
4. history模式：
   • 地址干净美观
   • 兼容性和hash相比略差
   • 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

Vue 笔记 4 - vuex

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

Github地址：https://github.com/vuejs/vuex

什么时候使用

1. 多个组件依赖于统一状态
2. 来自不同组件的行为需要变更同一状态

vuex 原理

• Actions ： 服务员
• Mutations ： 后厨
• State ： 菜肴

安装

1
2

npm i vuex
npm i vuex --save-bundle

搭建环境

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// 该文件用于创建Vuex中最为核心的store
import Vue from 'vue'

// 引入Vuex
import Vuex from 'vuex'
// 应用Vues
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配置项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 全局Mixin
// import {hunhe, mixin} from './mixin'

// 导入插件
// import plugins from './plugins'
// 引入vueResource
import vueResource from 'vue-resource'
// import Vuex from 'vuex'

// import store from './store/index'  // index可以省略
import store from './store'

// 关闭Vue的生产提示
Vue.config.productionTip = false

// 应用插件
// Vue.use(plugins)
Vue.use(vueResource)

// 创建vm
new Vue({
    el: '#app',
    render: h => h(App),
    store,
    beforeCreate(){
        Vue.prototype.$bus = this   // 全局事件总线
    }
})

getters

当state中的数据需要经过加工后再使用时，可以使用getters加工，
在store.js中追加getters配置：

1
2
3
4
5
6
7
8
9
10

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

四个map方法的使用

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

   1 2 3 4 5 6 7

   computed: { // 第一种方式：借助mapState生成计算属性，从state中读取数据。（对象写法） ...mapState({he:'sum', xuexiao:'school', xueke:'subject'}), // 第二种方式：要求生成的计算属性名和state中的属性名一致。（数组写法） ...mapState(['sum', 'school', 'subject']), }

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

   1 2 3 4

   // 第一种方式：借助mapGetters生成计算属性，从getters中读取数据。（对象写法） ...mapGetters({bigSum:'bigSum'}), // 第二种方式：要求生成的计算属性名和getters中的属性名一致。（数组写法） ...mapGetters(['bigSum'])

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

   1 2 3 4 5 6

   methods:{ // 靠mapActions生成： incrementOdd、incrementWait（对象形式） ...mapActions({incrementOdd:'jiaOdd', incrementWait:'jiaWait'}) // 靠mapActions生成： incrementOdd、incrementWait（数组形式） ...mapActions(['jiaOdd', 'jiaWait']) }

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

   1 2 3 4 5 6 7 8 9 10

   // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions（对象写法） ...mapActions({incrementOdd: 'addOddAction', incrementWait: 'addWaitAction'}) // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions（数组写法） ...mapActions(['addOddAction', 'addWaitAction']) // 注意数组写法要求调用处需要修改为数组中生成的函数名： <button @click="addOddAction(n)">当前求和为奇数再加</button> <button @click="addWaitAction(n)">等一等再加</button>

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

模块化和命名空间

目的： 让代码更好维护，让多种数据分类更加明确

开启命名空间

修改：moduleA.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

const moduleAOptions = {
    namespaced:true,  // 开启命名空间
    actions: {
        // ...
    },
    mutations: {
        // ...
    },
    state: {
        // ...
    },
    getters: {
        // ...
    }
}
export default moduleAOptions

moduleB.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

export default {
    namespaced:true,  // 开启命名空间
    actions: {
        // ...
    },
    mutations: {
        // ...
    },
    state: {
        // ...
    },
    getters: {
        // ...
    }
}

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

import moduleAOptions from './moduleA'
import moduleBOptions from './moduleB'

// 创建并暴露store
export default new Vuex.Store({
    modules: {
        moduleA: moduleAOptions,
        moduleB: moduleBOptions
    }
})

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

1
2
3
4
5
6

// 方式1： 自己直接读取
this.$store.state.moduleA.list

// 方式2： 借助mapState读取
...mapState('moduleA',['state1','state2','state3'])

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

1
2
3
4
5

// 方式1： 自己直接读取
this.$store.getters['moduleA/personName']

// 方式2： 借助mapGetters读取
...mapGetters('moduleA',['getSum'])

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

1
2
3
4
5

// 方式1： 自己直接dispatch
this.$store.dispatch('moduleA/addPerson', person)

// 方式2： 借助mapActions取
...mapActions('countModule', {incrementOdd: "addOddAction",incrementWait: "addWaitAction"})

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

1
2
3
4
5

// 方式1： 自己直接commit
this.$store.commit('moduleA/addPersonMutation', person)

// 方式2： 借助mapMutations取
...mapMutations('moduleA',{ increment: "addMutation", decrement: "subMutation" }),

Vue 笔记 3 - Ajax

安装axios

1

npm i axios

代理

跨域：协议名、主机名、端口号三者不同时浏览器认为跨域了。

使用nodejs搭建两个简易后台服务端

server1.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// node src/server1.js
// http://localhost:5001/student

let express = require('express');
let app = express();
let fs = require('fs');
const log = console.log;

app.get('/student', function (request, response){
    response.writeHead(200, {'Content-Type': 'application/json'});
    log("有人访问了server1");
    response.end(JSON.stringify({
        name: 'server',
        age: 2020
    }));
});

let server = app.listen(5001, function(){
    let host = server.address().address
    let port = server.address().port
    log("有人访问了server1");
})

server2.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// node src/server2.js
// http://localhost:5002/car

let express = require('express');
let app = express();
let fs = require('fs');
const log = console.log;

app.get('/car', function (request, response){
    response.writeHead(200, {'Content-Type': 'application/json'});
    log("有人访问了server2");
    response.end(JSON.stringify({
        name: 'car',
        age: 2020
    }));
});

let server = app.listen(5002, function(){
    let host = server.address().address
    let port = server.address().port
    log("有人访问了server2");
})

然后就可以通过node src/server1.js和node src/server2.js 来启动服务器。

配置vuecli开启代理服务器

修改vue的自定义配置文件vue.config.js

• 方式一：

  1 2 3

  devServer: { proxy: 'http://localhost:5001' }

• 方式二：

  1 2 3 4 5 6 7 8 9 10 11 12

  devServer: { proxy: { '/api': { target: '<url>', ws: true, changeOrigin: true }, '/foo': { target: '<other_url>' } } }

插槽Slot

1. 作用：让父组件可以向子组件指定位置插入Html结构，也是一种组件间通信的方式，适用于父组件 ===> 子组件。
2. 分类：默认插槽、具名插槽、作用域插槽
3. 使用方式：

   • 默认插槽：

     1 2 3 4 5 6 7 8 9 10

     父组件中： <Category> <div>HTML结构1</div> </Category> 子组件： <template> <div> <slot>插槽默认内容</slot> </div> </template>

     • 具名插槽：

       1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

       父组件中： <Category> <template slot="center"> <div>HTML结构1</div> </template> <template v-slot:footer> <div>html结构2</div> </template> </Category> 子组件： <template> <div> <slot name="center">插槽默认内容</slot> <slot name="footer">插槽默认内容</slot> </div> </template>

     • 作用域插槽：
       数据在组件自身，但根据数据生成的结构需要组件的使用者来决定
       App.vue

       1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

       <div class="container"> <Category title="游戏"> <template scope="geekhall"> <ul> <li v-for="(g, index) in geekhall.games" :key="index">{{ g }}</li> </ul> </template> </Category> <Category title="游戏"> <template scope="{games}"> <ol> <li v-for="(g, index) in games" :key="index">{{ g }}</li> </ol> </template> </Category> </div> </template>

       Category.vue

       1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

       <template> <div class="category"> <h3>{{ title }}分类</h3> <slot :games="games">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot> </div> </template> <script> export default { name: "Category", props: ["title"], data() { return { games: ["coc", "bob", "lol"] }; } }; </script>

Vue 笔记 2 - 组件

组件是可复用的 Vue 实例，且带有一个名字。

非单文件组件

一个文件中包含多个组件。
Vue中使用组件的三大步骤：

1. 定义组件
2. 注册组件
3. 使用组件（写组件标签）

1. 如何定义一个组件

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，
区别如下：

1. el不要写，因为最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器；
2. data必须写成函数，为什么？ – 避免组件被复用时，数据存在引用关系。
   备注：使用template可以配置组件结构

2. 如何注册组件

1. 局部注册：new Vue的时候传入components选项
2. 全局注册：Vue.component(‘组件名’,组件)

3. 使用组件

<component></component>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

<div id="root">
    <h2>{{msg}}</h2>
    <!-- <xuexiao></xuexiao> -->
    <school></school>
    <hr>
    <!-- <xuesheng></xuesheng> -->
    <!-- <xuesheng></xuesheng> -->
    <!-- <xuesheng></xuesheng> -->
    <student></student>
    <student></student>
    <hello></hello>
</div>

<hr>

<div id="root2">
    <hello></hello>
</div>
<hr>

<script>
    Vue.config.productionTip = false

    // 1. 创建school组件
    const school = Vue.extend({
        template:`
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click="showName">显示学校名称</button>
            </div>
        `,
        // 组件不要写el配置项
        data() {
            return {
                schoolName: '极客堂',
                address: '北京'
            }
        },
        methods: {
            showName(){
                console.log(this.schoolName)
            }
        }
    })

    // 1. 创建student组件
    const student = Vue.extend({
        template:`
            <div>
                <h2>学生名称：{{studentName}}</h2>
                <h2>学生年龄：{{age}}</h2>
            </div>
        `,
        // 组件不要写el配置项
        data() {
            return {
                studentName: '月白',
                age: 18
            }
        }
    })

    const hello = Vue.extend({
        template: `
            <div>
                <h2>Hello {{name}}</h2>
            </div>
        `,
        data(){
            return {
                name: 'Component'
            }
        }
    })

    // 全局注册组件
    Vue.component('hello', hello)
    // 创建vm
    new Vue({
        el: '#root',
        data: {
            msg: "组件基础"
        },
        // 2. 注册组件(非简写形式)
        // components: {
        //     xuexiao: school,
        //     xuesheng: student
        // },
        // 2. 注册组件（简写形式）
        components: {
            school,
            student,
            // hello    // 因为全局已经注册过hello组件，所以这里不用注册。
        }
    })

    new Vue({
        el: '#root2',
        data: {
            msg: "root2"
        },
        components: {
            // hello
        }
    })
</script>

几个注意点

• 1.关于组件名

组件的嵌套

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

<div id="root">
</div>

<script>
    Vue.config.productionTip = false

    // 1. 创建student组件
    const student = Vue.extend({
        name: 'student',
        template:`
            <div>
                <h2>学生名称：{{name}}</h2>
                <h2>学生年龄：{{age}}</h2>
            </div>
        `,
        data() {
            return {
                name: '月白',
                age: 18
            }
        }
    })

    // 1. 创建school组件
    const school = Vue.extend({
        name: 'school',
        template:`
            <div>
                <h2>学校名称：{{name}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click="showName">显示学校名称</button>
                <student></student>
            </div>
        `,
        data() {
            return {
                name: '极客堂',
                address: '北京'
            }
        },
        methods: {
            showName(){
                console.log(this.name)
            }
        },
        components: {
            student
        }
    })

    const hello = Vue.extend({
        name: 'hello',
        template: `
            <div>
                <h2>Hello {{name}}</h2>
            </div>
        `,
        data(){
            return {
                name: 'Component'
            }
        }
    })
    const app = Vue.extend({
        name: 'app',
        template:`
            <div>
                <hello></hello>
                <school></school>
            </div>
        `,
        components: {
            school,
            hello
        }
    })
    // 创建vm
    new Vue({
        el: '#root',
        template: `<app></app>`
        data: {
            msg: "组件基础"
        },
        components: {
            app
        }
    })
</script>

单文件组件

一个文件中只有一个组件。

VueCLI

安装

1

npm install -g @vue/cli

切换到想要创建项目的目录，创建项目

1

vue create xxxx

启动项目

1
2
3
4
5

cd project_dir
yarn serve
或者
npm run serve

安装插件

1
2

npm i less-loader@7

关于脚手架

1. vue.js 与 vue.runtime.xxx.js 的区别：
   • vue.js 是完整版的Vue，包含：核心功能+ 模板解析器。
   • vue.runtime.xxx.js 是运行版的Vue，只包含核心功能，没有模板解析器。
2. 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数取指定具体内容。
3. Vue默认隐藏了WebPack的默认配置，可以使用vue inspect > output.js 来导出默认配置，需要将配置文件命名为vue.config.js放到项目根目录下（与src目录同级）。

配置项props

功能： 让组件接收外部传过来的数据

1. 传递数据：

   1	<Demo name="xxx"/>

2. 接收数据：

   • 第一种方式（只接收）：props: ['name']
   • 第二种方式（限制类型）：

1
2
3
4

props:{
    name: String,
    age : Number
}

• 第三种方式（限制类型、必要性、默认值）：

1
2
3
4
5
6
7

props:{
    name: {
        type: Number,
        required: true,
        default: 99
    }
}

注意： props是只读的，Vue底层会检测你对props的修改，如果进行了修改，就会发出警告，
若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

mixin（混入）

功能：可以吧多个组件共用的配置提取成一个混入对象。
使用方式：

1. 定义：

   1 2 3 4

   { data(){...}, methods(){...} }

2. 使用：

   • 全局混入： Vue.mixin(xxx)
   • 局部混入： mixins:[‘xxx’]

插件

功能：用于增强Vue
本质：包含install方法的一个对象，install的第一个参数是Vue，
第二个以后的参数是插件使用者传递的数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

export default {
    install(Vue) {
        // console.log('@@@ my install', Vue)
        // 全局过滤器
        Vue.filter('myGlobalSlice', function (value) {
            return value.slice(0, 4)
        })

        // 全局自定义指令
        Vue.directive('fbind', {
            bind(element, binding){
                element.value = binding.value
            },
            // inserted(element, binding){
            //     element.focus()
            // },
            // update(element, binding){
            //     element.value = binding.value
            // }
        })

        // 全局Mixin
        Vue.mixin({
            data(){
                return {
                    x:100,
                    y:200
                }
            }
        })

        // 给Vue原型上添加一个方法（vm和vc就都可以使用了）
        Vue.prototype.hello = () => {alert('Greetings from plugins')}
    }
}

scoped样式

作用：让样式拒不生效，防止冲突

写法：<style scoped>

组件自定义事件

1. 一种组件间通信的方式，适用于：子组件 ===> 父组件
2. 使用场景： A是父组件，B是子组件，B想给A传递数据，那么就要在A中给B绑定自定义事件（事件的回调函数在A中）
3. 父组件通过v-on:eventname="fn"或者@eventname="fn"绑定自定义事件，并在methods中添加事件方法

1
2
3
4
5
6
7

<Student v-on:geekhall="getStudentName"></Student>
// ...
methods:{
    getStudentName(name){
        console.log('App收到了学生名：', name)
    }
}

4. 在子组件中通过this.$emit('eventname')来触发自定义事件

1
2
3
4
5
6

methods: {
  sendStudentName(){
    // 触发Student组件实例身上的geekhall自定义事件
    this.$emit('geekhall', this.name)
  }
}

5. 解绑定自定义事件this.$off('eventname')
6. 组件上也可以使用原生DOM事件，需要使用native修饰符。
7. 注意：通过this.$refs.xxx.$on('eventname', 回调函数) 绑定自定义事件时，回调要么配置在metiods中，要么使用箭头函数，否则this指向会出问题。

全局事件总线（GlobalEventBus）

1. 一种组件间通信的方式，适用于任意组件间通信；

2. 安装全局事件总线：

   1 2 3 4 5 6 7

   new Vue({ // .... beforeCreate() { Vue.prototype.$bus = this // 安装全局事件总线，$bus就是当前应用的vm } // .... })

3. 使用事件总线:

   • 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

   1 2 3 4 5 6 7

   methods(){ demo(){....} } // .... mounted(){ this.$bus.$on('xxxx', this.demo) }

   • 提供数据： this.$bus.$emit('xxxx', 数据)

4. 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

消息订阅与发布

一种组件间通信的方式，适用于任意组件间通信

使用步骤：

1. 安装pubsub： npm i pubsub-js

2. 引入： import pubsub from 'pubsub-js'

3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

   1 2 3 4 5 6 7

   methods(){ demo(data){....} } ... mounted(){ this.pid = pubsub.publish('xxx',数据) }

4. 提供数据：pubsub.publish('xxx', 数据)

5. 最好在beforeDestroy钩子中，使用pubsub.unsubscribe(pid)来取消订阅。

nextTIck回调

1. 语法： this.$nextTick(回调函数)
2. 作用：在下一次DOM更新结束后执行其指定的回调。
3. 什么时候使用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

动画

1. 进入的样式

   • v-enter： 进入的起点
   • v-enter-active：进入的过程中
   • v-enter-to： 进入的终点

2. 离开的样式：

   • v-leave: 离开的起点
   • v-leave-active： 离开的过程中
   • v-leave-to： 离开的终点

3. 使用<transition>包裹要过度的元素，并配置name属性：

   1 2 3

   <transition name="hello"> <h1 v-show="isShow">Animate.css</h1> </transition>

4. 若有多个元素需要过度，则需要使用：<transition-group>，并且每个元素都需要指定key值

Vue 笔记 1 - Vue基础

背景知识

Vue(读音/vju:/)是一套用于构建用户界面的渐进式框架，发布于2014年2月。Vue被设计为可以自底向上组成应用。

Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

Vue的一些常用第三方库

• vue-router：路由
• vue-resource： 通信
• vuex： 管理

前端的一些常用工具

• CSS预处理

  • SASS：基于Ruby，通过服务端处理，功能强大，解析效率高，需要学习Ruby语言，上手难度稍高。
  • LESS：基于NodeJS，通过客户端处理，使用简单，功能比SASS简单，解析效率也稍低。

• JavaScript框架

  • jQuery： 优点是简化DOM操作，缺点是DOM操作太频繁，影响前端性能，在前端眼里使用它仅仅是为了兼容IE6-8
  • Angular： Google收购的前端框架，由一群Java程序员开发，特点是将后台MVC的开发模式搬到了前端并增加了模块化开发的理念，采用TypeScript语法，对前端开发人员不太友好。
  • React： FaceBook出品，一款高性能的JS前端框架，特点是提出了新概念【虚拟DOM】，在内存中模拟DOM并进行Diff算法，用于减少DOM操作，有效提高了渲染效率；缺点是使用复杂，需要额外学习一门【JSX】语言
  • Vue： 一款渐进式JavaScript框架，综合了Angular和React的优点。
  • Axios：前端通信框架，用来处理异步通信。

• UI框架

  • Ant-Design：阿里巴巴出品，基于React的UI框架
  • Element-UI：饿了么出品，基于Vue的UI组件库，组件齐全，基本涵盖了后端所需要的所有组件，文档详细案例丰富，主要用于PC端，是一个质量较高的组件库。前端主流框架，选型时可以考虑，主要特点是PC端支持较多。
  • iview：饿了么出品，基于Vue的UI框架，有很多实用的基础组件，比ElementUI更丰富，主要服务于PC界面的中后台产品，使用单文件的Vue组件化开发模式，
    基于npm+webpack+babel开发，属于前端主流框架，选型时可以考虑使用，主要特点是移动端支持较多。
  • ice：饿了么出品，基于Vue的UI框架，是阿里巴巴团队基于Angular/React/Vue的中后台解决方案，在阿里巴巴内部已经有270多个来自几乎所有BU的项目在使用，飞冰包含了一条从设计到开发的完整链路，帮助用户快速搭建自己的中后台应用。
  • Bootstrap：Twitter推出的一个用于前端开发的开源包
  • AmazeUI：妹子UI，一款HTML5跨屏前端框架。
  • LayUI：

• 构建工具

  • Babel： JS编译工具，主要用于浏览器不支持的新特性，比如用于编译TypeScript
  • WebPack：模块打包器，主要作用是打包、压缩、合并以及按序加载
  • Gulp：自动化任务执行工具

• 三端统一
  混合开发（Hybrid App）

  主要目的是实现一套代码三端共用（PC、Android:.apk、iOS:.ipa）并能够掉用到设备底层硬件，比如传感器、GPS、摄像头等
  打包方式主要有以下两种

  • 云打包：HBuild -> HBuildX, DCloud出品； API Cloud
  • 本地打包：Cordova（前身是PhoneGAP）

Vue安装

Vue官网： vuejs.org

可以使用以下几种方式来安装使用Vue

1. 下载vue.js后直接放在项目工程中引用
   下载地址：https://cn.vuejs.org/v2/guide/installation.html

   

2. 使用CDN
   开发环境

1

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

生产环境

1

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

使用原生ES Modules

1
2
3

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js'
</script>

• 使用npm安装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 安装vue
npm install vue

# 安装vue（全局）
npm install -g vue

# 安装Vue2.x的脚手架：vue-cli
npm install -g vue-cli

# 安装Vue3.x的脚手架：@vue/cli
npm install -g @vue/cli

# 升级@vue/cli
npm update -g @vue/cli

# 安装WebPack
npm install -g webpack

# 删除vue-cli
npm uninstall vue-cli -g

# 确认
vue --version

• 使用Yarn安装

1
2
3
4
5
6
7
8
9
10
11
12
13

npm install vue

# 安装Vue3.x的脚手架：@vue/cli
yarn global add @vue/cli

#
yarn global upgrade --latest @vue/cli

# 删除Vue2.x版本的脚手架vue-cli
yarn global remove vue-cli

npm install -g vue-cli
npm install -g webpack

初识Vue

第一个Vue页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Vue</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>Hello, {{name}}</h1>
    </div>
    <script>
        Vue.config.productionTip = false  // 阻止 vue在启动时生成生产提示。

        // 创建 Vue 实例
        const vm = new Vue({
            el:'#root',     // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data:{          // data用于存储数据
                name: 'Vue'
            }
        });
    </script>
</body>
</html>

• 想让Vue工作，需要创建一个Vue实例，并且要传入一个配置对象；
• root容器里的代码依然符合html规范；
• root容器与Vue实例之间是一一对应的，一般真实开发中只有一个Vue实例，并且会配合着组件一起使用；
• {{ }}中可以放置js表达式，比如{{1+1}}，{{Date.now()}}；
• 一旦data中的数据发生改变，那么页面模版中用到该数据的地方也会自动更新。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<div id="root1">
    <h1>Hello, {{name}}, {{age}}</h1>
</div>
<div id="root2">
    <h1>Hello, {{name}}, {{address}}</h1>
</div>
<script>
    Vue.config.productionTip = false  // 阻止 vue在启动时生成生产提示。

    // 创建 Vue 实例
    const vm1 = new Vue({
        el:'#root1',     // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
        data:{          // data用于存储数据
            name: 'Vue',
            age: 18
        }
    });
    const vm2 = new Vue({
        el:'#root2',     // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
        data:{          // data用于存储数据
            name: 'GeekHall',
            address: 'beijing'
        }
    });
</script>

输出结果

1
2

Hello, Vue, 18
Hello, GeekHall, beijing

Vue 开发者工具

上面的案例在执行的时候F12打开控制台会看到下面的一行提示内容

是因为我们没有安装Vue开发者工具

可以在VueDevTools官网https://devtools.vuejs.org/

或者GitHubhttps://github.com/vuejs/devtools

来下载安装

Chrome浏览器可以在Chrome 网上商店直接下载安装

使用：
可以直接在F12界面中找到Vue开发者工具的Tab页，在这里可以直接执行修改绑定数据等操作。

另外一个需要注意的是，如果使用file://的方式打开html的话开发者工具是不会生效的。

这里推荐使用VSCode的liveServer扩展，可以直接在vscode中使用http://127.0.0.1:5500来调试本地html。

Vue常用7个属性

学习Vue我们必须知道它的7个属性，8个方法，以及7个指令（787原则）

• el属性：用来指示vue编译器从什么地方开始解析vue的语法，可以说是一个占位符；
• data属性：用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放到data中；
• template属性：用来设置模板，会替换页面元素，包括占位符；
• methods属性：放置页面中的业务逻辑，js方法一般都放置在methods中；
• render属性：创建真正的Virtual DOM；
• computed属性：用来计算；
• watch属性：
  • watch:function(new, old)){}
  • 监听data中数据的变化
  • 两个参数，一个返回新值，一个返回旧值

Vue模版语法

1. 插值语法（Interpolation）

1
2
3
4
5
6
7
8
9
10
11
12

<div id="root">
    <h1>Hello, {{name}}</h1>
</div>
<script>
    Vue.config.productionTip = false;
    new Vue({
        el:'#root',
        data:{
            name: 'Vue'
        }
    });
</script>

2. 指令语法（v-bind）
   指令语法用于解析标签（包括：标签属性、标签体内容、绑定事件……）

v-bind会把引号中的内容当作js表达式来执行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div id="root">
    <h1>指令语法：</h1>
    <!--
        这里会把引号内的url当作js表达式来执行，
        并将执行结果https://geekhall.cn绑定给href属性。
    -->
    <a v-bind:href="url">极客堂</a>
</div>
<script>
    Vue.config.productionTip = false;
    new Vue({
        el:'#root',
        data:{
            name: 'Vue',
            url: 'https://geekhall.cn'
        }
    });
</script>

插值语法一般用在标签体内容，
指令语法一般用在标签属性内容，

3. 双向数据绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div id="root">
    <h1>单向数据绑定</h1>
    <input type="text" v-bind:value="name1">
    <hr/>
    <h1>双向数据绑定</h1>
    <input type="text" v-model:value="name2">
</div>
<script>
    Vue.config.productionTip = false  // 阻止 vue在启动时生成生产提示。

    // 创建 Vue 实例
    new Vue({
        el:'#root',
        data:{
            name1: 'Vue',
            name2: 'Vue'
        }
    });
</script>

注意v-model只能应用在表单类元素上。

v-bind:name可以简写成":name"

例如：v-bind:href="xxx" 可以简写为：:href="xxx" ，

v-model:value可以简写成"v-model"

例如：v-model:value="xxx" 可以简写为：v-model="xxx" ，

另一种绑定元素的方法

除了使用el来绑定页面元素后，还可以使用mount来绑定元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div id="root">
    <div>
        <h1>Hello, {{name}}</h1>
    </div>
</div>
<script>
    Vue.config.productionTip = false  // 阻止 vue在启动时生成生产提示。

    // 创建 Vue 实例
    const v = new Vue({
        // el:'#root',
        data:{
            name: 'Vue'
        }
    });
    v.$mount('#root');
</script>

data的另一种写法(函数式)

1
2
3
4
5
6
7
8
9
10
11

const vm = new Vue({
    data: function(){
        console.log('@@@@@:', this);
        return{
            name: "Vue"
        }
    }
});

v.$mount('#root');

注意这里的data函数不能写成箭头函数，否则函数内的this会指向Window，而不是Vue实例了。

• 由Vue所管理的函数，一定不要使用箭头函数。

但是可以简写成下面的方式：

1
2
3
4
5
6
7
8

const vm = new Vue({
    data(){
        console.log('@@@@@:', this);
        return{
            name: "Vue"
        }
    }
});

MVVM模型

• M：Model，data中的数据
• V：View， 模版代码
• VM： 视图模型，Vue实例

Tips

• data中所有的属性，最后都出现在了vm身上
• vm的所有的属性，及Vue原型上所有的属性，在Vue模版中都可以直接使用。

Getter和Setter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

let number = 18;
let person = {
    name: '赵四',
    sex: 'Male'
}
Object.defineProperty(person, 'age', {
    get: function (){
        return number;
    }
    set(value) {
        number = value;
    }
}

console.log(person);

Setter使用的是_data

一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

数据代理

通过一个对象代理对另一个对象中属性的操作
将data中的属性通过Object.defineProperty来绑定_data，从而方便的操作data中的属性。
_data中做了数据劫持（响应式的原理）

v-on事件处理

• 使用v-on:xxx 或者@xxx来绑定事件，其中xxx为事件名；

• 事件的回调函数需要配置在methods对象中，最终会在vm上；

• methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或者组件实例对象；

• methods中配置的函数，不要使用箭头函数，否则this就不是vm了；

• @click=”demo” 和 @click=”demo($event)” 效果一般，但后者可以传参;(实际测试即使不使用$event,在函数中也还是可以取得event的。)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<div id="root">
    <h2>欢迎来到{{name}}学习</h2>
    <!-- <button v-on:click="showInfo">点我弹出提示信息</button> -->
    <!-- 简写形式 -->
    <button @click="showInfo1">点我弹出提示信息1</button>
    <!-- 传递参数 -->
    <button @click="showInfo2(666)">点我弹出提示信息2</button>
    <!-- 传递参数 -->
    <button @click="showInfo3($event,666)">点我弹出提示信息3</button>
</div>

<script>
    Vue.config.productionTip = false  // 阻止 vue在启动时生成生产提示。
    let vm = new Vue({
        el: '#root',
        data: {
            name: '极客堂'
        },
        methods: {
            showInfo1(event){
                console.log(event.target.innerText);    // 点我弹出提示信息
                console.log(this === vm);               // true, 此处的this是vm
                alert("你好，欢迎你");
            },
            showInfo2(number){
                console.log(number);                    // 666
                console.log(event.target.innerText);    // 点我弹出提示信息2
                console.log(this === vm);               // true, 此处的this是vm
                // alert("你好，欢迎你!!!");
            },
            showInfo3(number){
                console.log(number);                    // 666
                console.log(event.target.innerText);    // 点我弹出提示信息3
                console.log(this === vm);               // true, 此处的this是vm
                // alert("你好，欢迎你!!!");
            }
        }
    });
</script>

修饰符

Vue中的事件修饰符：

1. prevent：阻止默认行为（常用）；
2. stop：阻止事件冒泡（常用）；
3. once：事件只触发一次（常用）；
4. capture：使用事件的捕获模式；
5. self：只有event.target是当前操作的元素时才触发事件；
6. passive：事件的默认行为立即执行，无需等待事件的回调执行完毕；

例如，下面的@click.prevent就等价于e.preventDefault();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<div id="root">
    <h2>欢迎来到{{name}}</h2>
    <a href="https://geekhall.cn" @click.prevent="showInfo">点我提示信息</a>
</div>

<script>
    Vue.config.productionTip = false  // 阻止 vue在启动时生成生产提示。
    let vm = new Vue({
        el: '#root',
        data: {
            name: '极客堂'
        },
        methods: {
            showInfo(e){
                // e.preventDefault(); // 阻止默认行为
                alert("test");
            }
        }
    });
</script>

使用@click.stop：阻止事件冒泡；

1
2
3

<div class="demo1" @click="showInfo" style="background-color:skyblue; padding:1rem">
    <button @click.stop="showInfo">点我提示信息</button>
</div>

键盘事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div id="root">
    <h2>欢迎来到{{name}}</h2>
    <input type="text" placeholder="按下回车提示输入" @keyup="showInfo"/>
</div>

<script>
    Vue.config.productionTip = false  // 阻止 vue在启动时生成生产提示。
    let vm = new Vue({
        el: '#root',
        data: {
            name: '极客堂'
        },
        methods: {
            showInfo(e){
                if (e.keyCode == 13)    // 只有当按下回车时才显示内容
                    console.log(e.target.value);
            }
        }
    });
</script>

@click.prevent和@click.stop;可以连着写成@click.prevent.stop;

Vue的写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div id="root">
    <h2>欢迎来到{{name}}</h2>
    <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo"/>
</div>

<script>
    Vue.config.productionTip = false  // 阻止 vue在启动时生成生产提示。
    let vm = new Vue({
        el: '#root',
        data: {
            name: '极客堂'
        },
        methods: {
            showInfo(e){
                console.log(e.target.value);
            }
        }
    });
</script>

Vue中常见的按键别名：

• 回车 enter
• 删除 delete
• 退出 esc
• 空格 space
• Tab tab
• 上 up
• 下 down
• 左 left
• 右 right

计算属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<div id="root">
    <h2>使用计算属性实现姓名合并</h2>
    姓：<input type="text" v-model="firstName"/><br/><br/>
    名：<input type="text" v-model="lastName"/><br/><br/>
    <!-- 全名： <span>{{fullName()}}</span> -->
    全名： <span>{{computedFullName}}</span>
</div>

<script>
    Vue.config.productionTip = false  // 阻止 vue在启动时生成生产提示。
    let vm = new Vue({
        el: '#root',
        data: {
            firstName: '赵',
            lastName: '四'
        },
        methods: {
            fullName(){
                return this.firstName + ' - ' + this.lastName;
            }
        },
        computed: {

            computedFullName:{
                // Getter
                // get什么时候调用：1.初次  2.计算属性所依赖的数据发生变化时
                get(){
                    return this.firstName + ' = ' + this.lastName;
                }
            }
        }
    });
</script>

监视属性

监视属性watch

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<div id="root">
    <h2>监视属性</h2>
    <h2>今天天气很{{info}}</h2>
    <button @click="changeWeather">切换天气</button>
</div>

<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: '#root',
        data: {
            isHot: true
        },
        computed: {
            info(){
                return this.isHot ? "炎热" : "凉爽"
            }
        },
        methods: {
            changeWeather(){
                this.isHot = !this.isHot
            }
        },
        watch: {
            isHot: {
                immediate: true, // 初始化时让handler调用一下
                // handler函数在isHot发生改变的时候调用。
                handler(newValue, oldValue){
                    console.log('isHot被修改了', newValue, oldValue);
                }
            }
        }
    });
    /*
    // 监视属性的另一种写法：
    vm.$watch('isHot', {
        handler(){

        }
    })
    */
</script>

深度监视

可以使用deep: true来开启深度监视，监视对象中所有属性的变化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71