vue2基础

Vue.config.productionTip = false; //默认不提示

Vue2

new Vue ({

    el: “#root”,

    data: {},

    methods: {},

    computed: {},

    components: {},

    watch: {},

    beforeCreat() {},

    created() {},

    beforeMount() {},

    mounted() {},

    beforeUpdate() {},

    updated() {},

    beforeDestroy() {},

    destroyed() {}

});

插值语法：{{}}         指令语法：v-bind: （可简写为 : ）

v-bind是单向绑定，数据只能从data流向页面

v-model是双向绑定，数据可以从data流向页面，还可以从页面流向data

                   双向绑定一般应用在表单类元素上（如：input、select、radio、checkbox等）

                   V-model:value可以简写为v-model，因为v-model默认收集的就是value值。

el两种写法：（1）new Vue时配置el属性；

                            （2）先new Vue创建实例vm，随后再通过vm.$mount(“#root”)指定挂载容器。

data两种写法：（1）对象式；（2）函数式。

注意：由Vue管理的函数（如data），不要写箭头函数，一旦写了箭头函数，this指向就不是Vue实例了。

MVVM模型    M：模型（Model）：data中数据；

                      V：视图（View）：模板代码；

                      VM：视图模型（ViewModel）：Vue实例vm。

VM（ViewModel）是V（View）与M（Model）之间的纽带

data中所有的属性，最后都出现在了Vue实例vm上，vm上所有的属性及Vue原型上所有的属性，在Vue模板中都可以直接使用。一般是插值语法{{}}使用。

数据代理，通过一个对象代理另一个对象中属性的操作

Object.defineProperty(obj, key, {

        enumerable: true, //此时代表这个属性是可以枚举的

        writable: true, //代表可以重写该属性(控制属性是否被修改)

        configurable:true, //控制属性是否可以被删除 默认为false

        get() {},

        set() {}

})

Vue中的数据代理：通过Vue实例vm对象来代理data对象中属性的操作（读/写）

         好处：更加方便的操作data中的数据；

         基本原理：通过Object.defineProperty( )把对象中所有属性添加到Vue实例vm上，为每一个添加到vm上的属性，都设置getter和setter，在getter/setter内部去操作（读/写）data中对应的属性，这样实现响应式。（Vm._data === options.data = data）

Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

Vue绑定事件：v-on:event（简写@event）        默认参数@event($event)

事件修饰符：prevent（阻止默认事件）,stop（阻止事件冒泡）,

once（只触发一次）,capture（使用事件的捕获模式）,

self（只有event.target是当前操作的元素时才出发时间）,

passive（事件的默认行为立即执行，无需等待事件回调执行完毕）

计算属性computed： 通过已有属性（data中）计算而来

           底层借助了Object.defineProperty方法提供的getter和setter来实现

           初次加载时读取属性会执行一次；当依赖属性发生改变时会再被调用

       优势：与methods相比，内部有缓存机制（复用），效率更高，调试方便

       注意：计算属性最终会出现在vm上，可以直接读取，不在vm._data里

       getter：初次加载读取时执行；依赖发生变化执行，不改变的读缓存，methods无缓存，每次调用方法执行

       setter：修改计算属性所依赖的属性即可，依赖改变，计算属性自动getter改变

监视属性watch：当被监视的属性变化时，回调函数自动调用，进行相关操作

        Vue自身属性（如data,computed）默认可以深度监视，但是Vue提供的watch配置项默认不深度监视，可以watch中配置（deep: true）

       两种写法：（1）new Vue({})时传入watch配置项；

new Vue({

    watch: {

            propName: {

            immediate: true,  // true，页面刚渲染就执行handler()

            deep: true,    //开启深度监视，属性内部值改变也能触发watch

            handler(newValue, oldValue) {}

                }

        }

})

（2）vm.$watch(“propName”, {

       immediate: true,  //true，页面刚渲染就执行handler()

        deep: true,    //开启深度监视，属性内部值改变也能触发watch

       handler(newValue, oldValue) {}

})

computed & watch 区别：

           computed能完成的功能，watch都可以完成，但wacth能完成的功能computed不一定能完成，如watch能进行异步操作。

       注意：所有被Vue管理的函数最好写成普通函数，这样this才指向Vue实例对象vm或组件实例对象vc；   所有不被Vue管理的函数（如定时器的回调函数、ajax的回调函数、Promise的回调函数等），最好写成箭头函数，这样this才指向vm或vc。

样式绑定：  :class=”xxx”（xxx可以是字符串、样式对象、样式对象数组）

           :style=”xxx”（xxx是样式对象）

           :style=”[a, b]”（a,b是样式对象）数组写法

条件渲染：  v-if v-else-if v-else （适用于切换频率较低的场景，因为真实DOM会被添加或移除）

           v-show (适用于切换频率较高的场景，且真实DOM未被移除，仅仅是样式隐藏掉)

           注意：v-show不能搭配<template></template>使用，v-if能搭配使用

列表渲染：  v-for

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

           可遍历：数组、对象、字符串（用的少）、指定次数（用的少）

       key唯一标识：key是虚拟DOM对象的标识，当数据发生变化时，Vue根据新数据生成新虚拟DOM，再进行新旧虚拟DOM对比，对比规则为：（1）相同的key的新旧虚拟DOM对象进行对比，若内容有变化，则生成新真实DOM并替换页面中真实DOM，若没变则使用之前的真实DOM；（2）新虚拟DOM中有旧虚拟DOM没有的key，则直接创建新的真实DOM然后渲染到页面。

Vue监视数据的原理：

    1、Vue会监视data中所有层次的数据；

    2、如何监视对象中的数据：

       通过setter实现监视，且要在new Vue时就传入要监视的数据

       （1）对象中后追加的属性，Vue默认不做响应式处理

       （2）如需给后添加的属性做响应式，需使用如下API：

              Vue.set(propTarget, propertyName/index, value) 或

              Vm.$set(propTarget, propertyName/index, value)

    3、如何监视数组中的数据：

       通过包裹数组更新元素的方法实现，本质是做了两件事：

       （1）调用原生对应的方法对数组进行更新；

       （2）重新解析模板，进而更新页面。

    4、在Vue修改数据中的某个元素一定要用如下方法：

       （1）使用这些API：push(), pop(), shift(), unshift(), splice(), sort(), reverse()

       （2）Vue.set() 或 vm.$set()

       注意：Vue.set() 或 vm.$set() 不能给vm或vm的根数据对象添加属性

    数据劫持可以理解为Vue对data的数据进行加工，让他们都变成响应式的。

收集表单数据：

若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。

若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。

若：<input type="checkbox"/>

1、没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）

2、配置input的value属性:

（1）v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）

（2）v-model的初始值是数组，那么收集的的就是value组成的数组

备注：v-model的三个修饰符：

        lazy：失去焦点再收集数据

        number：输入字符串转为有效的数字

        trim：输入首尾空格过滤

过滤器：

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。

语法：

1、注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}

