vue | 易学教程

vue vuex数据持久化

阅读更多关于 vue vuex数据持久化

在做vuex数据存储中，我们面临浏览器刷新页面数据丢失解决数据丢失，如何持久化需以下几步一：npm install vuex-persistedstate 二：store/index.js中引入： vuex-persistedstate import Vue from 'vue'import Vuex from 'vuex'//引入插件import persistedState from 'vuex-persistedstate'Vue.use(Vuex)export default new Vuex.Store({ state: { name:"111111" }, mutations: {}, actions: {}, modules: {}, //默认存储到localStorage plugins: [　　　　//默认localStorage　　　　persistedState()　　　　//下面这个设置为sessionStorage　　　　//persistedState({ storage: window.sessionStorage })　　　　//设置cookie　　　　//persistedState({　　　　//　　storage: {　　　　//　　　　getItem: key => Cookies.get(key),　　　　//　　　　setItem:

Vue和React中的diff算法核心

阅读更多关于 Vue和React中的diff算法核心

虚拟DOM js对象替代真实DOM, 更改避免回流(重新渲染),一次性通过render函数渲染成真实DOM 声明的样子输出的样子实现render函数生成真实DOM 设置属性 render函数渲染函数 diff算法 diff算法其实就是对DOM进行different比较不同的一种算法(虚拟的比较更节约性能) __ 补丁:用来更新DOM的任务__ 比较原则平级对比不跨级对比(无A__删除__A) 同级复用遍历规则先序深度优先遍历(从根节点向下级子节点遍历) 125叫广度优先 12345深度优先实现diff函数比较思路规则 type相同,比较属性,属性不同生成补丁包patch {type:'ATTRS',attrs:{class:'xx'} } 新节点在原DOM中不存在 {type:'REMOVE',index:xxx} 节点类型不同,直接替换 {type:'REPLACE',newNode:xxx} 文本变化 {type:'TEXT',text:'xxx'} 来源： https://www.cnblogs.com/qidaoxueyuan/p/12461581.html

vue2.0 学习，开始学习

阅读更多关于 vue2.0 学习，开始学习

先看官网的介绍上面的教程 https://cn.vuejs.org/v2/guide/ 尝试 Vue.js 最简单的方法是使用 JSFiddle Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个本地的 .html 文件，然后通过如下方式引入 Vue： <script src="https://unpkg.com/vue/dist/vue.js"></script> 你可以查看安装教程来了解其他安装 Vue 的选项。请注意我们不推荐新手直接使用 vue-cli ，尤其是对 Node.js 构建工具不够了解的同学。 ------- 先照他这个简单例子先过一遍先试到组件化来源： https://www.cnblogs.com/jshare/p/6797613.html

Vue父子组件相互通讯方法总结

阅读更多关于 Vue父子组件相互通讯方法总结

转载：https://juejin.im/post/5c1370365188250f73759a79 作者：Zero游戏人生来源：掘金子组件调用父组件的方法：　　1、$emit 　　2、$parent 　　3、prop 　　4、vuex（dispatch: actions => commit:mutations） $parent方法父组件 <template> <div> <child></child> </div> </template> <script> import child from '@/components/child'; export default { components: { child }, methods: { fatherMethod() { console.log('father组件'); } } } </script> 子组件 <template> <div @click="activeBtn"> </div> </template> <script> export default { methods: { activeBtn() { this.$parent.fatherMethod() } } } </script> $emit方法父组件 <template> <div> <child @callFather="activeSon"><

Vue如何使用mapGetters

阅读更多关于 Vue如何使用mapGetters

转载： https://www.cnblogs.com/crazycode2/p/7636082.html mapGetters 工具函数会将 store 中的 getter 映射到局部计算属性中。它的功能和 mapState 非常类似，我们来直接看它的实现： export function mapGetters (getters) { const res = {} normalizeMap(getters).forEach(({ key, val }) => { res[key] = function mappedGetter () { if (!(val in this.$store.getters)) { console.error(`[vuex] unknown getter: ${val}`) } return this.$store.getters[val] } }) return res } mapGetters 的实现也和 mapState 很类似，不同的是它的 val 不能是函数，只能是一个字符串，而且会检查 val in this.$store.getters 的值，如果为 false 会输出一条错误日志。为了更直观地理解，我们来看一个简单的例子： import { mapGetters } from 'vuex' export default { // ...

