目录
一、vue监听不到state数组/json对象内的元素的值的变化,要手动通知触发二、vue用splice删除多维数组元素导致视图更新失败情况
三、vue项目如何部署到php或者java环境的服务器?
四、vue-router各种路由及跳转
五、vue-router如何取参?
六、vue中如何深度watch?
七、vue生命周期及所有东西
八、vue-router路由拦截中间件
九、axios请求拦截中间件处理
十、autoprefixer版本设置不能使用默认,browsers: ['last 2 versions']
十一、设置反向代理来调用开发环境的接口实现跨域
十二、scoped CSS样式对子组件无效问题
十三、路由鉴权逻辑
十四、如何修改Vue打包之后的文件路径为相对路径?
十五、在Vue中使用全局变量或者全局挂载
十六、旧系统手机及低版浏览器出现白屏问题的解决
十七、在vue的template里面使用style动态设置图片背景问题
十八、当配置vue项目打包出来的css/js文件不带版本号时,如何解决缓存问题?
十九、路由页面不变参数变化情况,页面状态不更新问题
二十、Vue中配置反向代理使用localhost:8080时报[HPM] Error occurred while trying to proxy request,请求时报504错误
二十一、Vue中node-sass突然使用不了,报...Run `npm rebuild node-sass` to build the binding...等错误
二十二、Vue发包上线cache control控制文件缓存策略问题,特别是index.html文件
二十三、document.activeElement.scrollIntoViewIfNeeded()解决iphone输入框移位或者vue keep-alive页面后退白屏问题
二十四、使用babel-polyfill解决旧版手机白屏或者PC浏览器兼容问题
二十五、使用computed的get,set可实时反向更改源数据
二十六、在页面上如何调用组件内的函数?
二十七、在Vue中如何突破模版限制递归渲染类树结构视图内容?
二十八、vue-router路由拦截的写法坑
二十九、移动端ios8的坑,路由前页面没有滚到顶部,路由后的页面使用了fixed内容且宽为100%时,宽度会超过750px/10rem,导致布局错乱
三十、axios请求formData的方式
三十一、vue动态设置raw html的方式
三十二、组件内部的点击事件触发dom结构重画或者重流时,导致android微信浏览器崩溃问题
三十三、Vue中子组件如何向父组件传递事件?
三十四、Vuex中的mutations操作后视图不更新问题
一、vue监听不到state数组/json对象内的元素的值的变化,要手动通知触发
this.arr[index] = value; this.$set(this.arr, index, this.arr[index]); // vue监听不到数组内的元素的值的变化,要手动通知触发, 或者用compute来得出新的view数组进行处理,或者使用watch来监听变化重新进行更新
this.$set(this.jsonObj, 'myKey', myValue); // 针对jsonObj
解决方案一般如下:
vue监听不到数组/json对象内的元素的值的变化,1、要手动通知触发, 2、或者用compute来得出新的view数组/jsonObj进行处理,3、或者使用watch/deep watch来监听变化重新进行更新
二、vue用splice删除多维数组元素导致视图更新失败情况
this.arr[i] = null // 可以把元素设为null,使用时用compute进行过滤即可 this.$set(this.arr, i, this.arr[i]) // this.arr.splice(i, 1) // 此方法有可能会导致视图更新错误
三、vue项目如何部署到php或者java环境的服务器?
可行方案:
1、可以把打包出来静态文件中的index.html改成.tpl或者.php尾的等模板文件格式,然后可以在里面动态输出一些js变量如token,userinfo等信息供vue应用使用
2、也可以初始化的内容通过接口来请求过来,保存在localstorage或者全局变量供全局使用
四、vue-router各种路由及跳转
this.$router.go(-1) // 后退 类似 window.history.go(n) // 字符串 router.push('/home') // 对象 router.push({ path: '/home' }) // 命名的路由 router.push({ name: 'user', params: { userId: 123 }}) // 带查询参数,变成 /register?plan=private router.push({ path: '/register', query: { plan: 'private' }})
this.$router.replace({ // 替换,但history不会记录一条新的记录 path: '/mypath', query: {m: 'model'}, })
路径:http://localhost:8081/#/test?name=1 <router-link :to="{path:'/test',query: {name: id}}">跳转</router-link>(id是参数) 路径:http://localhost:8081/#/test/1 <router-link :to="'/test/'+id">跳转</router-link>(id是参数)
params、query是什么?
params:/router1/:id ,/router1/123,/router1/789 , 这里的id叫做params, 且路由时必需传id
params:/router1/:id? ,/router1/123,/router1 , 这里的id叫做params, 路由时可不传id
query:/router1?id=123 ,/router1?id=456 , 这里的id叫做query,路由时可不传id
五、vue-router如何取参?
this.$route.params.id
this.$route.query.id
六、vue中如何深度watch?
watch: { obj: { handler: function (v, o) { }, deep: true } }
七、vue生命周期及所有东西
<template> <article class="pageview"> {{msg}} </article> </template> <script> import {mapState, mapMutations} from 'vuex' export default { name: 'Home', mixins: [], components: { }, data () { return { msg: 'Home', } }, beforeCreate () { }, created () { }, mounted () { }, beforeUpdate () { }, updated () { }, beforeDestroy () { }, destroyed () { }, methods: { }, computed: { }, filters: { } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style
八、vue-router路由拦截中间件
router.beforeEach((to, from, next) => { if (to.meta.title) { document.title = to.meta.title // 动态设置meta或者可以进行其他路由前的操作 } NProgress.start() // NProgress进度条开始 next() }) router.afterEach((transition) => { NProgress.done() // NProgress进度条结束 })
九、axios请求拦截中间件处理
axios.interceptors.request.use((headerConfig)=> { // 这里,发送请求之前可以设置request header return config }, (error) => { // 请求错误处理 return Promise.reject(error) }) // 添加响应拦截器 axios.interceptors.response.use((response) => { let {data} = response // 这里,请求完成后可以对数据进行拦截处理 return data }, (error) => { // 响应错误处理 return Promise.reject(error) })
十、autoprefixer版本设置不能使用默认,browsers: ['last 2 versions']
last 10 versions
十一、设置反向代理来调用开发环境的接口实现跨域
修改 config/index.js 文件
写法一、使用filter统一代理
proxyTable: { '**': { target: 'https://www.xxxx.com', // 要设置需跨域访问的接口的baseUrl,dev/qa/production changeOrigin: true, filter: function(pathname, req) { const isApiDev = pathname.indexOf('/api-dev/') == 0; const isApiTest = pathname.indexOf('/api-qa/') == 0; const isApiProduction = pathname.indexOf('/api-production/') == 0; return isApiDev||isApiTest||isApiProduction ; } } }
写法二、使用pathRewrite的写法
proxyTable: { '/api/resource': { target: 'https://xxx.xxx.xxx.xxx:7070', changeOrigin: true, secure: false, pathRewrite: { '^/api/resource'': '/resource' } }, },
十二、scoped CSS样式对子组件无效问题
解决方案,使用/deep/
<template> <div id="app"> <el-input v-model="text" class="text-box"></el-input> </div> </template> <script> export default { name: 'App', data() { return { text: 'hello' }; } }; </script> <style lang="less" scoped> .text-box { // 样式可以作用于el-input 组件 /deep/ input { width: 166px; text-align: center; } } </style>
十三、路由鉴权逻辑
简单的登录+是否VIP会员的鉴权写法如下
import router from './router' import NProgress from 'nprogress' // Progress 进度条 import 'nprogress/nprogress.css' // Progress 进度条样式 NProgress.inc(0.2) NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false }) router.beforeEach((to, from, next) => { const isLogin = false // 是否登录 const isVip= false // 是否VIP会员 NProgress.start() if (isLogin && isVip) { if (to.path.indexOf('/login') !== -1 || to.path.indexOf('/order-vip') !== -1) { next('/home') NProgress.done() } else { if (to.meta.title) { document.title = to.meta.title } next() } } else if (isLogin && !isVip) { if (to.path.indexOf('/login') !== -1 || to.path.indexOf('/home') !== -1) { next('/order-vip') NProgress.done() } else { if (to.meta.title) { document.title = to.meta.title } next() } } else { if (to.path.indexOf('/login') !== -1) { if (to.meta.title) { document.title = to.meta.title } next() } else { next('/login') // 否则全部重定向到登录页 NProgress.done() } } }) router.afterEach(() => { NProgress.done() // 结束Progress })
十四、如何修改Vue打包之后的文件路径为相对路径?
1、修改config目录下的index.js
build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '', // 修改这里由“/”改为“./”或者“”
2、修改build目录下的utils.js
if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath: '../../' // 增加相对路径,主要是针对css背景图 })
十五、在Vue中使用全局变量或者全局挂载
在小型的vue项目当中,其实并不需要使用到vuex,使用全局变量即可,使用方式:直接在main.js里面定义即可
/** * 全局变量定义 * */ global.USER_ID = null global.USER_NAME = null global.USER_MOBILE = null
当然也可以在main.js中把常量或者方法挂载到Vue的原型链prototype上,然后在页面中就可以直接通过this.xxx直接使用,如:
import axios from 'axios' import { Toast, MessageBox, Indicator, DatetimePicker } from 'mint-ui' Vue.use(DatetimePicker) Vue.prototype.SUCCESS_CODE = 0 Vue.prototype.$toast = Toast Vue.prototype.$messagebox = MessageBox Vue.prototype.$indicator = Indicator Vue.prototype.axios = axios
十六、旧系统手机及低版浏览器出现白屏问题的解决
解决方式:在main.js引入babel-polyfill
import 'babel-polyfill'
十七、在vue的template里面使用style动态设置图片背景问题
如果同时使用style及:style去分开设置background:url(xxx)及background-size:xx xx的话,后面设置的background-size会失效,可以使用下面的方式来设置解决
background: url(https://www.xxx.com/xxx.jpg) center center / 100% 100% no-repeat;
十八、当配置vue项目打包出来的css/js文件不带版本号时,如何解决缓存问题?
服务器端可使用Cache-Control: max-age=xxxx 来控制静态文件缓存时间,类似如下:
// 服务端代码 app.get('/xxxx.js', (req, res) => { res.setHeader('Cache-Control', 'max-age=3600') // ...其他输出 })
十九、路由页面不变参数变化情况,页面状态不更新问题
watch: { '$route' (to, from) { // 针对变化进行相应的处理 } }
二十、Vue中配置反向代理使用localhost:8080时报[HPM] Error occurred while trying to proxy request,请求时报504错误
解决方法:把 config/index.js文件中的localhost改为本地IP就行了,然后后面再改回来试试,或者再检查一下localhost指向不对了(host文件)
二十一、Vue中node-sass突然使用不了,报...Run `npm rebuild node-sass` to build the binding...等错误
当你在平时的带有node-sass依赖包的vue项目中执行yarn dev或者npm run dev时,会报错,大概报错如下:
Node Sass could not find a binding for your current environment This usually happens because your environment has changed since running `npm install` Run `npm rebuild node-sass` to build the binding for your current environment
然后,rebuild就rebuild呗,结果还发现由于墙的原因,二进制文件地址(https://github-production-release-asset-2e65be.s3.amazonaws.com/4128353/585e4c80-9c28-11e8-8cdf-78861f5b0424?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20190220%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20190220T104233Z&X-Amz-Expires=300&X-Amz-Signature=12d9dd3497845f932f0926c62c2c02ace2b12095f8212a70957430c2b706aadb&X-Amz-SignedHeaders=host&actor_id=7983722&response-content-disposition=attachment%3B%20filename%3Dwin32-x64-64_binding.node&response-content-type=application%2Foctet-stream)一直下载失败,一直rebuild失败
1)切换到联通4G把文件下载到本地如(D:\temp\win32-x64-48_binding.node )
2)执行命令:set SASS_BINARY_PATH=D:\temp\win32-x64-48_binding.node
3)执行npm rebuild node-sass 成功啦,最后,执行yarn dev或者npm run dev应该没问题了。
二十二、Vue发包上线cache control控制文件缓存策略问题,特别是index.html文件
不做缓存策略会存在的问题:微信下打开总会load到旧包或者会出现白屏情况
vue项目打包发布时生成的静态包文件要发布上线时可选用的策略:
1)如果用户访问量大的,服务器可以设置cache control及增量发包
2)如果系统用户数访问量不大的,可以设置html添加meta设计cache-control为no-cache或者其他,也可以结合服务器一起配置
二十三、document.activeElement.scrollIntoViewIfNeeded()解决iphone输入框移位或者vue keep-alive页面后退白屏问题
iphone X系列页面偶尔会出现因页面变换而渲染失败的情况,引用scrollIntoViewIfNeeded可以强制滚动页面让其重新渲染出来
二十四、使用babel-polyfill解决旧版手机白屏或者PC浏览器兼容问题
npm install --save babel-polyfill
在main.js文件头部引入
import 'babel-polyfill' // 或者require('babel-polyfill')
二十五、使用computed的get,set可实时反向更改源数据
computed: {
fullname: {
// getter
get: function () {
return this.firstName + this.familyName
},
// setter
set: function (newValue) {
let names = newValue.split(' ')
this.firstName = names[0]
this.familyName = names[1]
}
}
}
二十六、在页面上如何调用组件内的函数?
在template上加上组件引用标识ref,类似于以前的react组件引用方式
<my-component ref="myComponent" />
然后在js代码中直接使用
this.$refs.myComponent.fn() // 比如组件上有fn这个内置方法,直接调用
二十七、在Vue中如何突破模版限制递归渲染类树结构视图内容?
使用render函数即其中的h函数进行处理,可参照:Vue中使用渲染函数render实现无限节点的树
二十八、vue-router路由拦截的写法坑
router.beforeEach((to, from, next) => { // 所有if else条件都必需提供next路由出口,不然会出现死询环(不停加载)或者路由失败(白屏的情况) })
二十九、移动端ios8的坑,路由前页面没有滚到顶部,路由后的页面使用了fixed内容且宽为100%时,宽度会超过750px/10rem,导致布局错乱
解决方式:给路由后的fixed内容加宽度限制
max-width: 10rem; /* 750px; */
三十、axios请求formData的方式
axios({ url: '/api', method: 'post', data: { param1:param1, param2:param2 }, transformRequest: [function (data) { let ret = '' for (let it in data) { ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&' } return ret }], headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
三十一、vue动态设置raw html的方式
<div v-html="message">{{message}}</div> export default { data () { return { message: "<h2>这里可以包含html标签<h2>" } } }
三十二、组件内部的点击事件触发dom结构重画或者重流时,导致android微信浏览器崩溃问题
解决方案:让事件异步执行
methods: { handleClick () { setTimeout(() => { this.$router.go(-1) // 或者其他关闭对话框事件等等 }, 0) } }
三十三、Vue中子组件如何向父组件传递事件?
<script>
// Vue子组件定义事件event1
Vue.component('child-component', {
methods: {
emitEvent() {
this.$emit('event1', 'This is a event.')
}
},
mounted() {
this.emitEvent()
}
})
</script>
// Vue 父组件绑定监听子组件事件event1
<template>
<div>
<child-component @event1="eventHandler" />
</div>
</template>
<script>
import childComponent from './child-component'
export default {
components: {
childComponent
},
methods: {
eventHandler(event) {
console.log(event)
}
}
}
</script>
三十四、Vuex中的mutations操作后视图不更新问题
mutations: {
UPDATE_STATE: (state, options) => {
// state = { ...state, ...options } // 此方式可能会更新失败
Object.keys(options).forEach((key) => { // 使用Vue.set强制更新
Vue.set(state, key, options[key])
})
}
},
- 本文作者:Nelson Kuang,别名:Fast Mover 欢迎大家留言及多多指教
- 版权声明:欢迎转载学习 => 请标注信息来源于 http://www.cnblogs.com/fastmover/p/9150159.html