Vue.js基础知识汇总.docxVIP

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  的处理 lt;div v-text=messagegt;lt;/divgt; 这里的 div 元素有一个 v-text 的指令，值是 点的内容与 viewMode 中的 message属性同步 指令可以封装任意 DOM 操作。例如 v-attr  message.意思是告诉 Vue.js 保持这个 div 节 操作一个属性元素 ,v-repeat 克隆基于数组的 一个元素，  v-on  附加事件监听，我们稍后讨论  . Mustache Bindings 您还可以使用  mustache-style 绑定 ,在文本和属性。他们翻译成  v-text v-attr  指令。例如  : lt;div id=person-{{id}}gt;Hello {{name}}!lt;/divgt; 虽然方便 ,但有几件事你需要注意的 : 如果设置一个 image 的 src 属性的时候，会发送一个 HTTP 请求，所以当模板是第一次 解析出现 404，此时用 v-attr 比较好 当解析 HTML 的时候， Internet Explorer 将会删除无效的内部 style 属性， 所以我们想要 支持 IE 绑定内联的 CSS 我就总是用 v-style 在 v-html 内部，非转义的 HTML 你能用三个大括号 {{{ 像这样 }}} 处理，但是这样会有潜在的 XSS 攻击，能打开 windows, 所以建议是绝对安全的数据全的时候才这样做，或者通 过自定义管道过滤器清理不可信的HTML Filters 在更新视图之前可以用函数来处理这个原始的数据。 他们正在用一个