问题：代码上传服务器后，图片404，使用的font-awesome图标也是404 解决办法：如果你用了vue-cil，那么在build目录下找到utils.js中的ExtractTextPlugin.extract({}),里面添加下面这个属性就完美解决了publicPath: ‘../../‘ 解释：文件最终会打包压缩为js。当运行的时候，css中的相对路径指向已经发生变化指向了根目录，所以出现加载错误的问题。下面是这个插件的解释。extract-text-webpack-plugin作用：该插件的主要是为了抽离...
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script> </head><body><div id="app"><div><!-- 单slot --><v-one><!-- 这里的所有内容会替换掉slot --><p>初始化段落一</p><p>初始化段落二</p></v-one><!-- 渲染结果 --><!-- <div><h1>组件标题</h1><p>初始化段落一</p><p>初始化段落二</p><p>组件段落内容</p><p>I am one</p></...
初学者建议先不用eslint，熟悉一点了再用，不然代码全都过不了关闭方法 然后打开webpack.base.conf.js找到 然后注释掉就可以了 原文：https://www.cnblogs.com/pangbo1213/p/8566737.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"></div></body><script src="node_modules/vue/dist/vue.js"></script><script> //父亲调用子组件的方法，子组件暴露一些方法让父组件调用 // ref如果写在dom上，表示获取dom，如果写在组件上，表示当前组件的实例 let vm=new Vue({ el:"#app", template:‘<child ref="c"></child>‘,...
<div ref="wrapper">Vue.js 提供了我们一个获取 DOM 对象的接口—— vm.$refs。在这里，我们通过了 this.$refs.wrapper访问到了这个 DOM 对象，并且我们在 mounted 这个钩子函数里，this.$nextTick 的回调函数中初始化 因为 Vue 是数据驱动的， Vue 数据发生变化（this.data = res.data）到页面重新渲染是一个异步的过程，我们的初始化时机是要在 DOM 重新渲染后，所以这里用到了 this.$nextTick，当然替换成 setTimeout(fn, 20) ...
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><script src="vue.js"></script><title id="title">{{title}}</title> </head> <body> <div id="ask"><!--vue不能控制body和html的标签--><ul><li v-for="(v,k) in list">{{v.content}}<button v-on:click="remove(k)">删除</button></li></ul><textarea v-model="content" cols="30" rows="10"></textarea><button v-on:click="push(‘pre‘)">发表到前面</button>...
在vue中双向数据绑定原理,我们一般都是用v-model来实现的 ,但一般在面试话会问到其实现的原理,方法比较简单,就是利用了es5中的一个方法.Object.defineproperty(),它有三个参数,Object.defineproperty(obj,‘val‘,attrObject), 参数1: obj是属性所在的对象,参数2: ‘val‘,属性名,它是一个string类型,参数3: {}属性所描述的对象详情可以看Object.defineproperty的文档下面直接上demo,html代码: <input type="text" id="inp1"><br>你...
<template><div><ul><li v-for="(item, i) in ms" :key="i">{{item}}</li></ul><button @click="change()">点击</button></div> </template><script> export default {data () {return {ms: [1, 2, 3]}},methods: {change () {this.ms[0] = 100console.log(this.ms)}},onLoad (params) {this.keyword = params.keyword} } </script>上面的代码想要实现点击按钮修改数组第一个元素的值。 然而，实际运行后发现控制台打印的数据显...
目录Vue2.0 【第四季】第2节 实例方法第2节 实例方法一、$mount方法二、$destroy()卸载方法三、$forceUpdate()更新方法四、$nextTick()数据修改方法Vue2.0 【第四季】第2节 实例方法第2节 实例方法一、$mount方法$mount方法是用来挂载我们的扩展的，我们先来复习一下扩展的写法。这里我们作了da0sy的扩展，然后用$mount的方法把da0sy挂载到DOM上，我们也生成了一个Vue的实例，直接看代码。<!DOCTYPE html> <html lang="en"> <head>...
VUE访问接口的时候，很可能出现跨域请求，从而被提供接口的服务器拒绝，这个问题可以直接在VUE里面解决，解决方法：在vue.config.js里面加入配置信息。在module.exports中加入： devServer: {proxy:‘http://localhost:8089‘},这里的proxy，是真正要访问的提供接口的服务器url ！参考：https://blog.csdn.net/wh_xmy/article/details/87705840https://www.cnblogs.com/linjiangxian/p/13203835.html原文：https://www.cnblogs.co...
错误的引入方式：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...