学个P的Vue

错了错了，是学个P(erfect)>的Vue

Vue的特点

  1. 组件化模式，提高代码复用率
  2. 声明式编码（无需直接操作DOM）

hello 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
<!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>Document</title>
    <script src="./vue.js"></script>
  
</head>
<body>
    <div id="root">
        <h1>hello, {{name}}</h1>
    </div>

    <script>
        Vue.config.productionTip = false;
        const x = new Vue({
            el: '#root',//用于指定vue为哪个容器服务
            data: {//用于存储数据，数据供el所指定的容器去使用
                name: 'Vue23333'
            }
        });
    </script>
</body>
</html>

注：一个vue实例对应一个容器（一夫一妻制）

模板语法

  2. v-bind：用于对标签体的属性内容进行绑定，该语法也可简写为一个冒号 :

数据绑定

  • 单向数据绑定（v-bind）

    通过vue实例中（data）设置的值将其绑定在页面

  • 双向数据绑定（v-model）

    顾名思义

注意：双向绑定一般应用于表单类别元素（如input，select）v-model: value 可简写成v-model

el和data的两种写法

关于el

  • 常规写法，写在data里

  • 使用Vue的直接原型上的$mount()方法

    vue实例.$mount(#容器)

关于data

  • 对象式
  • 函数式（后期使用组件时，必须使用函数式）

MVVM

M（Model）：对应data里面的数据

V（View）：模板（页面）

VM（ViewModel）：vue实例

数据代理

通过一个对象代理另外一个对象中属性的操作

运用方法：Object.defineProperty()

栗子：

1
2
3
4
5
6
7
8
9
10
let obj1 = {x:1};
       let obj2 = {y:10};
       Object.defineProperty(obj2, 'x', {
           get(){
               return obj1.x;
           },
           set(value){
                   obj1.x = value;
           }
       });

以上代码表示，可以通过obj2代理obj1进行属性的访问和修改

事件的使用

  1. 使用v-on: xxx或@xxx绑定事件
  2. 事件的回调需要配置在methods对象中
  3. 配置methods中的函数，尽量不要使用箭头函数，因为此时this的指向不再是vm对象而是window
  4. @click=”fun”和@click=”fun($event)”效果一致，只不过后者能够传参

事件修饰符

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

计算属性（computed ）

  1. 定义：要用的属性不存在，要通过已有属性计算得来

  2. 原理：底层借助了Object.defineProperty方法提供的getter和setter

  3. get函数什么时候执行？（面试可能会问）

    • 初次读取的时候会执行一次
    • 当依赖的数据发生改变的时候会被再次调用

  4. 优势：与methods实现相比，内部有缓存，提高复用率，调试更加方便

  5. 备注：

    • 计算属性会出现在vm上，可以直接使用
    • 如果计算属性要被修改，那必须写set函数去响应修改，且要引起计算时依赖的数据发生改变

  6. 语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const vm = new Vue({
            el: '.demo',
            data:{
                firstname: '张',
                lastname: '三'
            },
            methods:{
                fun(){
                    return this.firstname + '-' + this.lastname;
                }
            },
            computed: {
                fullname:{//计算属性fullname，需要通过firstname和lastname
                    get(){
                        return this.firstname + '-' + this.lastname;
                    }
                }
            }
            

        });

监视属性（watch）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const vm = new Vue({
    el: '#root',
    data: {
        msg: '111'
    },
    watch: {
    //第一种写法
    msg: {
        immediate: true//初始化时让handler调用一下，
        handler(newValue, oldValue){//handler在msg发生改变时便会调用,newValue表示修改后的新值
        //code
    	}
    }
}
});
//第二种写法
vm.$watch('msg',[配置对象]);

深度监视

在watch里配置deep: true

  1. Vue中的watch默认不检测对象内部值的改变
  2. 配置deep: true 可以监测对象内部值改变

值得注意的是：

  1. Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以

深度监视的简写方式

使用条件：

不配置immediate和deep时即可使用

1
2
3
4
5
  watch: {
    msg(){
        //code
    }
}

computed和watch的区别

  1. computed能完成的，watch也能完成，反之则不一定（因为watch能够完成异步操作

需要注意的是：Vue所管理的函数，最好写成普通函数，this的指向才是vm或者组件实例对象

所有不被Vue管理的函数（定时器的回调函数、ajax等），最好写成箭头函数，这样this的指向才是vm或组件实例对象

绑定class样式/style样式

需求：有些时候，我们会对class进行动态调整。比如用户点击一个按钮就能切换样式，或者取消一个样式，再或者是实现样式的叠加呈现效果

  • 传统方式

    开发者亲自调用DOM进行样式切换（命令式）

  • Vue方式

    使用单项绑定来实现，由Vue来做

条件渲染

条件条件，顾名思义就会有if，else，在Vue里面提供了这个一系列语法

  1. v-if = “表达式”
  2. v-else-if = “表达式”
  3. v-else = “表达式”
    • 适用于切换频率较低的场景
    • 特点：不展示的DOM元素直接被移除
    • 注意：v-if和v-else-if和v-else一起使用，但要求结构不能被”打断”

v-show

写法：v-show=”表达式”

适用于：切换频率较高的场景

特点：不展示的DOM元素不会被移除，仅仅是样式被隐藏

列表渲染（很重要）

基本介绍：

v-for

  1. 用于展示列表数据
  2. 语法：v-for = “(item, index) in xxx” :key=” yyy”
  3. 可遍历：数组，对象，字符串，指定次数

key的作用和原理（面试可能会问）

key是标签的唯一标识（相当于身份证）

跳过p35-p37以及p39

收集表单数据

内置指令

  1. v-text

  2. v-html

    向指定节点中渲染包含html结构的内容

    与插值语法的区别：

    1. v-html会替换掉节点中所有内容，则不会

    2. v-html可以识别html结构

    另外，v-html会有安全性问题，容易导致xss（跨站点攻击）攻击

    例子：盗取别人的cookie

  3. v-cloak

    本质是一个特殊属性，Vue实例创建完毕后并接管容器，会删掉v-cloak属性

    配合css使用可以解决网速慢时页面展示出的问题（解决方法：将带有cloak属性的标签的设置为display：none）

  4. v-once

    v-once所在节点在初次动态渲染后，就视为静态内容

    以后数据的改变不会引起v-once所在结构的更新，可用于性能优化

  5. v-pre

    跳过所在节点的编译过程

    可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

自定义指令

生命周期

分为四个阶段

  1. create阶段
  2. mount阶段
  3. update阶段
  4. destroy阶段

每个阶段都有一个beforeXXX和XXXed的钩子函数

总结

组件化编程

关于VueComponent

单文件组件

脚手架结构

render函数

main.js里的代码

1
2
3
4
5
6
7
8
9
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

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

为什么在脚手架环境下，Vue实例里面只能使用render函数而不能使用template: ``(配置项)

ref属性

props属性

mixin

plugin

案例演示

webStorage

组件自定义事件

全局事件总线

消息订阅与发布

脚手架配置代理

插槽

Vuex

原理图

搭建环境

创建文件：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
//创建vuex的store

//引入Vue
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
Vue.use(Vuex)

//准备action--用于响应组件的动作
const actions = {};
//准备mutation--用于操作数据（state）
const mutations = {};
//准备state---用于存储数据
const state = {};

//创建并导出store
export default new Vuex.Store({
    actions,
    mutations,
    state,
});

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

1
2
3
4
5
6
7
8
9
10
11
12
import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
import store from './store'
Vue.config.productionTip = false

Vue.use(Vuex);

new Vue({
  render: h => h(App),
  store,
}).$mount('#app')

注意事项

  1. 多个组件需要共享的数据是放在state对象里面的
  2. 对于数据的加工处理（逻辑代码）一般在actions里面进行
  3. 对数据最后的操作一般在mutation进行

四种map方法的使用

mapActions和mapMutation同理

模块化

路由

自个儿写一个配置路由的js文件

多级路由

路由传参（query）

命名路由

可以在每个路由配置项中添加name属性，因为如果遇到多级路由（一般四级五级以上或更多）在router-link标签内的to属性的路径长度会变得非常的长，有了name属性后只需要利用to的对象写法，加入name属性即可

路由的params参数

  1. 使用该参数时，路由配置项里面必须配置name属性
  2. 路由携带params参数时，若使用to的对象写法，则不能使用path配置项（query则可以）
  3. 需要在path里面使用【:xxx】进行属性占位

路由的props配置

router-link的replace属性

编程式路由

路由组件特有的钩子函数

  1. actived()：切换到当前路由时激活并执行
  2. deactived()：离开当前路由时失活并执行

路由守卫（权限问题）

路由器的两种工作模式

再来一次todolist