本帖最后由 ecoolper 于 2017-1-12 22:57 编辑
Vue(读作 /vju:/,跟 view 同音)是一个用于构建用户界面的渐进式框架。与其它庞大的框架不同,Vue 的设计完全就是为了让开发者可以增量式使用。Vue 的核心库专注于视图层,上手简单,开发者可以很容易地将它集成到其它库或者已有的项目中。另一方面,Vue 如果结合现代化的工具以及支持库一起使用,完全有能力支撑复杂的单页应用 2.和Knockout比较(X5集成的Knockout) Knockout 是 MVVM 和依赖跟踪的先驱,它的响应式系统和 Vue 十分相似。考虑到它提供的功能,Knockout 的浏览器支持很的出色,支持 IE6!而 Vue 则只支持 IE9+。 和vue比较,它的组件系统缺少一整套生命周期钩子,传递子组件的接口相对于 Vue 来说也非常笨重,即使它经常会被用到。 在 API 设计上两者也有一些哲学上的差异,你可以在下面这个简单 todo 列表的示例代码里看到这些差异。虽然有点主观,但很多人都认为 Vue 的 API 要更简单优雅 3.Xmlns问题 Vue用有类似这样的写法:v-bind:title,需要在添加xmlns,可以这样添加xmlns:v-bind="http://vue.sike.io/" xmlns:v-on="http://vue.sike.io/"
4.Vue.js 的核心系统,让你可以用直观的模版语法,声明式地渲染数据
- var app = new Vue({
- el : '#' + this.getIDByXID("app"),
- data : {
- message : 'Hello Vue.js!'
- }
- });
复制代码- <div xid="app">{{ message }}</div>
复制代码
5.在 v-for 块里,我们可以访问父作用域的属性。v-for 也支持可选的第二参数,它的值是当前数组项的索引
- var example2 = new Vue({
- el : '#example-2',
- data : {
- parentMessage : '父作用域',
- items : [ {
- message : '苹果'
- }, {
- message : '香蕉'
- } ]
- }
- });
复制代码- <ul id="example-2">
- <li v-for="(item, index) in items">{{ parentMessage }} - {{ index }} - {{ item.message }}</li>
- </ul>
复制代码
6.除了通过文本插值的方式,我们也可以像这样绑定元素属性
- var app2 = new Vue({
- el : '#' + this.getIDByXID("app-2"),
- data : {
- message : '加载这个页面的时间是:' + new Date()
- }
- });
复制代码- <span xid="span6"><![CDATA[除了通过文本插值的方式,我们也可以像这样绑定元素属性:]]></span>
复制代码7.要显示或隐藏一个元素也是很简单的 - var app3 = new Vue({
- el : '#' + this.getIDByXID("app-3"),
- data : {
- seen : true
- }
- });
- this.app3 = app3;
复制代码- <div xid="app-3">
- <p v-if="seen">你现在能看到这个元素</p>
- </div>
复制代码
8.还有好几个别的指令,每一个都有特殊的功能。例如,v-for 指令可以将数组显示成一个列表
- var app4 = new Vue({
- el : '#' + this.getIDByXID("app-4"),
- data : {
- todos : [ {
- text : '学习 JavaScript'
- }, {
- text : '学习 Vue'
- }, {
- text : '写一个很棒的应用'
- } ]
- }
- })
复制代码- <div xid="app-4">
- <ol>
- <li v-for="todo in todos">{{ todo.text }}</li>
- </ol>
- </div>
复制代码
9.要让用户跟你的应用交互,我们可以使用 v-on 指令来添加事件侦听器,它们会调用 Vue 实例的方法
- var app5 = new Vue({
- el : '#' + this.getIDByXID("app-5"),
- data : {
- message : 'Hello Vue.js!'
- },
- methods : {
- reverseMessage : function() {
- this.message = this.message.split('').reverse().join('')
- }
- }
- });
复制代码- <div xid="app-5">
- <p>{{ message }}</p>
- <button v-on:click="reverseMessage">将信息逆序打印</button>
- </div>
复制代码
10.Vue 还提供了 v-model 指令,它可以轻松地在输入控件和应用状态之间创造一个双向绑定
- var app6 = new Vue({
- el : '#' + this.getIDByXID("app-6"),
- data : {
- message : 'Hello Vue!'
- }
- });
复制代码- <div class="col" xid="app-6">
- <p>{{ message }}</p>
- <input v-model="message"/>
- </div>
复制代码
|