Vue.js简介

Vue.js 是一个基于 MVVM 模型的 web 库。通过双向数据绑定连接View和Model层。实际的 DOM 操作被封装成 DirectivesFilters

基本定义

每个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.el
  • expression : 指令绑定的表达式,不包括参数和 filter
  • args : 参数

举个栗子。

<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。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

React基础之JSX语法

概述 JSX是React的核心组成部分,它使用XML标记的方式去直接声明界面,界面组件之间可以互相嵌套。可以理解为在JS中编写与XML类似的语言,一种定义带属性...

2155
来自专栏偏前端工程师的驿站

语义化HTML:ul、ol和dl

一、语义化元素                             1. ul标签      W3C草案: The ul element represen...

1958
来自专栏互联网软件技术

canvas实现验证码

在通常的登录界面我们都可以看到验证码,验证码的作用是检测是不是人在操作,防止机器等非人操作,防止数据库被轻而易举的攻破。

863
来自专栏AndroidTv

前端入门6-JavaScript客户端api&jQuery

作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

854
来自专栏技术博客

Knockout.Js官网学习(创建自定义绑定)

你可以创建自己的自定义绑定 – 没有必要非要使用内嵌的绑定(像click,value等)。你可以你封装复杂的逻辑或行为,自定义很容易使用和重用的绑定。例如,你可...

774
来自专栏c#开发者

Asp.net Dynamic Data之四定义字段的显示/编辑模板和自定义验证逻辑

Asp.net Dynamic Data之四定义字段的显示/编辑模板和自定义验证逻辑 Asp.net Dynamic data提供了一些字段模板有比如在Det...

3355
来自专栏开发之途

Android DataBinding 从入门到进阶

1483
来自专栏JetpropelledSnake

Vue学习笔记之Vue指令系统介绍

所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了。

814
来自专栏向治洪

React 之props属性

React 里有一个非常常用的模式就是对组件做一层抽象。组件对外公开一个简单的属性(Props)来实现功能,但内部细节可能有非常复杂的实现。 可以使用 JSX ...

1915
来自专栏搞前端的李蚊子

Vue中的$set的使用

在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去; 当我们去看vue文档的时候,会发...

38010

扫码关注云+社区