vue | 易学教程

Vue通过判断$store确认用户是否登录的问题

阅读更多关于 Vue通过判断$store确认用户是否登录的问题

情景：父页面每次回判断本地 token 的存储情况，再去判断当前用户是否登录，把 $store.state.islogin 的值修改为 true，每次进入子页面时，如果 islogin 是false，则跳转到登录页问题：当先打开子页面时，父页面的store可能来不及渲染store，此时子页面就会跳到登录页解决方案：对子页面通过 localStorage 的token进行判断，如果没用token，直接跳转，如果token错误，则由后端来跳转来源： CSDN 作者： joey无心快语链接： https://blog.csdn.net/qq_41564928/article/details/104698446

Vue 是什么？

阅读更多关于 Vue 是什么？

Vue 是什么？ Vue (读音 /vjuː/，类似于 view ) 是一套用于构建用户界面的渐进式框架 vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合使用Vue将helloworld 渲染到页面上指令本质就是自定义属性 Vue中指定都是以 v- 开头 v-cloak 防止页面加载时出现闪烁问题 <style type="text/css"> /* 1、通过属性选择器选择到带有属性 v-cloak的标签让他隐藏 */ [v-cloak]{ /* 元素隐藏 */ display: none; } </style> <body> <div id="app">  <div v-cloak >{{msg}}</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ // el 指定元素 id 是 app 的元素 el: '#app', //

vue - 源码探究 vue-cli 2 中 '/static'目录和 '/src/assert'目录区别

阅读更多关于 vue - 源码探究 vue-cli 2 中 '/static'目录和 '/src/assert'目录区别

vue-cli 官方对 - 静态资源的介绍这里 vue cli 3 里面也大同小异，3 只是把 static 改成了 public 文章目录 # 指定 - 输出目录： /dist # 指定 - 静态资源文件名：static # 拷贝 - /static目录到 /dist/static目录结论：关于 /static 目录 # 指定：编译后的名字（或者目录） # url-loadder 的 limit 属性 # 结论：关于 /src/assets 目录 # 官方建议【推荐:star::star::star:】我们都知道在 vue-cli2 中 /static - 放不需要“编译”的文件，因为最终会被复制到 /dist/static 目录。如：放图片、视频、字体… /src/assert - 放需要“编译”的文件如：放 js、css、vue、图片（需要压缩或转换格式）但源码怎么做到的呢？下面看下一 # 指定 - 输出目录： /dist 默认是输出到 /src/dist 目录下（看下图）输出目录，看 webpack 的 output path ，其值来自 config.build.assetsRoot （下图） config 在 /config 目录下指定（下图）最终，就是 /dist # 指定 - 静态资源文件名：static 在看 /static 目录

vue子组件调用父组件的方法

阅读更多关于 vue子组件调用父组件的方法

