| 标题 | Vue.js基础知识汇总 |
| 内容 | Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来。Vue.js和其他库相比是一个小而美的库，作者的主要目的是通过一个尽量简单的 API 产生可反映的数据绑定和可组合的视图组件，感觉作者的思路非常清晰。 介绍 vue.js 是用来构建web应用接口的一个库 技术上，Vue.js 重点集中在MVVM模式的ViewModel层，它连接视图和数据绑定模型通过两种方式。实际的DOM操作和输出格式被抽象的方式到指令（Directives）和过滤器（Filters） 在哲学领域内,尽量让MVVM数据绑定API尽可能简单。模块化和可组合性也是重要的设计考虑。vue不是一个全面的框架,它被设计成简单的和灵活的。你可以用它快速原型,或混合和匹配与其他库定义前端堆栈。 Vue。js的API是参考了AngularJS、KnockoutJS Ractive.js Rivets.js。尽管有相似之处,我相信Vue.js提供一个有价值能够让你在现在的一些现有框架中舍取其价值 即使你已经熟悉其中的一些术语,建议您通过以下概念的概述,因为你的这些术语的概念可能在Vue.js的下文中有所不同 概念概述 ViewModel 一个对象,同步模型和视图. 在Vue.js中,ViewModels是实例化的Vue的构造器或者是它的子类 var vm = new Vue({ /* options */ }) 这是主要的对象,你会与作为开发人员在使用Vue.js交互。更多细节请参阅Class: Vue. View 用户看到的实际HTML / DOM vm.$el // The View 当使用Vue.js时候，除了自己自定义的指令你几乎不会触碰到DOM的操作，当数据更新后视图的更新将会自动的触发，视图的更新可以很精确的到每一个testNode节点，他们也批处理和异步执行从而提供更好的性能。 Model 这是一个略微修改的Javascript对象 vm.$data // The Model 在Vue.js中，模型只是简单的Javascript对象,数据对象,你能够操控他们的属性和视图模型，观察他们的从而能获取通知后更改。Vue.js在data对象胡总用ES5的 getter/setter 把属性转化了，它允许直接操作而不需要脏检查。 data对象在适当的时候会产生突变，所以修改它与通过引用修改vm.$data是一样的效果。这也方便了多个ViewModel实例观察同一块数据。 技术细节请看Instantiation Options: data. Directives 私有的HTML属性是告诉Vue.js做一些关于DOM的处理 <div v-text="message"></div> 这里的div元素有一个v-text的指令，值是message.意思是告诉Vue.js 保持这个div节点的内容与viewMode中的message属性同步 指令可以封装任意DOM操作。例如v-attr 操作一个属性元素,v-repeat克隆基于数组的一个元素，v-on附加事件监听，我们稍后讨论. Mustache Bindings 您还可以使用mustache-style绑定,在文本和属性。他们翻译成v-text v-attr指令。例如: <div id="person-{{id}}">Hello {{name}}!</div> 虽然方便,但有几件事你需要注意的: 如果设置一个image的src属性的时候，会发送一个HTTP请求，所以当模板是第一次解析出现404，此时用v-attr比较好 当解析HTML的时候，Internet Explorer将会删除无效的内部style属性，所以我们想要支持IE绑定内联的CSS 我就总是用v-style 在v-html内部，非转义的HTML你能用三个大括号{{{像这样}}}处理，但是这样会有潜在的XSS攻击，能打开windows,所以建议是绝对安全的数据全的时候才这样做，或者通过自定义管道过滤器清理不可信的HTML Filters 在更新视图之前可以用函数来处理这个原始的数据。他们正在用一个“管道”指令或绑定: <div>{{message | capitalize}}</div> 现在在div的文本内容要更新之前，这个message的值将会通过capitalize函数处理。详细请看Filters in Depth. Components 在Vue.js,一个组件是一个简单的视图模型构造函数，通过Vue.component(ID, constructor)注册。通过一个关联的ID，可以嵌套另外的视图模型的模板的v-component指令。这种简单的机制使声明视图模型的重用和组合方式类似于Web组件,而不需要最新的浏览器或重型polyfills。通过将应用程序分解成更小的组件,其结果是一个高度解耦和可维护的代码库。更多细节,请参阅Composing ViewModels. A Quick Example <div id="demo"> <h1>{{title | uppercase}}</h1> <ul> <li v-repeat="todos" v-on="click: done = !done" > {{content}} </li> </ul> </div> var demo = new Vue({ el: '#demo', data: { title: 'todos', todos: [ { done: true, content: 'Learn JavaScript' }, { done: false, content: 'Learn vue.js' } ] } }) 粗略翻译，有错误请指出 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。