58小说,运城学院教务处,欲望三国之独占天下
介绍
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"
class="{{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'
}
]
}
})
粗略翻译，有错误请指出
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论