vue心得

不是专业的前端开发,但因为E2E开发和架构设计的需要,必须对前端框架有一些了解。这两年项目前端在用vue,就记录一下vue的使用心得。

心得

component

component: vue组件,可在其中完成界面呈现(V)+逻辑处理(M+C)。也可以接收父组件传过来的props,作为公共页面使用。

一般在里引用component即可呈现该组件,像这样:

<template>
    <div id='app'>
        <layout>
            <repair-plan>repair-plan>
            <button>编辑button>
            <button>保存button>
            <button>评审button>
            <button>发布button>
        layout>
    div>
template>

rest调用

使用axios,我们的项目对axios做了一层封装。

@的含义

有几种含义:

import里的@别名,指向src目录 ;

放在事件名前,表示事件响应方法,比如input组件的@input方法能够获取input输入的值。

绑定

冒号的含义:单向绑定

相当于v-bind,例如:

<button class="table-button" :loading='exportLoading'
                            @click="exportExcel">{{ t('button.export') }}</button>

表示button组件的loading属性动态绑定exportLoading变量,exportLoading变量发生变化,按钮的呈现就会不同,即,数据流向是从model层流向view层 。

v-model:双向绑定

冒号或v-bind是model->view的单向绑定,要双向绑定,用v-model。

双向绑定的原理:其实就是“v-bind+view层绑定事件监听”。

数据绑定原理

核心是Object.defineProperty(),这个函数提供了元编程的能力,类似于python里的setattr和java里的反射。

一个例子如下:

let obj = {
    name: 'bibi',
    sex: 'male',
    age_: 18 //age_作为age的隐藏字段
};

console.log(obj.age);

Object.defineProperty(obj, 'age', {
    //访问obj.age就会触发get方法
    get() {
        console.log('age getter called')
        return obj.age_;
    },
    //设置obj.age就会触发set方法
    set(newVal) {
        console.log('age setter called');
        // 直接设置obj.age会造成死循环,所以我们存在age_隐藏字段里
        obj.age_ = newVal;
    },
    enumerable: true,
})

obj.age = 20;

console.log(obj.age);

打印结果为:

undefined
age setter called
age getter called
20

可见,Object.defineProperty能捕获一个对象的setter和getter事件。当我们修改一个对象的属性时,setter事件触发,就可以在其中做一些事情,比如更新视图。vue的v-bind机制就是这个原理(术语叫数据劫持)。angularJS的数据绑定原理与vue不同,用的是脏数据检测,感兴趣的参考这里。

数据绑定意义重大,它真正体现了数据驱动开发,控制器完全与视图分离,而不必关心视图的展现。

vue组件的内置方法

data()方法

返回待绑定的数据供v-model或v-bind使用。

created()和mounted()方法

简言之,created在模板渲染成DOM前调用,mounted则在模板渲染成DOM后调用。因此,mounted函数里是可以访问DOM树节点的,而created里则不行。

vue组件的methods属性

使用methods属性来给Vue组件设置自定义方法。

Vue对象

ref

为DOM节点加上ref属性,就可以在vue里直接访问DOM节点了,这样写:

this.$refs.xxxRef.attr

xxxRef是DOM的ref属性名。

你可能感兴趣的:(前端,vue.js,javascript)