vue学习笔记

vue简介

功能：        
    - 解耦视图与数据
    - 可复用的组件
    - 前端路由
    - 状态管理
    - 虚拟DOM
使用：
〈！一自动识别最新稳定版本的 Vue . j s 一〉
<script src ＝ ” https : //unpkg.com/vue/d工 st/vue.min.js ” ＞＜／ scripp
〈！ 一指定某个具体版本的 Vue . j s 一〉
<script src= ” https : //unpkg . com/vue@2.1.6/dist/vue . min.j s ” ></ script> 

实例与数据绑定

<div id＝” app ”></div>

var app =new Vue({ 
el: document.getElementByld ( ’ app ’) ／／或者是 ’＃ app ’
data：{
    a：2    
    }
}) 
加载后通过app.$el访问该元素。
data内的属性可直接使用app.a访问

生命周期钩子

created 创建实例完成后调用，尚未挂载，$el不可用。用于初始化处理的数据。
mounted el挂载后调用，一般第一个业务逻辑。
beforeDestroy 实例销毁之前调用。用于解绑一些使用addEventListener监听事件

插值与表达式

{{}}数据双向绑定
v-html指令 输出html而不是纯文本。
v-pre 指令 跳过元素和子元素编译过程，不处理{{}}、指令等等
{{number I 10 }}    {{ isOK ？ ’ 确定 ’：’ 取消 ’ ｝｝ {{ text . split ( ’,’ ) . reverse () . j o 工 n （ ’，’） ｝ 表达式

过滤器

<div id=” app” >
{ { date | formatDate}}
</div> 
<script> 
／／在月份、日期、小时等小于 10 时前面补 0
var padDate = function (value ) { 
    return value < 10 ？ ’ 。 ， ＋ val ue : value ; 
}
var app =new Vue({ 
    el : ’ #app ’ , 
    data: { 
    date : new Date() 

    filters : { 
        formatDate : function (value) { ／／这里的 value 就是需要过滤的数据
        var d ate= new Date(value); 
        var year= date . getFullYear() ; 
        var month= padDate(date.getMonth() + 1) ; 
        var day= padDate(date . getDate()); 
        var hours= padDate(date . getHours()); 
        var minutes = padDate (date .getMinutes ()); 
        var seconds = padDate (date .getSeconds ()); 
        ／／将整理好的数据返回出去
        return year + ’-’ + month +’-’ + day + ” + hours ＋ ’：’ ＋ minutes
        +’: ’ + seconds ; 
    mounted : function () { 
    var this = this ; ／／声明一个变量指向 Vue 实例 this ，保证作用域一致
    this . timer= setinterval(function() { 
    this.date= new Date(); ／／修改数据 date
    } ' 1000) ; 
    beforeDestroy: function () { 
    if (this.timer) { 

    }) 
</script>     

指令

##v-if 
<div id="app">
    <p v-if="show">if show 显示</p>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            show :true
        }
    });
</script>
##v-bind //绑定属性
<div id="app">
    <a v-bind:href="url">链接</a>
    <img v-bind:src="url">链接</img>
    //<a :href="url">链接</a> 简写
     //<img :src="url">链接</img>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            url : ‘http://www.github.com’，
            imgUrl：‘http://xxxx.com/img.png’
        }
    });
</script>
##v-on //绑定事件
<div id="app">
    <p v-if=“show”>链接</a>
    <img v-on:src="url">链接</img>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            show : false，
            imgUrl：‘http://xxxx.com/img.png’
        }
    });
</script>

计算属性

定义在VUE实例的computed 选项中。
是一个类似于视图的虚拟属性。可在其中定义setting getting方法来访问或者更新源数据，相应源属性更新计算属性也会更新。
计算属性也常用于clas的动态更新，以及内联样式。
在自定义组件中常用于动态传递props。
计算属性还可以依赖其他计算属性更可以跨VUE实例依赖。

class与style动态绑定

##绑定对象动态class渲染
<div id="app">
    <div ：class=“{‘active’：isActive，‘error’：isError}”></div>
</div>
<script>
    var app= new Vue({
        el:'#app',
        data:{
            isActive:true，
            isError：false
        }
    })
</script>
##绑定计算属性或者methods
：class=“classes”
computed：{
    classes：function（）{
        return {
            active：this。isActive == true "active": ""
        }
    }
}

##绑定数组
：class="[activeCls,errorCls]"
data:{
    activeCls:"active",
    errorCls:"error"
}
##数组三元表达式
：class ="[isActive ? activeCls:'',errorCls]"
data:{
    isActive : true,
    activeCls:"active",
    errorCls:"error"
}
##组件中使用时只能应用于第一次，组件内部包含子元素时用：props传递应用。
##绑定内联样式
：style='{‘color’：color，‘fontSize’: fontSize+'px'}'
data: {
    'color':red,
    'fontSize' : 14
}
##样式绑定数组
：style：[styleA,styleB]

基本指令

v-cloak 界面加载未编译时不展示
v-once 只渲染一次
v-if v-else-if v-else 条件渲染
v-show 与v-if 基本一致v-show修改元素的display属性，且不能在<template>使用，v-if销毁元素开销大，频繁切换时应用show
v-for 列表渲染指令v-for ="(book,index) in books"迭代对象v-for=“（key，value，index） in object”迭代数字v-for=‘n in 10’

方法与事件

@click=“counter++”
##修饰符
@click.stop=“handlerClick” == event.preventDefault()阻止单击事件冒泡
@submit.prevent="handlerSubmit" 提交事件不再重载
@click.stop.prevent 修饰符串联
@submit.prevent 可以只有修饰符
@click.capture='handlerCapture' 使用事件捕获模式
@click.self 元素本身产生的事件。
@click.once 只触发一次
##keyUp修饰符
@keyUp.13 //
Vue.config.keyCodes.f1=112;//全局定义f1为112
@keyUp.f1
.enter
.tab    
.delete
.esc
.space
.up
.down
.left
.right
按键修饰符组合使用也可与鼠标配合使用
.ctrl
.alt
.shift
.meta（Mac Command键 win win键）

v-model 表单绑定

v-modle="text"
data:{
    text:""
}
v-model 元素只依赖绑定数据，中文输入法拼音阶段不更新数据，可用@input

组件

基本用法：
Vue.component("my-component",{
                template:"<div>全局组件内容</div>"    
            });    

var app = new Vue({
    el:'#app',
    components:{
        'my-component':{
            template:"<div>局部注册组件</div>"    
        }
    }
});
##共享data数据
var data=0
Vue.component("my-component",{
                template:"<div>全局组件内容</div>"，    
                data： function（）{
                    return data；
                }
            });    
##不共享data数据
//var data=0
Vue.component("my-component",{
                template:"<div>全局组件内容</div>"，    
                data： function（）{
                    return {data：0}；
                }
            });    


##组件通讯props
基本用法
//直接使用props传递仅字符串，数组对象等应使用绑定对象：message
<my-component message="父组件数据"></my-component>
<my-component ：message="绑定父组件数据，子组件实时联动"></my-component>
Vue.component('my-component',{
                props:['message'],
                template:'<div>{{message}}</div>'
            });    

##组件传入数据校验
Vue.component('my-component',{
                props:{
                    propA：{
                        type：Boolean，default：true,required:true
                    }，
                    propB：Number，
                    propC：[Number,String,Array],
                    propD:{
                        validator:function(value){return value >10；}                            
                    }
                },
                template:'<div>{{message}}</div>'
            });    
##组件通信自定义事件
父子间组件事件通讯
子组件触发 ：this.$emit("eventName",this.dataname);
父组件 @eventName=fun1 
子组件触发 ：this.$emit("input",this.dataname);
父组件： v-model
非父子组件事件通讯
$dispatch 下=>上级 定义在Vue 对象的events中接受
    this.$dispatch('on-message',msg);
events:{
    on-message:function(msg){
        this.message=msg;
    }
}
$broadcast 上=>下级 
与上相同
##slot分发,具名slot
组件使用<slot></slot>标签
<div id = 'app'>
    <child-component>
        <p slot=“head’>分发的内容，替换name=head 的slot</p>
        <p>更多分发的内容</p>
    </child-component>
</div>
<script>
    Vue.component('child-component',{template:'\
                <div>\
                    <slot>\
                        <p>默认内容</p>
                    <\slot>    \    
                </div>\
                    //具名slot
                <slot name="head"></slot>
                '});
    var app= new Vue({
        el:"#app"
    });
</script>
##作用域卡槽（slot）
<div id='app'>
    <my-list :books="books">
        <template slt=='book' scope="props">
            <li>{{props.bookName}}</li>
        </template>
    </my-list>
</div>
<script>
    Vue.component('my-list',{
                    props:{
                        books:{
                            type:Array,default:function(){ return [];}
                        }    
                    },
                    template:"\

                        <ul>\
                            <slot name='book' v-for="book in books" :book-name="book.name"></slot>\
                        <\ul>\    
                    "  

                    });
    var app= new Vue({
        el:'#app',
        data:{
            books:[
                    {name:'vue.js实战'},
                ]
            }
    });


    </script>
##动态组件
<component is="comX"></component>
var app=new Vue（{
    el：“#app”，
    data：{
        comX：“comA”，    
    }
}）