前端学习(三十八）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+'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组件
组件         Component
---------------------------------------------
    定义组件
        公共的组件
        Vue.component('组件的名字',{
            template:'模板',
            data(){
                return {
                    数据
                };
            }
        });
        私有的组件
        new Vue({
            components:{
                '组件的名字':{
                    template:'模板',
                }
            }
        });
    使用组件
        <组件的名字></组件的名字>

template一定要有一个根元素
组件写在template中可读性差
    <template id=""></template>

    <script type="x-template" id=""></script>


==============================================
组件之间数据通信
    父级给子级数据
    <test :aaa="xxx"></test>
    Vue.component('test',{
        template:'',
        props:['aaa']
        或者
        props:{
            aaa:String
        }
    });

    子级给父级数据
=============================================
Vuex
    http://vuex.vuejs.org/
============================================
Vue             filter         过滤器
============================================
路由        ***
    http://router.vuejs.org/

============================================
vue-cli         脚手架
    # 全局安装 vue-cli
    $ npm install --global vue-cli
    # 创建一个基于 webpack 模板的新项目
    $ vue init webpack my-project
    # 安装依赖，走你
    $ cd my-project
    $ npm install
    $ npm run dev


    vue init webpack 项目名
    vue init webpack-simple 项目名         √
=========================================
引入静态样式资源需要：
    style-loader         
    css-loader
    下载:
    npm install style-loader css-loader --save-dev

    配置:
        webpack.config.js
        {
            test: /.css$/,
            loader: ['style-loader','css-loader']
        }
==================================================
axios                 2.x推荐
vue-resource         1.x推荐
    引入本地图片
        require(url);