1.跳转路由时显示在网页顶端
使用:
created(){
this.upper();
},
方法
methods:{
upper() {
window.scrollTo(0,0)
}
}
2.图片404,加载默认图片
<img style="width: 100px;" :src="'http://img.../'+item.IMGNAME" :onerror="errorImg" alt="" />
data(){
return:{
errorImg:'this.src="' + require('../assets/errorImg.png') + '"',
}
}
3.背景行内路径使用
<template>
<div class="hhh" :style="{background: 'url(' + img + ')'}"></div>
</template>
<script>
data(){
img: require('../assets/banner_images.jpg')
}
</script>
<style>
.hhh{
width:100%;
height: 520px;
}
</style>
4.Vue的渐进图像加载插件使用方法
01.npm install vue-progressive-image
02.在main.js中配置
import VueProgressiveImage from 'vue-progressive-image'
Vue.use(VueProgressiveImage)
03.实践使用
<progressive-background class="hhh" :src="img" blur="30"/>
04.vue-cli - $ vue init webpack *** 报错
问题:? Project name (project) vue-cli · inquirer.prompt(...).then is not a function
解决方案:用cnpm install -g vue-cli,重新安装
05.vue中网址中小图标添加方法
(1).在index.html的head中加入<link rel="shortcut icon" type="image/x-icon" href="./static/favicon.ico" rel="external nofollow" />
(2).在webpack.dev.conf.js中配置
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
favicon: './static/favicon.ico'
}),