前端mvvm框架vue.js（1）——初步学习

vue.js由Evan you大神开源的个人项目，借鉴于angular.js，但比angular.js更加简洁，易上手，同时提供了一个vue-cli命令行工具，几行命令快速搭建单页应用；

数据驱动组件，实现响应的数据绑定和组合的视图组件，分为3层model,view,viewmodel

mvvm分层

一，vue实例

vue.js通过构造函数Vue创建一个根实例，需要传递一个选项对象options

1，根实例

var vm =new Vue({
 /选项对象
})  

2，属性与方法

可以通过在data和methods中声明

var vm=new Vue({
   //在data中定义属性
   data:data,
  //在methods中定义方法
  methods:mehods
})

3，实例生命周期

 var vm=new Vue({
  data:{a:"实例周期"},
  methods:methods,
  created:function(){
   //this指向这个实例
   console.log(this.a);
},
//其他生命周期方法还有
  beforeCompile:function(){},
  compiled:function(){},
  ready:function(){},
  beforeDestory:function(){},
  destoryed:function(){}
})

二，数据绑定语法

1，插值

//文本插值
{{message}}
//html特性

2,绑定表达式

{{numbers+1}}
{{str,split("").reverse()}}

注意：只能绑定单个表达式，无法使用流程控制

//无效
{{if(ok){console.log("ok")}}}

3，过滤器

在表达式后添加“过滤器”，以管道符表示“|”

{{message|filter}}
//可以串联
{{message|filterA|filterB}}
//可以添加参数
{{message|filter "arg1" arg2}}
//arg1为参数，arg2为表达式，并作为第一个参数传递给过滤器函数

三，指令

vue,js中指令带有特殊的前缀v-,指令的值限定为绑定表达式，常用指令有:

• v-if(根据表达式插入或移除DOM元素)
• v-show(简单的改变DOM元素display)、
• v-bind(绑定动态的特性)、
• v-on(绑定事件)

//根据表达式show的bool值，插入或移除span元素
 

//根据表达式show的bool值，显示或隐藏span元素


//动态绑定href特性到表达式url的值，同样我们可以通过href={{url}}实现


//绑定事件，事件处理函数为clickHandler


//同时v-bind和v-on支持缩写语法:bind和:on;

四，计算属性

通过在vue,js中绑定表达式限定为一个表达式，当表达式逻辑大于一个时，这时我们可以用到计算属性

五，class和style绑定

1，class绑定对象语法

 


data:{
 isA:true;
 isB:false
}
//渲染后

2,class绑定数组语法

data:{
  class-a:"classA",
  class-b:"classB"
}
//渲染后

//还可以在数组语法中使用对象,根据isB和isC的bool值确定classB和classC是否添加至class特性中

3，对象绑定内联样式

data：{
  color:#f30,
  fontSize:16
}

data：{
  styleObj:{
    color:"#f30",
    fontSize:"16px"
    }
}

4,数组绑定方法

//data选项中数据同上

六，条件渲染

1，v-if和v-show
v-if根据条件插入和移除DOM元素，v-show根据条件显示和隐藏DOM元素；后面都用v-else指令添加一个"else"块,且必须立即跟在"v-if或v-show"后面

ok


//v-show不支持