随笔分类 - Vue
摘要：1 与 路由跳转<router-link>(或this.$router.push)与<router-view>在同一个vue里 vue是单页面应用,所有页面都在app.vue里 在app.vue里有<router-link><router-view>可以接受home组件 在home.vue里又有<r
阅读全文
摘要：1 Vue-router vue是单页面应用，实现了跳转页面(非手动输入url回车或刷新)时, 不向后端发出请求 实现这一功能的是Vue-Router 2 为了实现这一目的，Vue-Router提供了两种方式 hash —— 即地址栏 URL 中的 # 符号。比如这个 URL：http://www.
阅读全文
摘要：1 定义路由 //引入VueRouter import VueRouter from 'vue-router' //引入Luyou 组件 import About from '../components/About' import Home from '../components/Home' //创
阅读全文
摘要：1 双向绑定 顾名思义, 使用v-bind实现数据(data)=>视图(input), 使用@input事件实现视图(input)=>数据(data) 重点在v-bind 2 响应式原理(v-bind: 与 v-text{{}}) 不要认为数据发生改变，界面就跟着更新，这并不是理所当然的，这其实是V
阅读全文
摘要：1 scoped 目的: 如果vue中当前组件与子组件有同名class,修改会修改子组件,添加scoped会只在当前组件生效 原理: 1. 给当前组件所有dom节点添加data属性 ( 例如: data-v-5558831a, 只有属性名没有属性值 ) 来标识 2. data-v-5558831a是
阅读全文
摘要：为什么要使用图片懒加载呢？什么是图片懒加载呢？ 1. 原理 图片懒加载是前端页面优化的一种方式，在页面中有很多图片的时候，图片加载就需要很多时间，很耗费服务器性能，不仅影响渲染速度还会浪费带宽，为了解决这个问题，提高用户体验，所以就出现了懒加载这种方式来减轻服务器的压力，优先加载可视区域的内容，其他
阅读全文
摘要：node 1.不选最新版本，少bug，安装一路next ，cmd以管理员模式 2.修改全局包路径 在node安装目录下下新建两个文件夹 node_global //全局包下载存放 node_cache //缓存 修改路径 cmd npm config set prefix "D:\node\node
阅读全文
摘要：一句话解释: 双向绑定顾名思义, 使用v-bind实现data=>input, 使用@input事件实现input=>data 1 v-model 用在 input 元素上时 使用 <input v-model="sth" /> 原理 <input v-model="sth" /> 等价于: <in
阅读全文
摘要：import { mapState , mapGetters} from 'vuex' computed: { ...mapGetters(['attrsList', 'goodsList', 'trademarkList']), ...mapState({total: (state) => sta
阅读全文
摘要：npm install mockjs --save -dev开发时使用 1 src下创建文件夹mock 文件夹mock下创建banner.json 和 mockServe.js [ { "id": "1", "imgUrl": "/images/banner1.jpg" }, { "id": "2"
阅读全文
摘要：区别 data中的属性并不会随赋值变量的改动而改动 computed属性属于持续变化跟踪。在computed属性定义的时候，这个computed属性就与给它赋值的变量绑定了。改变这个赋值变量，computed属性值会随之改变 错误使用场景 <div>{{name}}</div> data() { r
阅读全文
摘要：1 先放在 created 里 首先我们先将请求放在 created 里，如下： created(){ console.log('created'); this.$store.dispatch('getDetail', 11); }, mounted(){ console.log('mounted'
阅读全文
摘要：1 vue-cli3以后工程文件夹中是没有vue.config.js这个文件的，所以我们需要自己创建一个 2 npm run serve可以将项目在本地和通过ip方式都跑起来。我们不需要再去配置webpack, 下面的Network后为本机ip地址 App running at: - Local:
阅读全文
摘要：1 父=>子 父:msg='msg' 子props 单向数据流,子组件不允许改变props的值,如msg 2 子=>父 子事件里触发事件this.$emit(名 , 参) 父@名='fn' fn(参) 在组件上写event,都是自定义事件 即便: <Son @click='fn'/> 点击不会触发c
阅读全文
摘要：路由守卫的afterEach() 方法有个常用的地方是自动让页面返回最顶端 比如一个页面较长，滚动到某个位置后跳转。这时另一个页面滚动条默认是上一个页面停留的位置。我们可以在 afterEach() 方法中将滚动条位置进行重置。 //全局路由改变后钩子 router.afterEach((to, f
阅读全文
摘要：// 添加请求拦截器 requests.interceptors.request.use( function (config) { // 在发送请求之前做些什么 if(store.state.Detail.uuid_token){ config.headers.userTempId = store.
阅读全文
摘要：一句话解释: 在script里 99% 是要写this. 在Vue 中会定义很多的函数或者变量 data computed methods prop filter 路由相关等 这些属性或方法往往需要在 template 或者 script 标签中使用 在template 中直接使用不需要this 在
阅读全文
摘要：一句话解释 跳到哪个路由, 加载哪个组件 (增加首屏加载速度) 原来: import Home from '../pages/Home' const routes = [ { path: '/home', name: 'home', component: Home, } ] 现在: const ro
阅读全文
摘要：1 create vue demo时, 选择如下设置: (*) Choose Vue version //2 (*) Babel ( ) TypeScript ( ) Progressive Web App (PWA) Support (*) Router //not history (*) Vue
阅读全文
摘要：QR Code码 Quick Response Code快速响应码 下载 npm install --save qrcode 引入 import QRCode from 'qrcode'; 使用 let text='ztyj34thj34hgfds23' let url = await QRCode
阅读全文
