- 博客(55)
- 收藏
- 关注
RSS订阅原创 普通函数 与 箭头函数 this指向问题
让我们先讲下箭头函数的this指向，再在普通函数的例子中具体对比。箭头函数的this指向箭头函数的this与谁调用无关，this指向执行上下文。执行上下文可以理解为当前代码的运行环境。箭头函数本身所在的对象为obj，而obj的执行上下文是window，因此输出的是20。 const obj = { a: 10, add: () => { ...
2020-02-27 22:12:55
382
原创 vue路由参数 及 跳转方式
最近在写路由的时候会忘记，在这里记个笔记吧。一、路由传参路由可在跳转的时候传参。有两种传参的方式：query：它的参数，是拼接在url后面的http://localhost:8080/#/test?name=zm&age=18 this.$router.push({ path: '/test', ...
2020-02-26 21:45:02
267
原创 简单讲一下我理解的事件委托
这几天参加面试，被面试官问到了这个问题。这个问题是js比较基础的内容，在此自己专门做个笔记记录一下，顺便跟小伙伴们分享一下。一、什么是事件委托？事件委托也叫做事件代理，元素的事件委托给它的父元素或者外层元素。通俗点说：就是通过父元素给子元素绑定事件。它是如何实现的呢？点击子元素，冒泡到父元素上，触发父元素的点击事件。事件委托的原理，是事件冒泡。二、写个demo测一下让我们写个dem...
2020-02-26 15:12:18
573
原创 引入css样式的三种方法 link style @import及三者的区别
通常我们想引入css样式，有很多方法，今天让我们一起来看一下，他们有什么不同呢？1. style 引入style标签是放到html的head标签内部的，它是定义在当前页面的样式 <style> #outer { width: 300px; height: 300px; border: 1...
2020-02-24 22:43:20
6450
2
原创 vue beforeEach 死循环问题解决方法
什么是beforeEach？ beforeEach 是一个vue-router的路由导航钩子，一般我用它做路由守卫。什么是路由守卫？ 举个例子，当我们没有登录的时候，跳转到登录页面。如果登录了，则正常跳转。下面我们来看下死循环代码。export const router = new Router(RouterConfig);router.beforeEach((to, from, nex...
2020-02-23 19:09:45
1555
原创 文件路径问题
相对路径./data/a.txt 相对于当前目录data/a.txt 相对于当前目录绝对路径/data/a.txt 绝对路径，当前文件模块所处磁盘根目录文件操作中的相对路径可以省略 ./。在模块加载中，相对路径中的 ./ 不能省略fs.readFile('data/a.txt', function (err, data) { if (err) { ...
2020-02-15 14:27:51
92
原创 node.js加载包的规则
require优先从缓存加载。核心模块：require('fs')核心模块文件已经被编译到了二进制文件中了，我们只需要按照名字来加载就可以了路径形式的文件模块第三方包 art-template凡是第三方模块都必须通过 npm 来下载使用的时候就可以通过 require('包名') 的方式来进行加载才可以使用先找到当前文件所处目录中的 node_modules 目录node_m...
2020-02-14 19:09:30
541
原创 module.exports 和 exports 的区别
module.exports 可以集成在一个数组中导出。exports 只能逐个导出最终 return 的是 module.exports，但为了代码简洁，// 重新建立了和 module.exports 之间的引用关系了exports = module.exports;如果 exports = { name:'zm' }; 则 exports 被重新建立了引用关系。所以它是无效的。...
2020-02-14 18:00:12
79
原创 node中使用art-template
js文件const template = require('art-template');let templateHTML = template.render(data.toString(), { comments: comments});res.end(templateHTML);html页面 <ul> {{each commen...
2020-02-14 15:19:55
88
原创 each 和 forEach
forEach 是es5方法，可遍历数组，不可遍历伪数组。each是jquery方法，可遍历伪数组（例如dom节点），兼容性比forEach好。
2020-02-14 14:32:23
105
原创 node创建服务器简写
var http = require('http')var server = http.createServer();server.on('request', function () { console.log('收到客户端的请求')});server.listen(3000, function () { console.log('服务器启动成功了')});cons...
2020-02-13 15:23:44
121
原创 vue提取公共样式
在commonCss文件夹中新建base.less@primary-color: red;.box { h1 { color: @primary-color; }}在App.vue中引入<style lang="less"> @import "./commonCss/base.less";</style>...
2020-02-10 23:36:57
1733
原创 webpack搭建vue环境
npm init -ycnpm i webpack webpack-cli -Dcnpm i webpack-dev-server -Dcnpm i vue -Scnpm i html-webpack-plugin -D创建src/index.html , src/main.js , webpack.config.js，修改package.json文件// src/App.vue...
2020-02-10 23:25:33
114
原创 如何自己写一个plugin
新建 ConsoleLogOnBuildWebpackPlugin.js 文件const pluginName = 'ConsoleLogOnBuildWebpackPlugin';class ConsoleLogOnBuildWebpackPlugin { apply(compiler) { compiler.hooks.run.tap(pluginName, co...
2020-02-09 20:58:53
469
原创 webpack如何打包编译成单独css文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = { plugins: [new MiniCssExtractPlugin()], module: { rules: [ {test: /\.css$/, use: [MiniCs...
2020-02-09 20:53:24
459
原创 vuex 安装的几种方式
html<script src="js/vue.js"></script><script src="js/vuex.js"></script>nodenpm init -ynpm i vue vuex --savenode demo.jsconst Vue = require('vue');const Vuex = require...
2020-02-05 12:42:16
187
原创 求数组中的最大值
let arr = [5, 6, 2, 3, 99, 8];let max = Math.max(...arr);console.log(max); //99Math.max 不可以直接传入数组，只可以传入一系列数字
2020-01-22 11:58:09
141
原创 vue路由配置
配置路由需要引入 vue-router<div id="app"> // a标签使 hash跳转 必须前面加一个#标记 <a href="#/login">登录</a> <a href="#/register">注册</a> //a标签的简写形式 <router-link to="/logi...
2020-01-03 20:56:35
110
原创 组件间的通信
父向子传值:通过props传值 <my-component :msg="msg"></my-component> //子组件 Vue.component('my-component', { template: '#broTem', props: { 'msg':String }, created() { ...
2020-01-03 18:09:35
111
原创 watch初始化执行一次
watch: { msg: { //初始化的时候执行一次 immediate: true, handler: function (oldValue, newValue) { console.log(oldValue, newValue); ...
2020-01-03 14:50:22
4162
原创 sessionStorage.getItem 获取不到值 判空
let obj = JSON.parse(sessionStorage.getItem('obj') || '[]');
2019-12-23 21:03:56
10338
原创 vue 组件切换
is属性有组件 myCom1 和 myCom<div id="app"> <input type="button" @click="changeIt"> <component :is="name"></component></div> changeIt() { this.name= this.name =...
2019-12-22 23:06:16
94
原创 为什么组件中的data属性必须定义为一个方法并返回一个对象
三个数字会同时增长<div id="app"> <my-com></my-com> <my-com></my-com> <my-com></my-com></div>var msg = { count: 0};Vue.component('myCom', {...
2019-12-22 23:00:07
609
原创 vue 生命周期函数
<div id="app"> {{msg}} <input type="text" v-model="msg"></div>new Vue({ el: '#app', data: { msg: 'msg' }, methods: { ...
2019-12-22 21:36:02
102
原创 指令 获取焦点
第一个参数是定义指令的名字，第二个参数是一个对象。这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作 Vue.directive('focus', { // 只调用一次，指令第一次绑定到元素时调用。 bind: function (el) { // 和JS样式有关的操作，最好在 bind中去执行 /...
2019-12-22 12:52:05
147
原创 es6 不传值的时候定义默认值
Vue.filter('timeTrans', function (time, param1='aa-bb') { console.log(param1); let y = time.getFullYear(); let m = time.getMonth() + 1; let d = time.getDate(); ...
2019-12-22 10:54:00
421
原创 表格根据搜索词过滤
在循环绑定的数组上做过滤 <tr v-for="(item,index) in filterData()" :key="item.id"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item....
2019-12-21 00:17:57
160
原创 根据id找到被删除项（兼容性问题）
findIndexes6语法，对ie11 不兼容当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。 deleteData: function (id) { //此处的this指代实例 let index = this.list.findIndex(function (e) {...
2019-12-19 00:33:30
246
原创 v-for 可以遍历对象
var demo = new Vue({ el: '#app', data: { objects:{ name:'zm', age:'18' } }, methods: {}});<p v-for="(item,index) in objects">{{item}}==={{index...
2019-12-18 21:33:51
1168
原创 v-bind只能实现数据单向绑定
修改input的值，页面上{{msg}}不会改变，v-bind只能从 M -> V，不能从V -> M<div id="app"> {{msg}} <input type="text" :value="msg" width="100%"></div>如果使用v-model，则可以实现数据的双向绑定<div id="ap...
2019-12-18 00:15:06
248
原创 事件修饰符 vue中 为a标签添加点击事件不跳转href
运用事件修饰符 .prevent 阻止默认行为 <a href="https://www.baidu.com/" @click.prevent="aClick">点我</a>以此类推运用事件修饰符 .stop 阻止冒泡只执行 start 不执行 end<div id="app" @click="end"> <input type="bu...
2019-12-18 00:01:17
13525
原创 解决定时器叠加问题
let demo = new Vue({ el: '#app', data: { msg: '我是跑马灯', timer: null, }, methods: { start: function () { if (this.timer) { return; ...
2019-12-17 22:34:26
1245
原创 this指向问题
一般来说，谁调用了函数，函数内部的this就指向谁。在这里，setInterval的调用对象是window，所以函数内部的this指代的是window。而msg属性绑定的是vue实例，所以要用_this。 methods: { start: function () { let _this = this; this.timer ...
2019-12-17 22:16:30
94
原创 截取最后一位拼接到第一位
let start = this.msg.substring(0, 1); let end = this.msg.substring(1); this.msg = end + start;
2019-12-17 22:03:00
189
原创 属性的数据绑定
属性的数据绑定用到v-bind指令 <input type="text" title="我是title">将title属性抽离为变量，标签无法识别为title属性绑定的是字符串还是变量，所以用v-bind来做区分。v-bind 将冒号里的东西当作js代码来解析，这样msg则成为一个变量： <input type="text" :title="msg">如果想在...
2019-12-15 19:18:54
149
原创 v-text、v-html、文本插值 比较
v-html它与其它二者最不同的地方，是它可以识别字符串的标签，自动将其解析为标签。注：msg会覆盖div之间的值<div v-html="msg"></div>let vm = new Vue({ el: '#app', data: { msg: '<h1>你好</h1>' },});v-te...
2019-12-15 18:43:41
211
原创 react 两种获取文本框数据的方式
第一种：onChange方法中传参<input type="text" value={this.state.value} onChange={(e) => this.changeValue(e)}/>changeValue = (e) => { this.setState({ value: e.target.value }) }第二...
2019-12-15 14:57:33
1032
原创 react css样式作用域的问题
1、下载css，style依赖cnpm i style-loader css-loader -D在 webpack.config.js 中配置 module: { // 第三方匹配规则 rules: [ {test: /\.css&/, use: ['style-loader', 'css-loader']} ...
2019-12-15 13:19:10
2411
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人