vue.js 数据替换_vue.js 常用语法总结（一）

概述

2016年已经结束了。你是否会思考一下，自己在过去的一年里是否错过一些重要的东西？不用担心，我们正在回顾那些流行的趋势。

通过比较过去12个月里Github所增加的star数，我们利用bestof.js.org分析所涉及的项目技术，发现2016最流行项目有以下这些：

图片

通过比较去年最火的10个项目，你可以总览2016的web前端技术发展，会发现：

Vue.js在去年获得了超过25000个star，这意味着每天有72个star，超过了包含React以及Angular在内的其它任何框架。

但是，相信大多数开始接触Vue.js的学习者和笔者一样，面对Vue.js如此多的API方法头晕目，所以笔者为大家整理了一下Vue.js的属性与方法，

方便大家回顾(目前是第一部分的內容，下篇會將后継的補充完善)！

一、起步

1、v-model(绑定数据)

2、v-for(循环)

3、v-on(绑定事件)

4、data(数据)

5、methods(方法)

6、$index(索引)

二、概述

1、data(绑定 DOM 文本到数据)

2、v-if(不满足条件的话则不会出现在dom中)

3、v-show(不满足条件，则样式会设置成隐藏 display:none;)

4、组件

eg:

var vm2=new Vue({

el:"#app2",

data:data2

});

三、Vue实例

1、构造器：Vue.extend

2、数据属性：vm.a

3、实例属性和方法：

1)vm.$el

2)vm.$data

3)vm.$watch

4)实例生命周期

eg:

var vm4 = new Vue({

data: {

a: 1

},

beforeCreate:function(){

//创建前

},

created: function(){

console.log('a is: ' + this.a); // `this` 指向 vm 实例

},

beforeMount:function(){

//加载前

},

mounted:function(){

//加载后

},

beforeUpdate:function(){

//更新前

},

updated:function(){

//更新后

},

beforeDestroy:function(){

//销毁前

},

destroyed:function() {

//销毁后

}

});

四、数据绑定语法

1、文本插值：

{ {msg}}

2、单次绑定：

v-once { {msg}}

3、纯HTML：

v-html

4、绑定表达式：

{ {number+1}}

5、过滤器：

{ { message | filterA | filterB }}、{ { message | filterA 'arg1' arg2 }}

6、指令：

Hello!

带参数的指令：

带修饰符的指令：

指令缩写：

->

Button -> Button

->

五、Vue实例

1、构造器：

var data = { a: 1 };

var vm6 = new Vue({ //每个 Vue.js 应用的起步都是通过构造函数 Vue 创建一个 Vue 的根实例

el: '#example',

data: data,

beforeCreate:function(){}, //创建前

created: function(){ //创建后

console.log('a is: ' + this.a); //`this` 指向 vm 实例

},

beforeMount:function(){}, //加载前

mounted:function(){}, //加载后

beforeUpdate:function(){}, //更新前

updated:function(){}, //更新后

beforeDestroy:function(){}, //销毁前

destroyed:function() {} //销毁后

});

2、扩展Vue构造器，从而用预定义选项创建可复用的组件构造器：

var MyComponent = Vue.extend({

//扩展选项

});

var myComponentInstance = new MyComponent(); //所有的 `MyComponent` 实例都将以预定义的扩展选项被创建

3、属性和方法

console.log( vm6.a === data.a ); //true

//设置属性也会影响到原始数据