一、$parent 　　父组件 <template> <div> <child></child> </div> </template> <script> import child from './child'; export default { components: { child }, methods: { fatherMethod(str) { console.log(str); } } }; </script> 　　子组件 <template> <div> <button @click="childMethod">点击</button> </div> </template> <script> export default { methods: { childMethod() { this.$parent.fatherMethod('hello'); } } }; </script> 二、props 　　父组件 <template> <div> <child :fatherMethod="fatherMethodOther"></child> </div> </template> <script> import child from './child'; export default { components: { child }, methods: {

router

阅读更多关于 router

### Vue.js ## 一、课堂目标 1. 掌握前端单页应用的原理 2. 掌握vue-router工作机制 3. 手写vue-router ## 二、知识点 ### 2.1 什么是路由？前端有哪些路由？他们有哪些特性？ #### 2.1.1 History API #### 2.1.2 hash 模式 hash 路由模式是这样的：http://xxx.abc.com/#/xx。有带#号，后面就是 hash 值的变化。改变后面的 hash 值，它不会向服务器发出请求，因此也就不会刷新页面。并且每次 hash 值发生改变的时候，会触发 hashchange 事件。因此我们可以通过监听该事件，来知道 hash 值发生了哪些变化。比如我们可以如下简单的监听： function hashAndUpdate () { // todo 匹配 hash 做 dom 更新操作 }window.addEventListener('hashchange', hashAndUpdate); 我们先来了解下 location 有哪些属性，如下 * location.href 完整的 url * location.protocol 当前 URL 的协议，包括 :; 比如 https: * location.host 主机名和端口号，如果端口号是 80(http)或 443(https),

谷歌浏览器配置Vue调试插件

阅读更多关于谷歌浏览器配置Vue调试插件

首先强调：不推荐通过nodejs安装，太麻烦，还容易出错第一步下载该插件： https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd 直接推荐下载就行第二步：解压压缩包第三步：打开谷歌浏览器，点击右上角 ==》选择更多工具按钮 ==》选择扩展程序然后将之前解压的 Vue.js Devtools_5.3.3_chrome.zzzmh.cn.crx 文件拖拽到扩展程序界面，按照对应提示点击确认即可。来源： CSDN 作者： _CanisLupus 链接： https://blog.csdn.net/qq_42001004/article/details/104694505

vue挂载节点的几种写法(mount或render)

阅读更多关于 vue挂载节点的几种写法(mount或render)

//vue2.x写法 new Vue({ router, render: h => h(App) }).$mount("#app"); //或者 new Vue({ el: '#app', router, render: h => h(App) }); //也可以先得到Virtual DOM，再挂载 var component = new MyComponent().$mount() document.getElementById('app').appendChild(component.$el) //vue1.x写法 new Vue({ el: '#app', components: { App } }); 来源： https://www.cnblogs.com/mengff/p/12426286.html

Vue 自定义图片/src懒加载

阅读更多关于 Vue 自定义图片/src懒加载

if ( ! Array . prototype . remove ) { Array . prototype . remove = function ( item ) { if ( ! this . length ) return var index = this . indexOf ( item ) ; if ( index > - 1 ) { this . splice ( index , 1 ) ; return this } } } var init = { lazyLoad : false , default : 'image/billnull.png' } var listenList = [ ] ; var imageCatcheList = [ ] ; const isAlredyLoad = ( imageSrc ) => { if ( imageCatcheList . indexOf ( imageSrc ) > - 1 ) { return true ; } else { return false ; } } //检测图片是否可以加载，如果可以则进行加载 const isCanShow = ( item ) => { if ( typeof item == 'undefined' ) return false ; var ele = item . ele

VUE实现Studio管理后台（六）：鼠标悬停显示弹出窗口

阅读更多关于 VUE实现Studio管理后台（六）：鼠标悬停显示弹出窗口

这次介绍的控件相对比较简单，鼠标悬停时显示弹出内容，效果如下：为了增加灵活性，用slot实现，调用时的代码： <MouseOverPop class="toolbox-element"> <template #heading> <div class="element-title"> 服务 </div> </template> <template #body> <div class="pop-content"> <img style="width: 100%;" src="images/services.jpg" /> </div> </template> </MouseOverPop> 控件代码： <template> <div class="mouse-over-pop" @mouseenter="mouseEnter" @mouseout="mouseOut"> <slot name="heading"></slot> <div v-show="isActive" class="pop-body"> <slot name="body"></slot> </div> </div> </template> <script> export default { name: 'MouseOverPop', data() { return { isActive: false }; },

vue实现省市区三级联动

阅读更多关于 vue实现省市区三级联动

npm 安装 npm install v-distpicker --save Vue全局引入组件 import Distpicker from 'v-distpicker' Vue.component('v-distpicker', Distpicker) 也可以那里需要，哪里引入 import VDistpicker from 'v-distpicker' export default { components: { VDistpicker } } <v-distpicker province="广东省" city="广州市" area="海珠区"></v-distpicker> 在声明vue实例的时候，定义一个onSelected方法 <v-distpicker province="广东省" city="广州市" area="海珠区" @selected="onSelected"></v-distpicker> onSelected(data) { this.address.province = data.province.value this.address.city = data.city.value this.address.county = data.area.value }, 　　来源： https://www.cnblogs.com/wuliujun521/p

订阅 vue