忽胖忽瘦的博客

由于vue3.x发布后，watch属性的行为模式有所变化。在日常使用中会经常搞混或搞不清楚watch是否会监听到事件的变化。这里记录VUE2.x中watch监听数组/对象的行为模式。作为日后迷糊时的提醒。总结普通数组数组push时，可以监听到数组变化，页面内容即时刷新。通过splice删除数组元素时，可以监听到数组变化，页面内容即时刷新。直接修改数组元素的值时，不能监听到数组变化，页面内容不会刷新。对象数组数组push时，可以监听到数组变化，页面内容即时刷新。通过splice删除数组元

需求用户要求input框仅能输入数字，不允许失焦时才处理非数字字符。初次方案： v-modl绑定数据。onkeypress禁止键盘非数字按键，input处理半角全角和非数字字符。问题问题1.日语输入法下，按下数字字符可以组合出非数字字符。问题2.日语输入法下，tab键切换/↑↓频繁切换时。会导致input事件处理异常。例如：input中重复赋值、input框中的值异常清理。原因：输入法待选文字切换时会频繁触发input事件，并且在框中显示的待选文字，也会在value中出现。解决方案c

配置环境变量官方文档配置环境变量的两种方式一、通过.env文件配置环境变量1.在根目录创建.env文件并创建变量环境变量的命名必须是：VUE_APP_XXX环境变量声明方式：“键=值”对2.配置文件作用范围3.配置配置文件二、在vue.config.js中直接声明环境变量三、环境变量使用1.html中使用环境变量2.组件中使用环境变量//...mounted() { alert(process.env.VUE_APP_STATIC_URL)}//......

基于vue2.x1.拆分state、getters、mutations等2.store/index.js导入3.使用

基于vue2.x结论Vue.set：作用：修改对象或者数组中的属性或者元素。当watch检测的是对象或者数组时，set与watch的触发规律。修改已经存在‘儿子’级的属性，不会触发watch事件。修改‘孙子’级的属性，不会触发watch事件。新增‘儿子’级的属性，触发watch事件。新增‘孙子’级的属性，不会触发watch事件。更新’孙子‘级的属性，不会触发watch事件。Vue.delete:作用：删除对象或者数组的属性或者元素。当watch检测的是对象或者数组时，delete

基于vue-cli 3.x创建的项目查看vue-cli 版本号命令：vue -V在vue.config.js文件中加入配置(初始项目不存在，需要自行创建)productionSourceMap:false

同时监听多个属性多种监听方式：数组、对象、值同时监听多个属性重点通过计算属性将两个对象组合起来，并通过watch属性监听只可以是两个完整的属性，不可以是子属性。例如，就不能是const {student.name,school} = this，此处不懂看代码如果可能的话，尽量将牵扯的属性定义在一个对象中，直接监听该对象即可。例如直接监听student对象<templat...

组件向子孙级组件传值，途径组件读取报错undefined组件向子孙级组件传值，途径组件读取报错undefined//例如爷爷组件向孙子组件传值，孙子组件通过props取值//此时父级组件如果通过props接收一下字再向孙组件传值//父组件可能会出现属性读取undefined错误//爷组件<parent :parent="Object"></parent>...

组件传值$attrs数据在标签渲染里控制inheritAttrs组件传值$attrsvue中向子级组件传值，最常用到的还是v-bind:param="obj"，子级组件通过props属性接收。但是当值需要传递很多层时，props传值就显得过于麻烦。这个时候就可以使用$attrs向下传值。用法如下:总结：$attrs中保存的是父组件通过v-bind指令传下来的值，这些值不包含prop...

基于vue2.x三级组件传值重点：爷爷组件：@test=“onTest”父级组件承接作用：v-on="$listeners" 将子级的事件传递给爷爷组件子组件决定性作用：this.$emit(“onTest”,val)实际上如果传递的值为对象，那么在孙子级/子级中修改属性的值，爷爷组件/父组件也会发生改变，并且vue不会报错。因为vue监视不到对象的属性/数组的元素的变更。两级组件...

Vue.js的watch默认情况下不能检测到对象的属性或者数组的元素的改变。因此就有了几种方法用于watch，推荐第二种：第一种：优点：可以检测到对象和数组的所有元素变动缺点：当数据较大时，性能开销大//遍历数组watch:{ param:{ handler(){ //每当param中的属性/元素发生变化，遍历param //do something }, de...

本文使用的是vue-cli 4.x第一步:被引入的js应该是通过export default / export 输出的。第二步:在index.html中通过‘script标签 ’引入远程文件。第三步:修改vue.config.jsmodule.exports={ configureWebpack:{ plugins: [ ... ...

父组件向子组件传值子组件调用父组件方法1.父组件向子组件传值流程：父级组件在data中定义数据，或者通过方法获取数据 》在子组件调用位置通过v-bind:childParamName=“parentParamName” (或者简写成 :childParamName=“parentParamName”）》子组件中通过props:[“childParamName”]接收参数。注意：父级传参...

1.页面布局2.全局组件引用1.页面布局页面整体布局官方文档页面布局如图：页面实现100%扩充至全页面：//app.vue下添加css//清楚页面默认的间隔*{ margin:0; padding: 0;}//实现页面100%填充html,body,#app,#mastContainer{ height: 100%;}2.全局组件引用...

1.安装VUE CLI首先需要安装node.js，直接安装最新版本~没毛病。其次安装VUE CLI:　官方文档：https://cli.vuejs.org/zh/guide/installation.html2.开始创建项目打开电脑命令行。CMD命令行或者win10自带的PowerShell。cd到工作目录。前置工作完成#创建vue项目命令vue create link-demo...

vue项目通过VUE CLI创建时package.json中属性的左右。图为基础版本，后续补充

记录自己VUE学习的一些理解，基于2.x1. v-:vue中称为指令。v-bind后直接跟标签的原生属性，可以实现动态改变。例如，官网中给出的例子：v-bind:title=“message”，就是动态从vue实例中拿值并展示。补充：指令缩写只有两种缩写：@click="functionName"中@表示v-on的缩写，等同于v-on:click=“funtionName”；:href="u...