LongSheng | Page 143

vue-输入框change事件并获取值

1.html

<input type="text" @change="specifiName($event)" />//输入框的change事件

<input type="text" @input="specifiName($event)" />//输入框的输入事件

<input type="text" @keyup.enter="specifiName($event)" />//输入框的回车事件

2.js

var vm = new Vue({

el: "#app",

methods: {

specifiName(e) {

var that = this;

var val = e.target.value;

console.log(val);

}

});

from:https://www.cnblogs.com/zhizou/p/10648513.html

龙生 19 Dec 2019

View Details

Excel里发现的一个空白字符，不是空格

同事说decimal转换不了，仔细看了，没有问题，如图：红色都是有问题的，肉眼是看不出任何问题的。用正则也把空白，常用的回车换行符什么的都替换，依然转换不了。后来，我打印一下字串的长度，发现总是比肉眼观察到的多一位，于是就复制了这个字符，直接替换，转换成功！来看看下面的代码：

string tt1 = "941501‬";

string tt3 = "941501";

// 你没看错，以上两个值是不相等的，在tt1的后面有一个神秘的空白字符。

decimal.TryParse(tt1.Replace("‬", ""), out var tt2); // 别以为我是把空替换为空，前面的双引号里是有个看不见的字符的

MessageBox.Show(tt2.ToString(CultureInfo.InvariantCulture)+"\n"+(tt1.Length+"-"+tt3.Length));

通过转码，神秘字符转码后： UrlEncode:‬%E2%80%AC 十六进制:2623383233363B

龙生 15 Dec 2019

View Details

Windows 提示丢失 VCRUNTIME140.DLL的问题解决

问题提示丢失 VCRUNTIME140.DLL 解决方案简介分析：建立装时，需要C++应用的必要组件，去微软官网下载安装程序，安装就可以了。有64位版和32位版，根据计算机配置进行下载，下面是下载链接： 64位版下载地址：http://download.microsoft.com/download/9/E/1/9E1FA77A-9E95-4F3D-8BE1-4D2D0C947BA2/enu_INREL/vcredistd14x64/vc_redist.x64.exe 32位版下载地址：http://download.microsoft.com/download/9/E/1/9E1FA77A-9E95-4F3D-8BE1-4D2D0C947BA2/enu_INREL/vcredistd14x86/vc_redist.x86.exe from:https://blog.csdn.net/qq_41204464/article/details/93408593

龙生 13 Dec 2019

View Details

vue中v-show和v-if的异同

一、官方解释： v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。二、个人理解：相同点：v-show和v-if都能控制元素的显示和隐藏。不同点：实现本质方法不同 v-show本质就是通过设置css中的display设置为none，控制隐藏 v-if是动态的向DOM树内添加或者删除DOM元素编译的区别 v-show其实就是在控制css v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件编译的条件 v-show都会编译，初始值为false，只是将display设为none，但它也编译了 v-if初始值为false，就不会编译了性能 v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。注意点：因为v-show实际是操作display:" "或者none，当css本身有display：none时，v-show无法让显示总结：如果要频繁切换某节点时，使用v-show（无论true或者false初始都会进行渲染，此后通过css来控制显示隐藏，因此切换开销比较小，初始开销较大），如果不需要频繁切换某节点时，使用v-if（因为懒加载，初始为false时，不会渲染，但是因为它是通过添加和删除dom元素来控制显示和隐藏的，因此初始渲染开销较小，切换开销比较大） from:https://www.cnblogs.com/liutianzeng/p/10978890.html

龙生 13 Dec 2019

View Details

Vue.js学习笔记之修饰符详解

本篇将简单介绍常用的修饰符。在上一篇中，介绍了 v-model 和 v-on 简单用法。除了常规用法，这些指令也支持特殊方式绑定方法，以修饰符的方式实现。通常都是在指令后面用小数点“.”连接修饰符名称。一、v-model的修饰符 v-model 是用于在表单表单元素上创建双向数据绑定的指令。在 <input> 和 <textarea> 上，默认通过监听元素的 input 事件来更新绑定的属性值。为了能明显的看到绑定属性值的变化，需要在Chrome浏览器中安装Vue Devtools扩展程序。当查看Vue开发的页面时，按F12就可以在开发者工具里看到Vue页签。这里需要注意，只有在引用Vue的开发版本文件，即vue.js文件时，Vue Devtools工具才能正常使用。 .lazy 首先在 vm 对象中增加需要绑定的属性 1 2 3 4 5 6 var vm = new Vue({ el: "#app", data: { input_lazy: "" } }); 在页面中的 input 的元素上添加指令 1 2 3 4 <div class="row"> <h2>v-model.lazy</h2> <input type="text" v-model.lazy="input_lazy" /> </div> 打开页面，开启Vue Devtools，在文本框中输入字符，查看属性值变化当在文本框输入内容，并且光标焦点没有离开文本框时，属性值没有实时发生变化而当焦点离开文本框时，属性值发生了变化并与文本框内容保持一致。从这个例子可以看出 .lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上。 .number 该修饰符用来将输入内容自动转换成数值。在 vm 对象里增加一个属性，默认为空字符串 1 2 3 4 5 6 var vm = new Vue({ el: "#app", data: { input_number: "" } }); 在页面的 input 元素上添加指令 1 2 3 4 5 <div class="row"> <h2>v-model.number</h2> <input type="text" v-model.number="input_number" /> <hr /> […]

龙生 12 Dec 2019

View Details

前端JavaScript规范

JavaScript规范目录类型对象数组字符串函数属性变量条件表达式和等号块注释空白逗号分号类型转换命名约定存取器构造器事件模块 jQuery ES5 兼容性 HTML、CSS、JavaScript分离使用jsHint 前端工具类型原始值: 相当于传值(JavaScript对象都提供了字面量)，使用字面量创建对象。 string number boolean null undefined

var foo = 1,

bar = foo;

bar = 9;

console.log(foo, bar); // => 1, 9

复杂类型: 相当于传引用 object array function

var foo = [1, 2],

bar = foo;

bar[0] = 9;

console.log(foo[0], bar[0]); // => 9, 9

对象使用字面值创建对象。

// bad

var item = new Object();

// good

var item = {};

不要使用保留字 reserved words 作为键。

// bad

var superman = {

class: 'superhero',

default: { clark: 'kent' },

private: true

};

// good

var superman = {

klass: 'superhero',

defaults: { clark: 'kent' },

hidden: true

};

数组使用字面值创建数组。

// bad

var items = new Array();

// good

var items = [];

如果你不知道数组的长度，使用push。

var someStack = [];

// bad

someStack[someStack.length] = 'abracadabra';

// good

someStack.push('abracadabra');

当你需要拷贝数组时使用slice. jsPerf。

var len = items.length,

itemsCopy = [],

i;

// bad

for (i = 0; i < len; i++) {

itemsCopy[i] = items[i];

}

// good

itemsCopy = items.slice();

使用slice将类数组的对象转成数组。

function trigger() {

var args = [].slice.apply(arguments);

...

}

字符串对字符串使用单引号 "（因为大多时候我们的字符串。特别html会出现"）。

// bad

var name = "Bob Parr";

// good

var name = 'Bob Parr';

// bad

var fullName = "Bob " + this.lastName;

// good

var fullName = 'Bob ' + this.lastName;

超过80(也有规定140的，项目具体可制定)个字符的字符串应该使用字符串连接换行。注: 如果过度使用，长字符串连接可能会对性能有影响。

// bad

var errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';

// bad

var errorMessage = 'This is a super long error that \

was thrown because of Batman. \

When you stop to think about \

how Batman had anything to do \

with this, you would get nowhere \

fast.';

// good

var errorMessage = 'This is a super long error that ' +

'was thrown because of Batman.' +

'When you stop to think about ' +

'how Batman had anything to do ' +

'with this, you would get nowhere ' +

'fast.';

编程时使用join而不是字符串连接来构建字符串。

var items,

messages,

length, i;

messages = [{

state: 'success',

message: 'This one worked.'

},{

state: 'success',

message: 'This one worked as well.'

},{

state: 'error',

message: 'This one did not work.'

}];

length = messages.length;

// bad

function inbox(messages) {

items = '<ul>';

for (i = 0; i < length; i++) {

items += '<li>' + messages[i].message + '</li>';

}

return items + '</ul>';

}

// good

function inbox(messages) {

items = [];

for (i = 0; i < length; i++) {

items[i] = messages[i].message;

}

return '<ul><li>' + items.join('</li><li>') + '</li></ul>';

}

函数函数表达式:

// 匿名函数表达式

var anonymous = function() {

return true;

};

// 有名函数表达式

var named = function named() {

return true;

};

// 立即调用函数表达式

(function() {

console.log('Welcome to the Internet. Please follow me.');

})();

绝对不要在一个非函数块里声明一个函数，把那个函数赋给一个变量。浏览器允许你这么做，但是它们解析不同。注: ECMA-262定义把块定义为一组语句，函数声明不是一个语句。阅读ECMA-262对这个问题的说明。

// bad

if (currentUser) {

function test() {

console.log('Nope.');

}

// good

if (currentUser) {

var test = function test() {

console.log('Yup.');

};

}

绝对不要把参数命名为 arguments, 这将会逾越函数作用域内传过来的 arguments 对象。

// bad

function nope(name, options, arguments) {

// ...stuff...

}

// good

function yup(name, options, args) {

// ...stuff...

}

属性当使用变量和特殊非法变量名时，访问属性时可以使用中括号（. 优先）。

var luke = {

jedi: true,

age: 28

};

function getProp(prop) {

return luke[prop];

}

var isJedi = getProp('jedi');

变量总是使用 var 来声明变量，如果不这么做将导致产生全局变量，我们要避免污染全局命名空间。

// bad

superPower = new SuperPower();

// good

var superPower = new SuperPower();

使用一个 var 以及新行声明多个变量，缩进4个空格。

// bad

var items = getItems();

var goSportsTeam = true;

var dragonball = 'z';

// good

var items = getItems(),

goSportsTeam = true,

dragonball = 'z';

最后再声明未赋值的变量，当你想引用之前已赋值变量的时候很有用。

// bad

var i, len, dragonball,

items = getItems(),

goSportsTeam = true;

// bad

var i, items = getItems(),

dragonball,

goSportsTeam = true,

len;

// good

var items = getItems(),

goSportsTeam = true,

dragonball,

length,

i;

在作用域顶部声明变量，避免变量声明和赋值引起的相关问题。

// bad

function() {

test();

console.log('doing stuff..');

//..other stuff..

var name = getName();

if (name === 'test') {

return false;

}

return name;

}

// good

function() {

var name = getName();

test();

console.log('doing stuff..');

//..other stuff..

if (name === 'test') {

return false;

}

return name;

}

// bad

function() {

if (!arguments.length) {

return false;

}

var name = getName();

return true;

}

// good

function() {

var name = getName();

if (!arguments.length) {

return false;

}

return true;

}

[…]

龙生 12 Dec 2019

View Details

Web 前端技术图谱

Web前端开发技术栈浏览器 Internet Explorer Chrome Firefox Safari Opera Edge Netscape 协议 HTTP/1.1 链接会话授权请求响应 HTTP/2 压缩打包服务器端推送 WebSocket Web三剑客 HTML (HyperText Markup Language) CSS (Cascading Style Sheets) JavaScript 标准 W3C HTML CSS XHTML XML 核心概念 HTML DOM Element Attribute JavaScript Prototype Scope Closure JSON (JavaSript Object Notation) AJAX (Asynchronous JavaScript and XML) CSS Selector Priority Specificity Box Model 渲染引擎 Trident (IE) Blink / prev. WebKit (Chrome) Gecko (Firefox) WebKit (Safari) Blink / prev. Presto (Opera) EdgeHTML (Edge) 脚本引擎 JScript (IE8- / ASP) Chakra (IE9+ […]

龙生 12 Dec 2019

View Details

2018 Web开发人员学习路线图

以下 Web 开发人员学习路线图是来自 Github developer-roadmap 项目，目前已经有繁体版翻译 developer-roadmap-chinese。主要有三个方向，分别为前端开发、后端开发和运维。图片中不同颜色的意义：黄色：推荐；灰色：尽可能学习；橙色：任选其一。可以看到，作为 Web 开发者，不管从事什么职位，下面这些技能点是必须掌握的： Git，代码版本管理 SSH； HTTP/HTTPs 和 API，想要真正成为一名 Web 开发者，对 HTTP 协议的了解是必不可少的；基础命令行的使用；学会钻研，养成碰到问题，通过自我学习的方式来寻找问题的解决方案，这一点有尤其重要；数据结构和算法，相信在通常的大学计算机学科这两门课都是要学习的；字符编码； Github，Github（包括 Google、Stack Overflow）是 Web 开发者的宝矿，好好利用。点我查看原文原版图前端开发基础：HTML、CSS 、JavaScript 框架：React、Angular 或者 Vue 打包工具：Webpack 和 gulp 进阶：Node.js 体系（包括 Node.js 服务端开发，npm 等）点我查看原文原版图后端开发国内可以侧重学习：PHP、Python、Java、Node.js等。点我查看原文原版图运维开发学好 Linux 是基本要求。 from:https://www.runoob.com/w3cnote/2018-web-developer.html

龙生 12 Dec 2019

View Details

gulp基本操作

1、安装淘宝镜像 npm install cnpm -g --registry=https://registry.npm.taobao.org cnpm -v 2、生成项目描述文件 package.json npm init cnpm init (可代替 npm init) （需要项目名称、版本号、描述、入口文件、运行命令、作者、证书 —- 一路按回车即可） 3、全局安装gulp cnpm i gulp@3 -g 全局安装gulp @3 代表选择了 3 的版本 i 即为 install -g 即为 --global gulp -v 4、当前目录内部安装 gulp 模块 cnpm i gulp@3 -D cnpm i gulp@3 -S （二者选择其一即可） -D 缩写 --save-dev 开发依赖 -S 缩写 --save 项目依赖开发依赖：开发过程中需要使用到的依赖的模块，项目上线时不需要的模块 — 代码格式校验的模块项目依赖：项目上线仍然需要使用的模块 —-- 如果不知道怎么选择，那你就写 -S 5、创建文件 gulpfile.js ,配置gulp

1	<span class="hljs-keyword">const</span> gulp = <span class="hljs-built_in">require</span>(<span class="hljs-string">'gulp'</span>);

5.1 创建 index.html，使用gulp完成对于index.html的复制操作，复制到当前目录的dist目录内

+++

// 复制index.html 到 dist 目录

gulp.task('copy-index', function () {

gulp.src('./index.html')

.pipe(gulp.dest('dist'))

})

命令行执行了 gulp copy-index 发现多了 dist目录 5.2 gulp/css/a.css + gulp/css/b.css 5.2.1 复制 gulp/css 至 […]

龙生 12 Dec 2019

View Details

webpack

一、什么是webpack？ webpack是一个现代JavaScript应用程序的静态模块打包器，在webpack里一切文件皆模块，通过loader转换文件，通过plugin注入钩子，最后输出由多个文件组合成的文件，webpack专注构建模块化项目。 webpack可以看做是模块打包机：他做的事情是，分析项目，找到JavaScript模块以及其他的一些浏览器不能直接运行的拓展语言（scss， TypeScript等），并将其打包为合适的格式以供浏览器使用。二、四个核心概念 entry：一个可执行文件或库的入口文件。 chunk：多个文件组成的一个代码块。例如把一个可执行文件和他所有依赖的模块组合为一个chunk，这体现了webpack的打包机制。 loader：文件转换器。例如把es6转换为es5，scss转换为css。 plugin：插件，用于扩展webpack的功能，在webpack构建生命周期的节点上加入扩展hook为webpack加入功能。三、webpack构建流程解析webpack配置参数，合并从shell传入和webpack.config.js文件里配置的参数，生产最后的配置结果。注册所有配置的插件，好让插件监听webpack构建生命周期的事件节点，以做出对应的反应。从配置的entry入口文件开始解析文件构建AST语法树，找出每个文件所依赖的文件，递归下去。在解析文件递归的过程中根据局文件类型和loader配置找出合适的loader用来对文件进行转换。递归完后得到每个文件的最终结果，根据entry配置生成代码块chunk。输出所有chunk到文件系统。四、webpack和grunt、gulp的不同 1. 概念区别：（1）gulp/grunt是一种能够优化前端的开发流程的工具。（2）webpack是一种模块化的解决方案。 2. 工作方式的区别：（1）Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译、组合、压缩等任务的具体步骤。工具之后可以自动替你完成这些任务。（2）Webpack的工作方式：把你的项目当做一个整体，通过给定的主文件（如：index.js），webpack将从这个文件开始找到你的项目的所有依赖文件，使用loader处理他们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。 3. 基于类型的区别（1）grunt和gulp是基于任务和流（task、stream）的。类似jQury，找到一个（或一类）文件，对其做一系列链式操作，更新流上的数据，整条链式操作构成了一个任务，多个任务就构成了整个web的构建流程。（2）webpack是基于入口的。webpack会自动地递归解析入口所需要加载的所有资源文件，然后用不同的loader来处理不同的文件，用plugin来扩展webpack功能。五、几种常见的loader file-loader：把文件数出到一个文件夹中，在代码中通过相对URL去引用输出的文件。 url-loader：和file-loader类似，但是能在文件很小的情况下以base64的方式把文件内容注入到代码中去。 source-map-loader：加载额外的source map文件，以方便断点调试。 image-loader：加载并且压缩图片文件。 babel-loader：把es6转换成es5。 css-loader：加载CSS，支持模块化、压缩、文件导入等特性。 style-loader：把CSS代码注入到JavaScript中，通过DOM操作去加载CSS。 eslint-loader：通过ESLint检查JavaScript代码。六、webpack的优缺点优点专注处理模块化的项目，能做到开箱即用，一步到位。可通过plugin扩展，完整好用又不是灵活。使用场景不局限于web开发。社区庞大活跃，经常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展。良好的开发体验。缺点 webpack的缺点是只能用于采用模块化开发的项目。七、什么是模块的热更新？模块热更新是webpack的一个功能，他可以使得代码修改过后不用刷新浏览器就可以更新，是高级版的自动刷新浏览器。 DevServer中通过hot属性可以控制模块的热替换。 1、通过配置文件

const webpack = require('webpack');

const path = require('path');

let env = process.env.NODE_ENV == "development" ? "development" : "production";

const config = {

mode: env,

devServer: {

hot:true

}

plugins: [

new webpack.HotModuleReplacementPlugin(), //热加载插件

module.exports = config;

2、通过命令行

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"start": "NODE_ENV=development webpack-dev-server --config webpack.develop.config.js --hot",

八、懒加载（按需加载路由） webpack中提供了require.ensure()来实现按需加载。以前引入路由是通过import这样的方式引入，改为const定义的方式进行引入。不进行页面按需加载的引入方式：

1	import home from '../../common/home.vue'

进行页面按需加载的引入方式：

1	const home = r =>require.ensure([ ],() =>(require('../../common/home.vue')))

九、通过webpack处理长缓存浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但每一次代码升级或是更新，都需要浏览器去下载新的代码，最方便和简单的更新方式就是引入新的文件名称。在webpack中可以在output中输出的文件指定chunkhash，并且分离经常更新的代码和框架代码。通过NameModulesPlugin或是HashedModuleldsPlugin使再次打包文件名不变。作者：李丹linda 链接：https://www.jianshu.com/p/86a3c35079cc 来源：简书著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

龙生 11 Dec 2019

View Details

« Previous 1 … 142 143 144 … 414 Next »

November 2025
M	T	W	T	F	S	S
« Sep
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30