vue 键盘事件keyup/keydoen

阅读更多关于 vue 键盘事件keyup/keydoen

使用： <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="vue.js"></script> <script type="text/javascript"> window.onload = function(){ var vm = new Vue({ el:'#box', methods:{ show:function(ev){ if(ev.keyCode == 13){ alert('你按回车键了'); } }, } }); } </script> </head> <body> <div id="box"> <input type="text" placeholder="请输入" @keyup="show($event)"> <input type="text" placeholder="请输入" @keyup.13="show($event)"> </div> </body> </html> 当你按下键盘，键盘的值为13的时候，将会执行show函数方法以上两种keyup和keyup.13方法是一样的，点击回车按键，就会执行 alert 方法一些便捷方式： @keyup.13 回车　　@keyup.enter 回车　　@keyup.left 左键　　

vue main.js配置

阅读更多关于 vue main.js配置

import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' //导入 elelment js import ElementUI from 'element-ui' ; import 'element-ui/lib/theme-chalk/index.css' ; //导入全局样式表 import './assets/css/global.css' Vue . config . productionTip = false import axios from 'axios' Vue . prototype . $http = axios axios . defaults . baseURL = 'http://127.0.0.1:3000' // 在 request 拦截器中，展示进度条 NProgress.start() //视频播放器 // import VideoPlayer from 'vue-video-player' // import 'vue-video-player/src/custom-theme.css' // import 'video.js/dist/video-js.css' // // Vue.use

vue中computed和watch的区别？

阅读更多关于 vue中computed和watch的区别？

computed：用于处理复杂的逻辑运算，主要和methods储存方法来进行区分；methods储存方法，，computed储存需要处理的数据值；methods每次都会调用，computed有缓存机制，只有改变时才执行，性能更佳； watch：用于监听数据变化，其中可以监听的数据来源有三部分：props、data、computed内的数据；watch提供两个参数（newValue，oldValue），第一个参数是新值，第二个参数保存旧值；来源： CSDN 作者：狼心狗肺总好过撕心裂肺链接： https://blog.csdn.net/weixin_46477022/article/details/104784488

Vue和React中的diff算法核心

阅读更多关于 Vue和React中的diff算法核心

虚拟DOM js对象替代真实DOM, 更改避免回流(重新渲染),一次性通过render函数渲染成真实DOM 声明的样子输出的样子实现render函数生成真实DOM 设置属性 render函数渲染函数 diff算法 diff算法其实就是对DOM进行different比较不同的一种算法(虚拟的比较更节约性能) __ 补丁:用来更新DOM的任务__ 比较原则平级对比不跨级对比(无A__删除__A) 同级复用遍历规则先序深度优先遍历(从根节点向下级子节点遍历) 125叫广度优先 12345深度优先实现diff函数比较思路规则 type相同,比较属性,属性不同生成补丁包patch {type:'ATTRS',attrs:{class:'xx'} } 新节点在原DOM中不存在 {type:'REMOVE',index:xxx} 节点类型不同,直接替换 {type:'REPLACE',newNode:xxx} 文本变化 {type:'TEXT',text:'xxx'} 来源： CSDN 作者：凃老师链接： https://blog.csdn.net/tjx11111/article/details/104779101

vue-devtools调试工具

阅读更多关于 vue-devtools调试工具

点击“推荐下载”→将 XXX.crx 文件直接拖拽到谷歌的“扩展程序”中→在本地打开vue项目（开发版，已打包上线版无法调试），刷新控制面板即可！ XXX.crx文件下载链接： https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd 来源： CSDN 作者： qq_38969618 链接： https://blog.csdn.net/qq_38969618/article/details/104783987

订阅 vue