Vue使用watch监听一个对象中的属性

问题描述

Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动,触发相应的方法,比如

queryData: {
    name: '',
    creator: '',
    selectedStatus: '',
    time: [],
},

现在我需要监听这个queryData,我可以这样做:

watch: {
    queryData: {
        handler: function() {
            //do something
        },
        deep: true
    }
}

里面的deep设为了true,这样的话,如果修改了这个queryData中的任何一个属性,都会执行handler这个方法。不过其实这样开销是蛮大的,尤其是对象里面结构嵌套过深的时候。而且有时候我们就想关心这个对象中的某个属性,比如name,这个时候可以这样

watch: {
    'queryData.name': {
        handler: function() {
           //do something
        },
    }
}

或者还可以这样巧用计算属性

computed: {
    getName: function() {
    	return this.queryData.name
    }
}
watch: {
    getName: {
        handler: function() {
            //do something
        },
    }
}

 

分类至 Vue
0条评论

VSCode断点调试Vue项目

1、VSCode安装插件:Debugger for Chrome,并确保你的电脑上安装了 Chrome 浏览器;

2、VSCode菜单“调试-->打开配置”(即 .vscode\launch.json 文件),把 webRoot 配置项改成 "${workspaceFolder}/src"。注,原来的值是 "${workspaceFolder}",因为Vue项目源代码是在 src 目录,所以要改。我的配置内容如下:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src"
        }
    ]
}

3、编辑Vue的配置文件 vue.config.js (如果没有则自己新建一个),添加 configureWebpack 的配置项 devtool ,值为 "source-map" 。我的 vue.config.js 内容如下:

module.exports = {
    publicPath: "/",
    outputDir: "dist",
    assetsDir: "static",
    lintOnSave: process.env.NODE_ENV === "development",
    productionSourceMap: false,
    devServer: {
        port: 8080,
        open: true,
        overlay: {
            warnings: false,
            errors: true
        },
        proxy: {
            [process.env.VUE_APP_BASE_API]: {
                target: "http://127.0.0.1:90/admin",
                changeOrigin: true,
                pathRewrite: {
                    ["^" + process.env.VUE_APP_BASE_API]: ""
                }
            }
        }
    },
    configureWebpack: {
        devtool: "source-map"
    }
};

4、启动vue项目:npm run serve 或 npm run dev 。如果之前已经启动过了,要关掉重新启动,因为我们改了配置文件;

5、关闭正在运行的Chrome浏览器(以防有干扰),VSCode菜单“启动-->启动调试”,这时候VSCode会以管理员身份打开一个Chrome窗口,并自动打开项目首页;

6、在VSCode中的代码设置断点,浏览器执行,遇到断点时,VSCode会高亮显示。同时,Chrome浏览器按F12,也可以看到相同的断点调试信息。

分类至 Vue
0条评论

vue-cli 3.0 前后端API接口联调时跨域处理

vue项目开发阶段,使用npm run dev 或npm run serve 启动本地调试,请求后端的API接口时提示跨域。因为vue是Node.js运行(端口8080),后端是PHP开发(端口9090),地址都是127.0.0.1,但端口号不一样,所以造成了跨域请求。
vue-cli官方文档提示,我们可以在 vue.config.js 配置文件里设置代理,文档链接:https://cli.vuejs.org/zh/config/#devserver-proxy

分类至 Vue
0条评论

MySQL的四种事务隔离级别

一、事务的基本要素(ACID)
  1、原子性(Atomicity):事务开始后所有操作,要么全部做完,要么全部不做,不可能停滞在中间环节。事务执行过程中出错,会回滚到事务开始前的状态,所有的操作就像没有发生一样。也就是说事务是一个不可分割的整体,就像化学中学过的原子,是物质构成的基本单位。
  2、一致性(Consistency):事务开始前和结束后,数据库的完整性约束没有被破坏 。比如A向B转账,不可能A扣了钱,B却没收到。
  3、隔离性(Isolation):同一时间,只允许一个事务请求同一数据,不同的事务之间彼此没有任何干扰。比如A正在从一张银行卡中取钱,在A取钱的过程结束前,B不能向这张卡转账。
  4、持久性(Durability):事务完成后,事务对数据库的所有更新将被保存到数据库,不能回滚。
二、事务的并发问题 ……
三、MySQL事务隔离级别 ……

分类至 MySQL
0条评论

CentOS7挂载Windows10共享文件夹

1、新建一个专门用于访问共享的账户
右键我的电脑--管理,打开计算机管理面板,展开到系统工具--本地用户和组,在用户菜单上右键新用户(N)...,我们来新建一个用户;

2、设置共享的文件夹
把刚才添加的用户加入共享用户,且设置读写权限;
生成外部访问的共享目录;

3、CentOS挂载共享目录
由于windows与linux的文件系统不同,所以CentOS需要先安装一个cifs插件:
yum install -y cifs-utils
创建一个空目录用于挂载:
mkdir -p /home/www/blog
执行挂载命令(需要用root账号执行):
mount -t cifs -o username=sharelinux,password=123456,gid=www,uid=www //192.168.137.1/blog /home/www/blog

分类至 Linux
0条评论

CentOS7使用firewalld打开关闭防火墙与端口

1、firewalld的基本使用
#启动:
systemctl start firewalld
#关闭:
systemctl stop firewalld
#查看状态:
systemctl status firewalld 
#开机禁用:
systemctl disable firewalld
#开机启用: 
systemctl enable firewalld

2.systemctl是CentOS7的服务管理工具中主要的工具,它融合之前service和chkconfig的功能于一体。
#启动一个服务:
systemctl start firewalld.service

分类至 Linux
0条评论

微信小程序实现遮罩及阻止遮罩层下的页面滚动

实现遮罩效果

  • Html
<view class="mask-view">
  ...
</view>
  • CSS
.mask-view {
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: hidden;
  background-color: #ffffff;
  z-index: 999;
  top: 0;
  left: 0;
}

阻止遮罩层下的页面滚动

只需要在遮罩层上加上catchtouchmove="ture"
需要注意的是:因模拟器无touch事件,需在真机上测试

<view class="mask-view" catchtouchmove="ture">
  ...
</view>

 

分类至 小程序
0条评论

解决微信小程序inline-block不对齐的方法

解决方法:添加上 vertical-align:top 后就会对其。应该是由于默认的 display:inline-block 是基于 vertical-align:baseline 对齐的,改变一下 vertical-align 的类型就好了。

<view>
    <view style="width:20%; display:inline-block; vertical-align:top;">
        <image src="{{item.img}}"></image>
    </view>
    <view style="width:80%; display:inline-block; vertical-align:top;">
        <text>...</text>
    </view>
</view>

 

分类至 小程序
0条评论

CSS calc() 函数

calc() 函数用于动态计算长度值。
需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
任何长度值都可以使用calc()函数进行计算;
calc()函数支持 +, -, *, / 运算;
calc()函数使用标准的数学运算优先级规则;

分类至 JS/CSS
0条评论

ES6 简化对象写法

es5常规的写法:

var name = 'kobe';
var age = 39;
var obj = {
    name: name,
    age: age,
    getName: function () {
        return this.name;
    }
};
console.log(obj);
console.log(obj.getName());

 

es6简化对象的写法:

同名的属性可以省略,函数可以省略关键字function

/* 简化对象写法 */
var name = 'kobe';
var age = 39;
var obj={
    name,  //同名的属性可以省略
    age,
    getName() { //函数可以省略关键字function
        return this.name;
    }
};
console.log(obj);
console.log(obj.getName());

 

分类至 JS/CSS
0条评论