2、使用过滤器：{{ xxx | 过滤器名}}  或  v-bind:属性 = "xxx | 过滤器名"

备注：

1、过滤器也可以接收额外参数、多个过滤器也可以串联

2、并没有改变原本的数据, 是产生新的对应的数据

v-text指令：

1、作用：向其所在的节点中渲染文本内容。 (纯文本渲染，不会解析标签)

2、与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。这里有点不太灵活

v-html指令：

       1、作用：向指定节点中渲染包含html结构的内容。

       2、与插值语法的区别：

（1）v-html会替换掉节点中所有的内容，{{xx}}则不会。

（2）v-html可以识别html结构。

3、严重注意：v-html有安全性问题！！！！

（1）在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。

（2）一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

v-cloak指令（没有值）：

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

2、使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

v-once指令：

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

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

v-pre指令：

1、跳过其所在节点的编译过程。

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

自定义指令总结：

1、定义语法：

（1）局部指令：new Vue({directives:{指令名:配置对象} }) 或

new Vue({directives: {指令名:回调函数}})

（2）全局指令：Vue.directive(指令名,配置对象) 或

Vue.directive(指令名,回调函数)

2、配置对象中常用的3个回调：

（1）bind(el, binding)：指令与元素成功绑定时调用。

（2）inserted(el, binding)：指令所在元素被插入页面时调用。

（3）update(el, binding)：指令所在模板结构被重新解析时调用。

3、备注：

（1）指令定义时不加v-，但使用时要加v-；

（2）指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

生命周期：

1、又名：生命周期回调函数、生命周期函数、生命周期钩子。

2、是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。

3、生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。

4、生命周期函数中的this指向是vm 或 组件实例对象。

new Vue ({

    el: “#root”,

    data: {},

    methods: {},

    computed: {},

    components: {},

    watch: {},

    beforeCreat() {}, //此时无法通过vm访问到data中数据和methods中方法（数据代理还未开始）

    created() {},     //此时完成数据代理，可访问data、methods中属性或方法

    beforeMount() {}, //此时页面呈现的是未经Vue编译的DOM结构，所有对DOM的操作不会奏效

    mounted() {},     //此时页面呈现的是经过Vue编译的DOM，对DOM的操作有效。vue完成模版的解析并把初始的真实的dDOM元素挂载完毕就调用mounted函数, （只调用一次mounted()）

    beforeUpdate() {}, //此时数据是新的，页面还是旧的，vue还没根据新的数据去生成新的虚拟DOM，去比较旧的虚拟DOM

    updated() {},     //此时数据是新的，页面也是新的，即页面和数据保持同步

    beforeDestroy() {},   //此时仍然可以使用vm中data、methods、指令等，马上要执行销毁过程，一般在此关闭定时器，取消订阅消息，解绑自定义事件，移除watchers等收尾工作。记住一旦到了beforeDestroy或者destroyed钩子，即使你拿到数据想要更新它也不会走更新的路了(beforeUpdate,updated)

    destroyed() {}    //destroyed钩子几乎不用。Vm.$destroy()方法可以主动销毁。

});

注意template是不能作为根标签来使用的，不能去骗vue，可以用fragment(vue3新加，模仿react)