Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层，可以很容易的和其他库整合。代码压缩后只有24kb。
可以去 这里下载 。自己整理了一个Vue.js的demo， https://github.com/chenhao-ch/demo-vue
快速入门
以下代码是Vue.js最简单的例子， 当input中的内容变化时，p节点的内容会跟着变化。
<!-- html --> <div> <p>{{message}}</p> <input v-model="message"> </div> new Vue({ el: '#demo', data: { message: 'Hello Vue.js!' } })
语法介绍
数据绑定
数据绑定就是指将js中的变量自动更新到html中。如下代码, message的默认值是“Hello Vue.js!”, 那么当页面启动时，html中的默认值会被设置成“Hello Vue.js”
<!-- html --> <div> <p>{{message}}</p> <input v-model="message"> </div> new Vue({ el: '#demo', data: { message: 'Hello Vue.js!' } })
如果要输出原生的html，可以使用三个大括号来实现
<p>{{{messageHtml}}}</p>
也可以做表达式的绑定
<div>{{length - 1}}</div>
<div>{{isShow ? 'block' : 'none'}}</div>
过滤器
表达式后面可以添加过滤器，对输出的数据进行过滤。
<div>{{ message | capitalize }}</div>
自定义过滤器
Vue.js运行自己定义过滤器。比如:
Vue.filter('wrap', function (value, begin, end) { return begin + value + end; }) <!-- 'vue' => 'before vue after' --> <span>{{ message | wrap 'before' 'after' }}</span>
指令
指令是特殊的带有前缀v-的特性。当表达式的值发生变化时，响应应用特定的行为到DOM。
<!-- 当greeting为true时，才显示p节点 --> <p v-if="greeting">hello</p> <!-- 绑定href属性为js中url的值 --> <a v-bind:href="url"></a> <!-- 绑定事件，btnClick是js方法 --> <button v-on:click="btnClick"></button>
bind,on指令可以进行缩写
<a v-bind:href="url"></a> <a :href="url"></a> <button v-on:click="btnClick"></button> <button @click="btnClick"></button>
自定义指令
Vue.directive('demo', { bind: function () { // 准备工作 // 例如，添加事件处理器或只需要运行一次的高耗任务 }, update: function (newValue, oldValue) { // 值更新时的工作 // 也会以初始值为参数调用一次 }, unbind: function () { // 清理工作 // 例如，删除 bind() 添加的事件监听器 } })
html模板
Vue.js支持对js对象进行判断(if), 循环(for)输出。类似于前端模板。
<!-- 判断，如果ok为true,则显示yes, 如果为false, 显示no --> <h1 v-if="ok">Yes</h1> <h1 v-else>No</h1> <!-- 类似于v-if, v-if是是否加节点， v-show是display是否为none --> <h1 v-show="ok">Hello!</h1> <!-- 循环， 对items属性进行循环。 track-by指item的是否重复，对重复的进行服用 --> <!-- 循环中， $index表示数组第n个元素; $key表示对象的key --> <ul> <li v-for="item in items" track-by="_uid"> {{ $index }} : {{ item.message }} </li> </ul> var example1 = new Vue({ el: '#example-1', data: { items: [ {_uid: '1', message: 'Foo' }, {_uid: '2', message: 'Bar' } ] } })
样式绑定
样式也可以根据js中的变量来动态确定。
<!-- isA 为true时， class多一个class-a --> <div v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div> <!-- classA, classB 两个变量的值设置成class --> <div v-bind:class="[classA, classB]"> <!-- 绑定style, 自动添加前缀，styleObject里面是style键值对 --> <div v-bind:style="styleObject"></div>
事件绑定
可以使用v-on指令来监听DOM事件。
<div> <button v-on:click="say('hi', $event)">Say Hi</button> <button v-on:click="say('what', $event)">Say What</button> </div> new Vue({ el: '#example-2', methods: { say: function (msg, event) { alert(msg); event.preventDefault(); } } })
常见的阻止冒泡，禁止默认行为等event方法可以通过修饰符来快速处理。
<!-- 禁止冒泡 --> <a v-on:click.stop='do'></a> <!-- 禁止冒泡和默认行为 --> <a @click.stop.prevent="do"></a>
对特殊按键生效也可以使用修饰符