什么是vue? #

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

逐一递增 vue + components + vue-router + vuex + vue-cli

什么是库，什么是框架? #

框架是库的升级版

初始使用 # 

new Vue({
    el:'#app',
    template:'<div>我是姜文～～</div>', // 优先使用template
    data:{}
});

mvc && mvvm #

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

声明式和命令式 #

模板语法 mustache #

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

观察数据变化 # 

function notify(){
    console.log('视图更新')
}
let data = {
    name:'jw',
    age:18,
    arr:[]
}
// 重写数组的方法
let oldProtoMehtods = Array.prototype;
let proto = Object.create(oldProtoMehtods);
['push','pop','shift','unshift'].forEach(method=>{
    proto[method] = function(){
        notify();
        oldProtoMehtods[method].call(this,...arguments)
    }
})
function observer(obj){
    if(Array.isArray(obj)){
        obj.__proto__ = proto
        return;
    }
    if(typeof obj === 'object'){
        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(1);

使用proxy实现响应式变化 # 

let obj = {
    name:{name:'jw'},
    arr:['吃','喝','玩']
}
let handler = {
    get(target,key,receiver){
        if(typeof target[key] === 'object' &&  target[key] !== null){
            return new Proxy(target[key],handler);
        }
        return Reflect.get(target,key,receiver);
    },
    set(target,key,value,receiver){
        if(key === 'length') return true;
        console.log('update')
        return Reflect.set(target,key,value,receiver);
    }
}
let proxy = new Proxy(obj,handler);
proxy.name.name = 'zf';

响应式变化 #

vue实例上常见属性和方法 #

vue中的指令 #

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

v-for使用 #

属性绑定 :（v-bind） #

Class 与 Style 绑定

绑定事件 @ （v-on） #

vue的双向绑定 (v-model) # 

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

鼠标 键盘事件 #

watch & computed #

条件渲染 #

过滤器的应用 (过滤器中的this都是window) #

指令的编写 #

钩子函数中该做的事情 #

vue中的动画 #

vue中的动画就是从无到有或者从有到无产生的。有以下几个状态 transition组件的应用

.v-enter-active,.v-leave-active {
    transition: opacity 0.25s ease-out;
}
.v-enter, .v-leave-to {
    opacity: 0;
}

切换isShow的显示或者隐藏就显示出效果啦~

<button @click="toggle">toggle</button>
<transition>
    <span v-show="isShow">珠峰架构</span>
</transition>

默认的name是以v-开头，当然你可以自己指定name属性来修改前缀

使用animate.css设置动画 # 

.v-enter-active {
    animation:zoomIn  2s linear
}
.v-leave-avitve{
    animation:zoomOut 2s linear
}

直接修改激活时的样式

<transition 
    enter-active-class="zoomIn"
    leave-active-class="zoomOut"
>
    <span class="animated" v-show="isShow">珠峰架构</span>
</transition>

vue中js动画 # 

<transition 
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
>   
    <span class="animated" v-show="isShow">珠峰架构</span>
</transition>

对应的钩子有before-leave,leave,after-leave钩子函数,函数的参数为当前元素

beforeEnter(el){
    el.style.color="red"
},
enter(el,done){
    setTimeout(()=>{
        el.style.color = 'green'
    },1000);
    setTimeout(() => {
        done();
    }, 2000);
},
afterEnter(el){
    el.style.color = 'blue';
}

使用js动画库 #

https://github.com/julianshapiro/velocity

<script src="node_modules/velocity-animate/velocity.js"></script>
beforeEnter(el){
    el.style.opacity = 0;
},
enter(el,done){
    Velocity(el, {opacity: 1}, {duration: 2000, complete: done})
},
afterEnter(el){
    el.style.color = 'blue';
},
leave(el,done){
    Velocity(el, {opacity: 0}, {duration: 2000, complete: done})
}

筛选动画 # 

<div id="app">
    <input type="text" v-model="filterData">
    <transition-group  
        enter-active-class="zoomInLeft" 
        leave-active-class="zoomOutRight"
    >
        <div v-for="(l,index) in computedData" :key="l.title" class="animated">
            {{l.title}}
        </div>
    </transition-group>  
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            filterData:'',
            dataList:[
                {title:'标题1'},
                {title:'标题2'},
                {title:'标题4'},
                {title:'标题3'}
            ]
        },
        computed:{
            computedData(){
                return this.dataList.filter((item)=>{
                    return item.title.includes(this.filterData);
                })
            }
        },
    })
</script>
  • {{
    •

    slot v-for i in 5