(17.06.20)Vue、简易留言板、钩子函数、防止闪屏、事件

Angular+Vue+React
    Vue性能最好,Vue最轻

Angular
    入门难，学习成本高
Vue
    简单

---

Vue
    官网:http://vuejs.org/
    中文:http://cn.vuejs.org/

    Vue.js的发展

        1.x
        2.x             √

---

Vue如何玩?

    new Vue({
        el:'元素选择器',
        data:{
            数据
        },
        methods:{
            方法
            方法中：this就是当前new出来的实例
        }
    });

事件
<button v-on:click="方法()">按钮</button>
<button @click="方法()">按钮</button>

指令:

    v-model                 指定数据
    v-for                   循环
        v-for="value in arr"
        v-for="(value,index) in arr"

        v-for="(value,key,index) in json"
    v-show                  显示

---

简易留言板

计算属性

{{reverseMessage}}

new Vue({
    el:'#app',
    data:{
        message:'hello'
    },
    computed:{
        reverseMessage(){
            return this.message.split('').reverse().join('');
        }
    }
});

---

class操作
    :class="{active:true/false}"

style操作
    :style="{width:width+'px'}"

图片
    :src=""

---

交互
    Vue本身不支持交互
    可以跟任何交互的库配合

        jquery
        axios       交互库
            不支持jsonp,只支持ajax

---

钩子函数     生命周期

    beforeCreate        创建实例之前
    created             创建实例完成
    beforeMount         挂载之间
    mounted             挂载完成
    beforeUpdate        更新之前
    updated             更新完毕
    beforeDestroy       销毁之前
    destroyed           销毁完毕

    如何销毁:
        v.$destroy()

防止闪屏

    [v-clock]{
        display: none;
    }
    <div id="div1" v-clock></div>

---

事件

    事件对象

        $event
    @click
    @contextmenu
    @keydown

    事件冒泡

        ev.cancelBubble = true;

        @click.stop = "show()"

    默认事件

        ev.preventDefualt();

        @click.prevent = "show()"

    事件冒泡和默认事件同时解决

        @click.stop.prevent = "show()"

    键盘事件

        @keydown.ctrl/enter

    自定义按键

        Vue.config.keyCodes.a = 65;
        @keydown.a = "show()"

---

模板
    {{}}
    v-text
    v-html

vue——微博留言