tinyVue(version:0.1.0)---支持computed属性、watch监控，自定义指

Coly 发布于2019-08-20 12:23 / 2515人阅读

摘要：包含一个比较完整的基本项目，打包测试代码校验源码分析特性双向绑定计算属性事件支持监测生命周期函数自定义指令根节点选择器或是根节点元素。

re-vue

rewrite vue.js.

包含一个比较完整的基本项目，webpack打包、mocha测试、eslint代码校验.

online demo

源码分析:https://github.com/xiaofuzi/deep-in-vue

特性

双向绑定

计算属性

事件支持

watch监测

生命周期函数

自定义指令

Usage

example:

var mvvm;
var opts = {
    el: "#app",
    data: {
        isShow: false,
        counter: 1,
        hello: "ahahah!",
        info: {
            age: 18
        },
        person: {
            weight: 20,
            height: 170
        }
    },
    computed: {
        wellcome () {
            return {text: this.hello + "---" + this.info.age};
        }
    },
    methods: {
        add: function () {
            this.counter += 1;
            this.info.age += 1;
        },
        toggle: function () {
            this.isShow = !this.isShow;                    
        }
    },
    watch: {
        counter (val) {
            console.log("counter: ", val);
        },
        info (info) {
            console.log("info: ", info);
        },
        "info.age" () {

        },
        wellcome () {
            console.log("wellcome: ", this.wellcome);
        }
    },
    ready () {
        let self = this;
        self.hello = "Ready, go!";
        
        setTimeout(function () {
            self.hello = "Done!";
        }, 1000)
    }
}

TinyVue.$directive("visible", function (value) {
    this.el.style.visibility = value ? "visible" : "hidden";
})
mvvm = new TinyVue(opts);

Type: String | Node

根节点选择器或是根节点dom元素。

data

Type: Object

初始化响应式数据模型

computed

Type: Object

计算属性，每一个元素对应一个函数

注：

* computed属性依赖于data中的响应式数据
* computed属性可依赖computed属性
* computed禁止赋值操作

methods

Type: Object
每一个元素对应一个函数，支持响应式替换

watch

Type: Object

监测对象，监测对应的响应式数据，当数据发生更改时执行回调.

$watch

Type: Function
监测某一数据的响应式变化

如：

var vm = new TinyVue({
    data: {
        info: {
            age: 18
        }
    }
});
vm.$watch("info", function (info) {
    
});

vm.$watch("info.age", function (age) {
    
})

$directive

Type: Function

自定义指令

如：

vm.$directive("text", function (text) {
    this.el.textContent = text;
});

beforeCompiler

生命周期函数，编译前执行

ready

生命周期函数，渲染完毕后执行

Install

npm install tiny-vue --save

GPU云服务器云服务器自定义属性值 dom自定义属性新版自定义监控自定义监控页面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80956.html

从 VantComponent 谈小程序维护

摘要：不多废话，先说结论小程序组件写法这里就不再介绍。在官方文档中，我们可以看到使用构造器构造页面事实上，小程序的页面也可以视为自定义组件。经过一番测试，得出结果为为了简便。毕竟官方标准，不用担心其他一系列后续问题。在开发小程序的时候，我们总是期望用以往的技术规范和语法特点来书写当前的小程序，所以才会有各色的小程序框架，例如 mpvue、taro 等这些编译型框架。当然这些框架本身对于新开...

worldligang 2019-08-23 17:10 评论0 收藏0
vue学习笔记（二）

摘要：供用户在相应的阶段对其进行操作。我们像下面这样使用这个指令大多数情况下，我们只需要使用与钩子函数。里提供了函数的简写形式钩子函数有两个常用的参数和。其他用法与全局自定义指令一致。一、vue生命周期 vue实例从创建到销毁的过程，称为生命周期，共有八个阶段。这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。 beforeCreate(){ //组件实例刚...

klivitamJ 2019-08-30 13:48 评论0 收藏0
vue学习笔记（二）

摘要：供用户在相应的阶段对其进行操作。我们像下面这样使用这个指令大多数情况下，我们只需要使用与钩子函数。里提供了函数的简写形式钩子函数有两个常用的参数和。其他用法与全局自定义指令一致。一、vue生命周期 vue实例从创建到销毁的过程，称为生命周期，共有八个阶段。这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。 beforeCreate(){ //组件实例刚...

Pines_Cheng 2019-08-21 17:08 评论0 收藏0
vue学习笔记（二）

摘要：供用户在相应的阶段对其进行操作。我们像下面这样使用这个指令大多数情况下，我们只需要使用与钩子函数。里提供了函数的简写形式钩子函数有两个常用的参数和。其他用法与全局自定义指令一致。一、vue生命周期 vue实例从创建到销毁的过程，称为生命周期，共有八个阶段。这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。 beforeCreate(){ //组件实例刚...

ideaa 2019-08-01 17:48 评论0 收藏0
vue响应式原理

摘要：响应式原理判断该实例是否存在进行调用相应的初始化函数与主要工作是调用给属性分别挂载触发该钩子时，会将当前属性的实例推入当前的也就是当前的中即它订阅的依赖，下文会讲到。 vue响应式原理 initState new Vue() => _init() => initState: function initState (vm: Component) { vm._watchers = []...

CoderBear 2019-08-23 11:53 评论0 收藏0