Vue常用知识点

https://wakeupmypig.github.io/jw_blog/html/Vue.js/todo.html

使用cdn

http://cdn.jsdelivr.net/vue/1.0.26/vue.min.js

通过npm安装
$ npm install vue

获取当前绑定的元素
vm.$el = document.querySelector('.app');
不能更改绑定对象

获取当前绑定的数据
vm.$data = {message:{name:1}}
更换data对象刷新视图，尽量不去更换

监控模型的变化

vm.$watch('message', function (newVal,oldVal) {
    console.log(newVal,oldVal);
});

生命周期:

生命周期方法名 用法
created 先实例化,在实例化后(检测el)
vm.$mount('#app') 手动挂载实例
beforeCompile 开始编译之前
compiled 编译完成后
ready 插入文档后
vm.$destroy() 手动销毁实例
beforeDestroy 将要销毁
destroyed 销毁实例

---------------------------------

var vm = new Vue({
    data:{
        hello:'zfpx'
    },
    created: function () {alert('实例创建完成');},
    beforeCompile: function () {alert('开始编译前')},
    compiled: function () {alert('编译完成')},
    ready: function () {alert('准备好了')},
    beforeDestroy: function () {alert('准备销毁')},
    destroyed: function () {alert("销毁")}
});
vm.$mount('#app');
vm.$destroy();

3.3 属性的计算
用于计算性属性(默认为属性的get方法)


var vm = new Vue({
    data:{
        name:'zfpx'
    },
    computed: {
        hello: function () {
            return this.name+8;
        }
    }
});
vm.$mount('#app');
属性的获取和设置


var vm = new Vue({
    data:{
        name:'zfpx'
    },
    computed: {
        hello:{
            get: function () {
                return this.name+8;
            },
            set: function (val) {
                this.name = val
            }
        }
    },
});

1.Vue中的闪烁问题
1.1 v-text绑定属性

1.2 v-cloak解决闪烁
增加样式(隐藏表达式)


[v-cloak]{
    display:none;
}
设置需要防止闪烁的dom元素上，在数据绑定后移除v-cloak属性

{{hello}}

2.v-if/v-show/v-else
2.1 v-if
v-if条件不成立移除dom元素,可以与v-else连用

hello

world

可以使用vue自带的template标签，解决多余标签问题


 

template 不会多一个DIV一样被渲染；好用

world

2.2 v-show
v-show 是简单的切换元素的 CSS 属性 display,可以与v-else连用

hello

world

不能使用template语法

2.3 v-if/v-show区别
一般来说，v‐if 有更高的切换消耗而 v‐show 有更高的初始渲染消耗。因此，如果需要频繁切换 v‐show 较好，如果在运行时条件不大可能改变 v‐if 较好


v-if当条件成立的时候会将元素加上，不成立，就会移出dom，并且内部的指令不会执行
v-show只是简单的隐藏和显示

3.v-for循环
基于源数据将元素或模版块重复


3.1 遍历对象

data:{
    data:{
        name:'zfpx',
        age:7,
    }
}
3.2 遍历数组

data:{
    data:[
        {name:'zfpx',type:['backbone']},
        {name:'zfpx1',type:['jquery','react','angularjs']},
        {name:'zfpx2',type:['nodejs','angularjs','vuejs']},
    ]
}
3.3 嵌套循环

3.4 遍历数组中相同项

var vm = new Vue({
    el:'#app',
    data:{
        data:[
            '苹果','苹果','苹果','苹果'
        ]
    }
})
如果没有唯一的键供追踪 尽量使用track-by

4.v-bind绑定动态属性

官网
var vm = new Vue({
    el:'#app',
    data:{
        src:'http://vuejs.org/images/logo.png',
        href:'http://vuejs.org'
    }
})
我们可以直接使用:号的方式进行简写,不要使用{{src}}进行设置链接

5.v-on绑定事件

sayHello

sayWorld

var vm = new Vue({
    el:'#app',
    data:{
        hello:'hello',
        world:'world'
    },
    methods:{
        sayHello(e){
            console.log(e);//无参数时会传递事件源
            alert(this.hello);
        },
        sayWorld(who,e){
            console.log(e);//有参数时需要手动传递
            alert(who+'的'+this.world);
        }
    }
});
我们可以使用@符的方式进行简写

1. v-on中的修饰符
1.1 阻止冒泡
防止子级事件触发时，触发父级的事件

   

        parent
       

child

   

给子父级增加方法


var vm = new Vue({
    el:'#app',
    methods:{
        parent: function () {
            console.log('parent');
        },
        child: function () {
            console.log('child');
        }
    }
});
1.2 自己身上触发

   

        parent
       

child

   

1.3 阻止默认事件
goBD

1.4 按键修饰符

  或

内置的修饰符


键位 修饰符含义 键位 修饰符含义 键位 修饰符含义
enter 按下回车键 up 按下上键 left 按下左键
tab 按下tab键 down 按下下键 delete 按下删除键
esc 按下ESC键 right 按下右键 space 按下空格键
1.5 自定义修饰符
Vue.directive('on').keyCodes.A = 65;
增加指令，后期会在指令篇中详细讲解如何自定义指令

2.绑定样式
很多时候我们需要的样式，要根据我们的数据进行绑定


2.1 通过{{}}方式绑定

直接取data上对象的属性

2.2 优雅的绑定方式

直接取data上对象的属性

2.3 根据boolean类型增加样式

根据数据的boolean类型增加class样式

2.4 绑定数组

增加class1,和class2两个样式

2.5 根据条件绑定样式

三元表达式判断

2.6 数组和对象混用

比较常见的增加样式用法

{{className}}和v-bind:class不要混用; class 和v-bind:class可以同时存在

6.表单元素
6.1 checkbox
获取checkbox值为当前value值,并且数据要为数组类型





{{name}}
var vm = new Vue({
    el:"#app",
    data:{
       name:[],
    }
})
6.2 radio


{{radio}}
6.3 select
单选时类型为字符串，多选时类型为数组



    A
    b
    c

{{selected}}
动态绑定数据



 
  {{a.name}}

6.4 表单元素参数特性
6.4.1 lazy
将input改变为change



{{data}}
6.4.2 debounce
延时数据改变时间



{{data}}

插件篇：

http://mint-ui.github.io/#!/zh-cn   下拉刷新