vue项目常见问题
1. 如何输出HTML？
vue 语法中的“Mustache”语法 (双大括号) 只会将数据解释为普通文本，如想要输出真正的HTML，需使用 v-html 指令：
<div v-html="rawHtml"></div>
2. 如何绑定class值？
<div class="item" :class="{'off': !item.is_read}"></div> // 注意：class值需加引号
3.如何引入一个组件？
（1）通过 import 引入
import Loading from 'components/loading
（2）在 components 中注册
components: {
'v-loading': Loading,
}
（3）通过注册的标签在 template 中使用
<v-loading></v-loading>
4.如何设置全局变量？
如果多个组件都会用到同一变量，则可以把该变量设为全局变量，在组件中直接引用即可，例如：
// 在mian.js中设置全局图片基本url
Vue.prototype.resourceUrl = 'http://resource.breadoffer.com'
// 在组件中使用：
5.如何设置全局函数？
//在main.js中设置全局函数：
Vue.prototype.GetQueryString = function (name){ // 此函数为通过url截取所需字符串函数
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null)return unescape(r[2]); return null;
}
// 在组件中使用函数
mounted(){
this.id = this.GetQueryString('id'); // 需使用this
}
6.SPA应用如何切换路由时改变title？
如需切换路由时改变对应列表页title，首先需安装插件 vue-wechat-title：
npm install vue-wechat-title
在main.js中引入插件：
Vue.use(require('vue-wechat-title'));
在路由 router 下的 index.js 中配置：
/**搜索页面**/
{
path: '/search',
name: 'Search',
component: resolve => require(['@/components/search'], resolve),
meta: {
title: '面包求职－做个学院，一起烘焙面包。精选干货，内部推荐，行业招聘，行业动态，面包新闻。'
},
},
在组件中使用：
<div class="mainContent clear" v-wechat-title="$route.meta.title" :class="{'active':status}">
<router-view></router-view>
</div>
7.如何改变详情页title？
// 在main.js中设置全局函数
Vue.prototype.setTitle = function (title) {
var u = navigator.userAgent
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
if (isAndroid) {
document.title = title
} else if (isiOS) {
var $body = $('body')
document.title = title
var $iframe = $('<iframe src="/static/img/xyxlogo.png"></iframe>')
$iframe.on('load', function () {
window.setTimeout(function () {
$iframe.off('load').remove()
}, 0)
}).appendTo($body)
}
}
// 在组件中调用：
this.setTitle(item.title)
8.父组件如何将值传递到子组件？
组件实例的作用域是孤立的。在子组件的模板内不能直接引用父组件的数据，所以父组件的数据需要通过 prop 才能下发到子组件中。
（1）首先在父组件中传值：
<child message="hello!"></child>
（2）然后在子组件中接收（像data一样，prop可以在模板中直接使用）：
export default{
props:['message'], // 声明预期的数据
}
注：如果想要传递动态的值，则需要使用v-bind来动态地将 prop 绑定到父组件(传递数值也需使用v-bind)
// 父组件：
<child :message="msg"></child>
export default{
data(){
return{
msg:'hello',
}
}
}
9.如何修改父组件传递到子组件的值？
prop 作为初始值传入后，子组件想把它当作局部数据来用
(1) 首先在子组件的data中创建 传递值likeNum 的副本
export default{
props:['likedNum'], // 声明预期的数据
data(){
return{
mylikeNum:this.likedNum, // 在data中创建likedNum的副本，实现改变数据
}
},
}
(2) 之后在监听函数中实现数据双向绑定
watch:{
likedNum(val){
this.mylikeNum = val; // 监听外部对 props 属性 likedNum 的变更，并同步到组件内的 data 属性 mylikeNum 中
}
},
(3) 在方法中对 传递值likeNum 进行操作
methods:{
thumb(){
var self = this;
self.mylikeNum ++;
}
}
10.mounted方法注意事项：
mounted执行时机：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用，但是mounted在执行时并不会将所有子组件也都一起被挂载，如果想要整个视图都渲染完毕，可以用 vm.$nextTick：
mounted: function () {
this.$nextTick(function () {
do something...
})
}
11.如何使用路由懒加载？
/**首页**/
{
path: '/index',
name: 'Index',
component: resolve => require(['@/components/index'], resolve), // 运行时按需加载
},
注：组件异步加载也可用此方法
12.如何去掉url中的 # 号？
vue-router 默认 hash 模式 ，如果项目中使用了路由，则直接使用路由的history模式即可：
注： 在history模式下，需后台配置支持，前端应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。
具体详情请参考： https://router.vuejs.org/zh-cn/essentials/history-mode.html
{
mode: 'history',
routes: [
/**404页面**/
{
path: '*',
name:'Error',
redirect: '/error/404',
},
]
13.如何解决webpack打包后页面空白无法显示？
找到 config 文件夹下的 index.js，修改里面的 assetsPublicPath 路径，将 ‘ / ’ 改为 ‘ . / ’，
module.exports = {
//打包时使用的配置
build: {
env: require('./prod.env'), // // webpack的编译环境
index: path.resolve(__dirname, '../dist/index.html'), //编译输入的index.html文件
assetsRoot: path.resolve(__dirname, '../dist'), // webpack输出的目标文件夹路径
assetsSubDirectory: 'static', // webpack编译输出的二级文件夹
assetsPublicPath: './', // webpack编译输出的发布路径
productionSourceMap: true,
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
},
}
14.如何处理webpack不能编译多行省略属性问题？
在多行省略的css样式中添加如下代码：
/* autoprefixer: off*/
-webkit-box-orient: vertical;
/* autoprefixer: on*/
15.如何处理插件moment.js在火狐及移动端不兼容问题？
moment.js如果想把日期格式渲染为（月，日，年）英文格式，代码需要修改为：
Vue.filter('Moment' , function(date) {
return moment(date,'YYYYMMDD').format('MMMM Do, YYYY') // 需在data后添加‘YYYYMMDD’，转化后日期格式为：April 13th, 2017
});
16.如何解决 iview 中 Icon 图标组件打包后丢失问题？
在 build / webpack.prod.conf.js 中,将里边的 extract 改为 false，默认为 true
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: false
})
},
17.关于v-for 遍历数组时的参数顺序问题
当包含index时，之前1.0版本遍历数组时的参数顺序是(index,value), 但现在是(value,index)
<li v-for="(value,index) in listArr"></li>
18.$index 在2.0中已经移除
在1.0中，例如在点击事件中想要获取元素下标，可通过变量 $index 获取，但是在2.0中已经移除
