默认情况下，vue中DOM的更新是异步执行的，理解这一点非常重要。 当侦测到数据变化时，Vue会打开一个队列，然后把在同一个事件循环（event loop）当中观察到的数据变化的watcher推送进入这个队列，加入一个watcher在一个事件循环中被触发了多次，它只会被推送到队列中一次， 然后在进入下一次的事件循环时，Vue会清空队列并进行必要的DOM更新，。在内部，Vue 会使用 MutationObserver 来实现队列的异步处理，如果不支持则会回退...
Webpackwebpack提供了两种项目模板，分别是vue-webpack-simple模板和vue-webpack模板Webpack是当下最热门的前端资源模块化管理和打包工具，它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源，还可以将按需加载的模块进行代码分割，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。...
大家都知道vue是一种MVVM开发模式，数据驱动视图的前端框架，并且内部已经实现了双向数据绑定，那么双向数据绑定是怎么实现的呢？先手动撸一个最最最简单的双向数据绑定 1 <div>2 <input type="text" name="" id="text">3 <span id="show"></span>4 </div>5 6 <script>7var text = document.getElementById(‘text‘)8var span = document.getElementById(‘show‘)9var obj = {} 10 Object.d...
软件分享 Snipaste.exe 截图软件 [https://www.cnblogs.com/renxuw/p/13026846.html](软件分享)安装node.js设置缓存路径: npm config set cache "C:\Program Files\nodejs\node_cache" 设置全局模块存放路径: npm config set prefix "C:\Program Files\nodejs\node_global" 到阿里下载镜像:https://developer.aliyun.com/mirror/NPM?from=tnpm npm install -g cnpm --registry=https://registry.npm.taobao.org λ npm install -g...
练习1 ： 给每条留言都增加一个删除的功能。练习2 ：将该示例的re nd er 写法改写为te mp lat e 写法，加以对比，总结出两者的差异性，深刻理解其使用场景。demo在线效果浏览解答：在 list.vue 的 render 函数中，添加如下 代码，当新增的a元素被点击后，向父组件传递自定义事件 del，并传递 index索引 h(‘a‘,{attrs:{class:‘list-del‘},on:{click(){_this.handleDel(index);}}},‘删除‘) handleDe...
因为你设置了eslint，如果你不想有规范的js代码，可以重新初始化关掉eslint。参考：https://blog.csdn.net/weixin_41982620/article/details/80135117原文：https://www.cnblogs.com/wanqingcui/p/9747068.html
vue安装：$ npm install vue vue-cil安装：$ npm install -g vue-cli 创建webpack实例：$ vue init webpack projectNametips：（摘自https://blog.csdn.net/Marian96/article/details/73603844）①、Project name (sanfeng1)；项目名称（sanfeng1）。（确定按enter，否按N） ②、 Project description (A Vue.js project)；项目描述（一vue.js项目）。（随意输入一段简短介绍，用英文） ③、Author (sunsanfeng)；作者（sunsanfen...
npm安装npm install --save chinese-lunar-calendar vue中用法 <div >{{nowTime}}</div><div ><div> {{nowDate}} </div><div>农历：{{getLunarDay.dateStr}}</div></div> <script> import { getLunar } from ‘chinese-lunar-calendar‘export default {data() {return {nowDate: "", // 当前日期nowTime: "", // 当前时间getLunarDay: ‘‘,// 当前农历时间year: new Date().getFullYear(),month: new Date().getMonth() + 1,d...
vue中使用go()和back()两种返回上一页的区别https://blog.csdn.net/qq_42618566/article/details/91045282展开go(-1): 原页面表单中的内容会丢失；history.go(-1):后退+刷新；history.go(1) ：前进back(): 原页表表单中的内容会保留；history.back():后退 ；history.back(0) 刷新；history.back(1)：前进原文：https://www.cnblogs.com/dianzan/p/12658497.html
在vue-cli3.0的脚手架中，创建了项目之后，很多配置都是都是已经生成了的，比如入口文件entry，和 output 等等都是已经设置好的，如果想要改动的话，我们需要添加 vue.config.js 去修改，在这里边官方提供了 publicPath 用来设置打包之后我们引入文件的路径，这里不支持相对路径，只能设置成觉得的路径，比如我们设置 publicPath: ‘/demo‘；那么我们打包之后的文件在 index.html 中去加载 css 的时候就是 link=‘/demo/css‘；还...
事件绑定v-on（内置事件）<template><div><a v-if="isPartA">partA</a><a v-else>no data</a><button v-on:click="toggle">toggle</button><input @keydown.enter="onkeydown"></div> </template><script>export default {data () {return {isPartA: true}},methods: {toggle () {this.isPartA = !this.isPartA},onkeydown () {console.log(‘on key down‘)}}} </script><style>html {height: 100%;} </style> 回车，输出如下结果...
控制台报错 ： Uncaught TypeError: vuex__WEBPACK_IMPORTED_MODULE_6__.default.store is not a constructor根据报错原因： 这个报错是_vuex2.default.store 不是一个构造函数因为我们用vuex的时候需要将用到的actions,mutations模块最终导出，在导出的时候new Vuex.Store中的Store小写了，这里的一定要大写，就相当于我们在使用构造函数(类)的时候首字母要大写。原文：https://www.cnblogs.com/sna-ling/p/11651252.html
举个例子 ：clickoutside.jsconst clickoutsideContext = ‘@@clickoutsideContext‘;export default {/*@param el 指令所绑定的元素@param binding {Object} @param vnode vue编译生成的虚拟节点*/bind (el, binding, vnode) {const documentHandler = function(e) {console.log(el)console.log(e.target);console.log(vnode);console.log(binding);if(!vnode.context || el.contains(e.target)) {returnfalse;}if (binding.expre...
vue-router 进阶1.动态路由? url中路由是改变的，但是改变路由公用一个组件举例：http://localhost:8080/category/detail/001?a=1&b=1http://localhost:8080/category/detail/002?a=2&b=2http://localhost:8080/category/detail/003?a=3&b=3页面中的配置：<router-link class="nav-link " active-class='active' href="#" :to="{name:'detail',params:{id:'001'},query:{a:1,b:1}}" //在router-link标签里面设置>数码</router-link...
1，说下vue的双向绑定数据的原理？ 答：vue实现数据双向绑定主要是采用数据劫持结合“发布者-订阅者”模式的方式，通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者，触发相应的监听回调。2，解释单项数据流和双向数据绑定？ 答：单向数据流：顾名思义数据流是单向的，数据流动的方向可以跟踪，流动单一，追查问题的时候可以更快捷，缺点就是写起来不太方便，要使用ui发生变更就必须创...