Vue.js简介
Vue.js 是一个基于 MVVM 模型的 web 库。通过双向数据绑定连接View和Model层。实际的 DOM 操作被封装成 Directives 和 Filters。
基本定义
每个Vue对象的实例是一个ViewModel。创建方式：
var vue = new Vue({
el: view,
data: model
});其中 vue.$el用于管理 View 层上的 DOM 。而 vue.$data 用于管理 Model 层的数据，可以通过 vue.$data.property 访问 Model 层数据，也可以直接 vue.property 访问。
Hello World 入门
<div id="example">
<h1>{{ title }}</h1>
<ul>
<li v-repeat='todo:todoList'>{{ todo | uppercase }}</li>
</ul>
</div>
// 对应 js
var demo = new Vue({
el: '#example',
data: {
title: 'todo list',
todoList: ['do work', 'read book', 'shopping']
}
});从上面的例子可以看出：
- 模版替换使用的是
{{ variable }} - Directives 格式是
v-xxx，如上 v-repeat 。 - Filtrs 格式是
{{ variable | filter }}，如上 uppercase
事件
在 DOM 节点上通过 v-on 绑定处理函数（可以是表达式）。函数的第一个参数是 DOM Event 对象，该对象附带 targetVM 指向 DOM 对应的 ViewModel。
<div id="example" v-on="click : clickHandler"></div>
var vue = new Vue({
el: '#example',
data: {},
methods: {
clickHandler: function(e){
console.log(e.targetVM); // 指向vue对象，可以理解为this。
}
}
});自定义指令
内置的指令不够用怎么办？想自定义数据变化对 DOM 的影响怎么破？ Vue.js 允许自定义全局指令，格式：
Vue.directive(id, {
bind: function(){
// 仅在初始化绑定元素时调用
},
update: function(newVal, oldVal){
// 初始化时调用一次，以后每次数据变化，就被调用
},
unbind: function(){
// 仅在指令解绑时被调用
}
});同时，在指令函数中，提供了一些 this 上下文的公开属性（这里列举了几个常用的）：
el: 访问绑定的 DOM 元素，提供 View 层访问。vm: 访问指令对应的上下文，ViewModel对象，this.vm.$el = this.elexpression: 指令绑定的表达式，不包括参数和 filterargs: 参数
举个栗子。
<div id="example" v-demo="args: message" v-on="click: onClick"></div>
Vue.directive('demo', {
acceptStatement: true,
bind: function(){
this.el.style.cssText = 'color: red; background: #666;';
},
update: function(newVal, oldVal){
this.el = 'name = ' + this.name + '<br/>' +
'arg = ' + this.arg + '<br/>' +
'expression= ' + this.expression+ '<br/>';
console.log(this.vm.$data);
console.log(this.el === this.vm.$el);
}
});
var demo = new Vue({
el: '#example',
data: {
message: 'hello world!'
},
methods: {
onClick: function(){
// custom directive update will be called.
this.$data.message = 'hahaha!';
}
}
});自定义过滤器
Vue.js 允许使用全局函数 Vue.filter() 定义过滤器，将 Model 数据输出到 View 层之前进行数据转化。
Vue.filter(id, function(){});双向过滤器允许 View 层数据（ input 元素）变回写到 Model 层之前，进行转化，定义方式如下：
Vue.filter(id, {
read: function(val){},
write: function(newVal, oldVal){}
});举个栗子：
<div id="example">
<p>{{ message }}</p>
<input type='text' v-model="message | twoWays"></div>
</div>
Vue.filter('twoWays', {
read: function(val){
return 'read ' + val;
},
write: function(newVal, oldVal){
console.log(newVal, oldVal);
return ov + ' write';
}
});
var demo = new Vue({
el: '#example',
data: {
message: 'hello'
}
});总结
Vue.js 提供的核心是 MVVM 中的VM，确保视图和数据的一致性。同时，借鉴了 Angular 中的 Directive 和 Filter 的概念，但是却简化了API。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录