众所周知， js是弱类型的语言，由此有了很多的优点，也出现了大量由此导致的错误，难以定位。当然有类似于ts之类的语法糖来解决此问题，ts因为是从c#演变而来的，所以入门有一定的门槛，所以我们来一下flow这个更轻巧的工具。 先来看一下flow在vs code中的表现效果:跟ts的提示类似，它会实时检测所有的包含flow注释的文件，在vscode中需要安装Flow Language Support插件. 如何安装 安装过程可以使用yarn和npm安装，推荐使用yarn，因...
在vue-cli 3中， 给stylus、sass样式传入共享的全局变量 在开发中有时，我们定义了大量的基础样式变量，例如：大量的vue单文件组件会用到这些变量，每个组件都引人一次又太麻烦。全局引入是个不错的方法，于是，在main.js 中引入variable.styl文件，但是你会发现，并不起作用。 在查阅了vue cli官方文档后发现，有官方支持的方法。 1、给sass样式传入共享的全局变量有的时候你想要向 webpack 的预处理器 loader 传递选项。你可以使...
本文实例讲述了弱类型语言javascript开发中的一些坑。分享给大家供大家参考，具体如下： 测试1: (未声明变量自动提升为全局变量) test1(); function test1() {function setName() {name = 张三; // 此处没有var声明，提升至全局}setName();console.log(name);// 张三 }测试2: (函数内部局部变量的变量提升) test2(); function test2() {var a = 1;function haha() {console.log(a);var a=1;}haha(); // undefined }测试3: (给windo...
说一种没人发的，利用混入mixins来实现全局变量和函数。mixins里面的方法、变量、筛选器会和组件里面的方法、变量、筛选器合并。这种方法优点是ide会有方法、变量、筛选器提示。 一、main.js文件 import Vue from vue import App from ./App import router from ./router import store from ./store import mixin from ./utils/mixin Vue.prototype.$bus = new Vue() //进行全局混入 Vue.mixin(mixin) new Vue({store,router,...
在vue项目日常开发中，难免要把功能性组件抽离出来，这样结构就会出现父子组价，兄弟组件等，但是这样就会涉及到不同组件需要互相使用其中的值得问题。 之前有说过通过ref来让父组件操作子组件，并且传值，那么我们今天来详细看看。 案例一：点击父组件的按钮，操作子组件显示 注：可以通过获取id/class来操作，这里我就不介绍这种方法了，至于jquery的话，在vue中还是慎用。 介绍：这里通过给子组件绑定ref属性，引号命名自定义，...
问题来源最近工作需要写小程序页面，其中有个页面情况为：父页面中包含了一个组件页面，组件页面中又包含了另外一个组件页面。 需求为：点击最后一个组件页面中的一个view，需要显示最外层父页面中的一个弹出层，并且动态的展示值，这个值的来源就是最后一个组件页面中的内容。 处理办法当时想到的就是使用全局变量，在 app.js 中定义好全局变量，点击组件页面时就修改全局变量的值，父页面同样使用全局变量的值，这样一来就可以动...
本文实例讲述了JavaScript变量作用域及内存问题。分享给大家供大家参考，具体如下： 学习要点：1.变量及作用域 2.内存问题JavaScript的变量与其他语言的变量有很大区别。JavaScript变量是松散型的(不强制类型)本质，决定了它只是在特定时间用于保存特定值的一个名字而已。由于不存在定义某个变量必须要保存何种数据类型值的规则，变量的值及其数据类型可以在脚本的生命周期内改变。 一．变量及作用域 1.基本类型和引用类型的值 ECM...
一、全局配置less 1.下载插件 **vue add style-resources-loader** vue add pluginName 是vue-cli3提供的。vue add 是用yarn安装插件的， yarn源的问题有可能导致失败。如果上面安装失败的话，就分别安装 style-resources-loader 和 vue-cli-plugin-style-resources-loader（前提是已经安装过 less less-loader） // 没有出错的话，可以无视这里npm i style-resources-loader vue-cli-plugin-style-resources-loader -D 或 yarn ad...
1.工作中遇到的两类问题 -------------------------------------------------------------------------------- 1.1 状态值（标志） A界面赋值的a变量，作为记录状态值（标志）需要被其他几个界面使用。其他几个界面亦可以改变a状态值。 1.2 传递字段 A界面有a字段，B界面没有a字段，但需要调用a字段。 2.解决方法 -------------------------------------------------------------------------------- 2.1 VUEX 使用VUEX管理状态与字...
vue-cli3配置多环境变量 先挂官网描述：环境变量和模式 需求 根据运行环境判断执行代码： 预发环境操作完成跳转地址与线上环境跳转地址不同线上环境添加埋点脚本实现 Step1：在项目根目录中新建.env.uat .env.uat配置如下： VUE_APP_BUILD_TYPE=uat vue-cli中规定，只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。 代码中可以通过 process.env.VUE_APP_SECRET 这样访问。 NODE_ENV 和 BASE_URL 是...
javascript中变量以及函数的提升，在我们平时的项目中其实还是挺常用的，尤其是大型项目中，不知不觉就会顺手添加一些变量，而有时候自己的不小心就会酿成一些不必要错误，趁有时间整理一下自己对于js中变量及函数提升的理解。 首先，看一个题目： console.log(a); // undefined var a = 1; console.log(a); // 1 console.log(b()); function b(){return 2;} // 2 console.log(c) //报错 let c = 4; console.log(d()) // 报错 var...
ES6 新增了let命令，用来声明局部变量，所声明的变量，只在let命令所在的代码块内有效，而且有暂时性死区的约束。 1.ES6可以用let定义块级作用域变量 代码如下： function f1(){{var a = 10;let b = 20;}console.log(a); // 10console.log(b); // Uncaught ReferenceError: b is not defined}f1(); 说明：在ES6之前只有全局作用域和函数作用域，在ES6中新增了块级作用域，用{}花括号表示。var 声明的变量a在花括号外面仍然是会起...
本文实例讲述了JS块级作用域和私有变量。分享给大家供大家参考，具体如下： 块级作用域 (function(){//这里是块级作用域 })()例如： (function(){for(var i=0;i<5;i++){alert(i);//0,1,2,3,4} })(); alert(i);//error上例中，定义了一个块级作用域，变量i在块级作用域中可见的，但是在块级作用域外部则无法访问。 这种技术经常在全局作用域中被用在函数外部，从而限制向全局作用域中添加过多的变量和函数。 私有变量 任何在函数中定...
本文实例讲述了Vue开发之watch监听数组、对象、变量操作。分享给大家供大家参考，具体如下： 1.普通的watch data() {return {frontPoints: 0} }, watch: {frontPoints(newValue, oldValue) {console.log(newValue)} }2.数组的watch：深拷贝 data() {return {winChips: new Array(11).fill(0)} }, watch: {winChips: {handler(newValue, oldValue) {for (let i = 0; i < newValue.length; i++) {if (oldValue[i] != newValue[i]) {c...
局组件和局部组件 1.先定义组件 Vue.component(组件名, { 组件模板对象 }) 注意: 组件名不要使用原生的标签名, 若组件名定义时用的是驼峰命名法, 则调用时用中划线分割后小写 例如: 组件-->mtText 使用时--> <my-text></my-text> 2.配置组件的模板 注意: 组件的模板内容有且只有一个根元素 3.在视图层里调用 ,用双标签 4.组件是一个独立的作用域, 也可以看成一个特殊的vue实例, 可以有data, methods,computed等等 注意: 组件...