错误的引入方式：export default {data () {return{imgUrl_homePage:‘@/assets/img/homePage_active.png‘}}
}因为webpack是按字符号打包的，正确的引入方式： 1.import在外部引入import img_url from ‘@/assets/img/homePage_active.png‘
export default {data () {return{imgUrl_homePage:img_url}}
}2.require内部引入export default {data () {return{imgUrl_homePage:require(‘@/assets/img/homePage_active.png‘）}}
} ...
组件复用
当前组件被复用（没有被销毁或者创建）的时候，路径会发生改变，但是，值不会发生改变因为：created(){}接收值，但是created只创建一次，在create中接收路径传来的值，所以接收到的值不会发生改变解决方法：监听路由的变化 $route()使用场景：当 一个组件被复用的时候，虽然路由发生变化，但页面上的数据不会发生变化 比如： 从列表页list点击商品，进入商品详情页details查看商品的详细信息,当点击商品时，跳...
最近在开发中遇到一个在form表单对象里，有个图片上传的组件，上传成功后返回数据赋值后，图片没有展示出来 当我上传图片成功后给form.imgUrl赋值后，页面并没有出现图片的缩略图该怎么解决呢：方法1.$set// 上传成功回调函数
handleAvatarSuccess(res, file) {this.$set(this.form,‘imgUrl‘,res.data);
},
方法2.$forceUpdatehandleAvatarSuccess(res, file) {this.form.imgUrl = res.data;this.$forceUpdate();
},
$set官方ap...
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue"></script></head><body><div id="app"><son></son></div><template id="son"><div><h2>子组件</h2></div></template><script>new Vue({el: ‘#app‘,data: {},methods: {},components: {son: {template:‘#son‘,data...
Vue的watch属性Vue的watch属性可以用来监听data属性中数据的变化<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="lib/vue.min.js"></script><script src="lib/vue-router-3.0.1.js"></script></head><body><div ><input type="text" v-model="firstname" /></div><script type="text/javascript">var vm = new Vue({el:"#app",data:{firstname:"",lastname:""},methods:{},watch:{firstname:funct...
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"> <link ...
第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法父组件<template><div><child></child></div>
</template>
<script>import child from ‘~/components/dam/child‘;export default {components: {child},methods: {fatherMethod() {console.log(‘测试‘);}}};
</script>子组件<template><div><button @click="childMethod()">点击</button></div>
</template>
<script>export default {methods: {childMetho...
依赖 vue-router获得当前字符串，对应当前路由的路径，总是解析为绝对路径。 computed: {productIcon () {return this.imgMap[this.$route.path]}}
跳转到指定页面 使用router - link to:"/orderList" 可以，注意带/是定位到了根元素this.$router.push({path: ‘/orderList‘})
原文：http://www.cnblogs.com/waitforyou/p/6790216.html
async/await 1）async/await场景 这是一个用同步的思维来解决异步问题的方案，当前端接口调用需要等到接口返回值以后渲染页面时。 2）名词解释 >async async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行， async 函数返回的是一个promise 对象。 >await await的含义为等待...
稍微总结了一下Vue中父子间传值以及相互调方法的问题，非常基础、希望可以帮到你！先来个最常用的，直接上代码： 1、父传值给子组件父组件：<template><div><p class="father">父组件</p><child :sid="id"></child></div>
</template><script>
import child from ‘./child‘
export default {components: {child},data() {return {id:‘0920‘, // 父组件向子组件传的值 }},
}
</script>子组件：<template><div><p class="chil...
cli2版本： 将 config/index.js 里的 assetsPublicPath 的值改为 ‘./‘ 。build: {...assetsPublicPath: ‘./‘,...
} cli3版本： 在根目录下新建 vue.config.js 文件，然后加上以下内容：（如果已经有此文件就直接修改）module.exports = {publicPath: ‘‘, // 相对于 HTML 页面（目录相同）
} 参考链接： 1. vue打包静态资源路径不正确的解决办法 2. Vue cli 3 build时怎么修改assets public path为相对路...
给子组件添加一个id属性，方便查找<view> <first-component id="mycomp"/></view>123通过this.selectComponent方法查找子组件Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { console.log(this); // 获取子组件的数据 console.log(this.selectComponent("#mycomp").data); // 调用子组件的方法 this.selectComponent("#mycomp").huanghail...
1.合理使用运行时依赖和开发依赖作为开发者，要合理区分哪些插件是项目上线运行后需要的，哪些是用于打包编译，压缩而运行时并不需要的，进行分类安装。开发依赖不会被打包进最终的项目文件，能大大减少项目文件大小。开发依赖在项目的package.json的devDependencies里，安装时使用的命令行：npm install xxx --save–dev
//简写
npm i xxx -D运行时依赖在package.json的dependencies里，安装命令：npm install xxx --save
//简写...
// 注册一个全局自定义指令 `v-focus`Vue.directive(‘focus‘, function (el) {el.focus()})这样使我们在组件中可以自用的调用v-focus方法，给他绑定定义布尔变量来控制元素是否获得焦点但是这里要注意的是组件<el-input>本身在页面中渲染成了一个div元素所以我们要在<el-input>被绑定为v-focus的同时在自定义指令中获取组件下通过querySelector()方法获取input元素<el-input v-model.trim="searchFor" @blur="blurSearchFor"v-fo...
新年后重装系统，重装vue-cli，运行项目，发现无法使用 console根据提示，原来是eslint禁了此函数的使用。解决办法：找到项目文件夹内的 package.json文件，打开，找到 "rules":{}修改为："rules": {"no-console": "off"},问题解决！原文：https://www.cnblogs.com/sx00xs/p/12158803.html
下面我就为大家分享一篇vue 路由页面之间实现用手指进行滑动的方法，具有很好的参考价值，希望对大家有所帮助。