vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。
响应的数据绑定
Vue.js 的核心是一个响应的数据绑定系统，它让数据与 DOM 保持同步非常简单。
<!--html页面--> <div id="example"> hello {{name}} </div> ---------------------------------------------- //js文件 var exampleData = { name: ‘Vue.js‘ } // 创建一个 Vue 实例或 "ViewModel" // 它连接 View 与 Model var exampleVM = new Vue({ el: ‘#example‘, data: exampleData })
指令
指令 (Directives) 是特殊的带有前缀 v- 的特性。指令的值限定为绑定表达式，因此上面提到的 JavaScript 表达式及过滤器规则在这里也适用。指令的职责就是当其表达式的值改变时把某些特殊的行为应用到 DOM 上.
v-on指令用于监听 DOM 事件
<!--html页面-->
<div id="example">
<p>{{msg}}</p>
<button v-on:click="change">hello</button>
</div>
----------------------------------------------
//js文件
var vm = new Vue({
el: ‘#example‘,
data:{
msg:"first"
},
method:{
change:function(){
this.msg = "second"
},
},
})
v-bind 指令用于响应地更新 HTML 特性
<!--html页面-->
<div id="example">
<!--绑定url-->
<a v-bind:href="url"></a>
<!--绑定class-->
<div v-bind:class="classA"></div>
</div>
--------------------------------------------------------------------
//js文件
var vm = new Vue({
el:"example",
data:{
url:"http://cn.vuejs.org/",
classA:"container",
},
})
v-for指令用于渲染列表。这个指令使用特殊的语法，形式为item in items，items 是数据数组，item 是当前数组元素的别名
<!--html页面--> <ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul> -------------------------------------------- //js文件 var example1 = new Vue({ el: ‘#example-1‘, data: { items: [ { message: ‘Foo‘ }, { message: ‘Bar‘ } ] } })
v-model指令用于数据双向绑定
<!--html页面-->
<div id="example">
<span>Message is: {{ message }}</span>
<br>
<input type="text" v-model="message" placeholder="edit me">
</div>
---------------------------------------------------
//js文件
var vm = new Vue({
el:"example",
data:{
message:‘‘,
},
})
v-if条件渲染
<div id ="example">
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
<button v-on:click="changeOk">hello</div>
</div>
---------------------------------------------------
var vm = new Vue({
el:"example",
data:{
ok:true,
},
methods:{
changeOk:function(){
this.ok = false
}
}
})
指令修饰符 (Modifiers) 是以半角句号 . 开始的特殊后缀，用于表示指令应当以特殊方式绑定。
<!--解析为一个字面字符串而不是一个表达式--> <a v-bind:href.literal="/a/b/c"></a> <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"> <!-- 只有修饰符 --> <form v-on:submit.prevent></form>
先写到这里，未完待续。。。。
原文：http://www.cnblogs.com/wandiao/p/6016762.html