Vue核心概念及特性 (一)

时间 2020-01-04

标签 vue 核心概念特性繁體版

原文原文链接

Vue (读音 /vjuː/，相似于 view) 是一套用于构建用户界面的渐进式框架。
特色: 易用，灵活，高效渐进式框架javascript

能够随意组合须要用到的模块 vue + components + vue-router + vuex + vue-cli

一.Vue的概念和特性

1.什么是库，什么是框架?

库是将代码集合成一个产品,库是咱们调用库中的方法实现本身的功能。
框架则是为解决一类问题而开发的产品,框架是咱们在指定的位置编写好代码，框架帮咱们调用。

框架与库之间最本质区别在于控制权：you call libs, frameworks call youhtml

Vue属于框架vue

2.MVC模型 && MVVM模型

在传统的mvc中除了model和view之外的逻辑都放在了controller中，致使controller逻辑复杂难以维护,在mvvm中view和model没有直接的关系，所有经过viewModel进行交互java

Vue是MVVM模式node

3.声明式和命令式

本身写for循环就是命令式 (命令其按照本身的方式获得结果)
声明式就是利用数组的方法forEach (咱们想要的是循环，内部帮咱们去作)

二.Vue的基本使用

1.mustache语法

容许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。在使用数据前须要先声明vue-router

编写三元表达式
获取返回值
JavaScript 表达式

<div id="app">
    {{ 1+1 }}
    {{ msg == 'hello'?'yes':'no' }}
    {{ {name:1} }}
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
    el:'#app',
    data:{
        msg:'hello'
    }
})
</script>

2.响应式数据变化

Vue中使用Object.defineProperty从新将对象中的属性定义，若是是数组的话须要重写数组原型上的方法vuex

function notify() {
    console.log('视图更新')
}
let data = {
    name: 'jw',
    age: 18,
    arr: [1,2,3]
}
// 重写数组的方法
let oldProtoMehtods = Array.prototype;
let proto = Object.create(oldProtoMehtods);
['push', 'pop', 'shift', 'unshift'].forEach(method => {
    proto[method] = function (...args) {
        let inserted;
        switch (method) {
            case 'push':
            case 'unshift':
                inserted = args;
                break;
        }
        observerArray(inserted)
        notify();
        oldProtoMehtods[method].call(this, ...args)
    }
})
function observerArray(obj) { // 观察数组中的每一项
    for (let i = 0; i < obj.length; i++) {
        observer(obj[i]);
    }
}
function observer(obj) {
    if(typeof obj !== 'object'){
        return obj
    }
    if (Array.isArray(obj)) {
        obj.__proto__ = proto
        observerArray(obj);
    }else{
        for (let key in obj) {
            defineReactive(obj, key, obj[key]);
        }
    }
}
function defineReactive(obj, key, value) {
    observer(value); // 再一次循环value
    Object.defineProperty(obj, key, { // 不支持数组
        get() {
            return value;
        },
        set(val) {
            notify();
            observer(val);
            value = val;
        }
    });
}
observer(data);
data.arr.push({name:'jw'})
console.log(data.arr);

缺陷vue-cli

不能经过经过长度，索引改变数组
不能给对象新增属性
须要经过vm.$set和vm.$delete方法强制添加/删除响应式数据

3.Vue实例上的方法

vm.$el;
vm.$data;
vm.$options;
vm.$nextTick();
vm.$mount();
vm.$watch();
vm.$set();

三.Vue中的指令

在vue中指令 (Directives) 是带有 v- 前缀的特殊特性,主要的功能就是操做DOMexpress

1.v-once

<div v-once>{{state.count}} </div>

2.v-html

永远不要对用户输入使用v-html,可能会致使xss攻击数组

<div v-html="text"></div>

3.v-bind

动态绑定属性须要使用v-bind进行绑定

<img v-bind:src="src">

可使用:来简写 v-bind

4.v-for

<template v-for="(fruit,index) in fruits" >
    <li :key="`item_${index}`">{{fruit}}</li>
    <li :key="`fruit_${index}`">{{fruit}}</li>
</template>

多个元素循环时外层须要增长 template标签,须要给真实元素增长 key,并且 key不能重复，尽可能不要采用索引做为 key的值

举个key值的例子:

5.v-if/v-else/v-show

v-if能够切换DOM元素是否存在,而且v-if为false时内部指令不会被执行
v-show能够控制元素的显示及隐藏，主要控制的是元素样式

6.v-on

事件的绑定 v-on绑定事件
事件修饰符 (.stop .prevent) .capture .self .once .passive

7.v-model

双向数据绑定

<input type="text" :value="value" @input="input">
<input type="text" v-model="value">

select

<select v-model="select">
    <option 
        v-for="fruit in fruits"
        :value="fruit">
            {{fruit}}
    </option>
</select>

radio

<input type="radio" v-model="value"  value="男">
 <input type="radio" v-model="value"  value="女">

checkbox

<input type="checkbox" v-model="checks" value="游泳" >
<input type="checkbox" v-model="checks" value="健身">

修饰符应用 .number .lazy .trim

<input type="text" v-model.number="value">
<input type="text" v-model.trim="value">

四.自定义指令

全局指令和局部指令

编写一个自定义指令

钩子函数bind，inserted，update

<input type="text" v-focus.color="'red'">
    Vue.directive('focus',{
        inserted:(el,bindings)=>{
            let color = bindings.modifiers.color;
            if(color){
                el.style.boxShadow = `1px 1px 2px ${bindings.value}`
            }   
            el.focus();
        }
    });

clickoutside指令

<div v-click-outside="change">
        <input type="text"  @focus="flag=true" >
        <div v-show="flag">
            contenter
        </div>
    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                flag:false
            },
            methods:{
                change(){
                    this.flag = false
                }
            },
            directives:{
                'click-outside'(el,bindings,vnode){
                    document.addEventListener('click',(e)=>{
                        if(!el.contains(e.target,vnode)){
                            let eventName = bindings.expression;
                            vnode.context[eventName]()
                        }
                    })
                }
            }
        })
    </script>

五.Vue中的生命周期

beforeCreate 在实例初始化以后，数据观测(data observer) 和 event/watcher 事件配置以前被调用。
created 实例已经建立完成以后被调用。在这一步，实例已完成如下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。这里没有$el
beforeMount 在挂载开始以前被调用：相关的 render 函数首次被调用。
mounted el 被新建立的 vm.$el 替换，并挂载到实例上去以后调用该钩子。
beforeUpdate 数据更新时调用，发生在虚拟 DOM 从新渲染和打补丁以前。
updated 因为数据更改致使的虚拟 DOM 从新渲染和打补丁，在这以后会调用该钩子。
beforeDestroy 实例销毁以前调用。在这一步，实例仍然彻底可用。
destroyed Vue 实例销毁后调用。调用后，Vue 实例指示的全部东西都会解绑定，全部的事件监听器会被移除，全部的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

钩子函数中该作的事情

created 实例已经建立完成，由于它是最先触发的缘由能够进行一些数据，资源的请求。
mounted 实例已经挂载完成，能够进行一些DOM操做
beforeUpdate 能够在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
updated 能够执行依赖于 DOM 的操做。然而在大多数状况下，你应该避免在此期间更改状态，由于这可能会致使更新无限循环。该钩子在服务器端渲染期间不被调用。
destroyed 能够执行一些优化操做,清空定时器，解除绑定事件