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

Vue的特点

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

hello Vue

<!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实例对应一个容器（一夫一妻制）

模板语法

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()

栗子：

 let obj1 = {x:1};
        let obj2 = {y:10};
        Object.defineProperty(obj2, 'x', {
            get(){
                return obj1.x;
            },
            set(value){
                    obj1.x = value;
            }
        });

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

事件的使用

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

事件修饰符

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

计算属性（computed ）

定义：要用的属性不存在，要通过已有属性计算得来
原理：底层借助了Object.defineProperty方法提供的getter和setter
get函数什么时候执行？（面试可能会问）
- 初次读取的时候会执行一次
- 当依赖的数据发生改变的时候会被再次调用
优势：与methods实现相比，内部有缓存，提高复用率，调试更加方便
备注：
- 计算属性会出现在vm上，可以直接使用
- 如果计算属性要被修改，那必须写set函数去响应修改，且要引起计算时依赖的数据发生改变

语法

    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）

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

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

值得注意的是：

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

深度监视的简写方式

使用条件：

不配置immediate和deep时即可使用

  watch: {
    msg(){
        //code
    }
}

computed和watch的区别

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

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

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

绑定class样式/style样式

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

传统方式

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

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

条件渲染

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

v-if = “表达式”

v-else-if = “表达式”

v-else = “表达式”

适用于切换频率较低的场景

特点：不展示的DOM元素直接被移除

注意：v-if和v-else-if和v-else一起使用，但要求结构不能被”打断”

v-show

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

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

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

列表渲染（很重要）

基本介绍：

v-for

用于展示列表数据

语法：v-for = “(item, index) in xxx” :key=” yyy”

可遍历：数组，对象，字符串，指定次数

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

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

跳过p35-p37以及p39

收集表单数据

内置指令

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

与插值语法的区别：
1. v-html会替换掉节点中所有内容，则不会
2. v-html可以识别html结构
另外，v-html会有安全性问题，容易导致xss（跨站点攻击）攻击

例子：盗取别人的cookie
v-cloak

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

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

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

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

跳过所在节点的编译过程

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

自定义指令

生命周期

分为四个阶段

create阶段
mount阶段
update阶段
destroy阶段

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

总结

组件化编程

关于VueComponent

单文件组件

脚手架结构

render函数

main.js里的代码

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

//创建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配置项

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')

注意事项

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

四种map方法的使用

mapActions和mapMutation同理

模块化

路由

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

多级路由

路由传参（query）

命名路由

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

路由的params参数

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