vue
芳月存心
活着高兴,就不怕穷。
活着本身,就不是为了谁,仅仅是因为活着就是为了活着
展开
-
【vue2.x】响应式依赖注入
响应式依赖注入在vue框架的设计中,依赖注入并不是响应式的。即使是有很多人包括我自己也希望它是。可以使用data()方法或者Vue.observable创建一个响应式对象,这样在使用依赖注入的时候也是响应式的。1. 使用 data() 方法创建一个依赖注入的响应式对象export default { provide() { return { reactive: this.reactive }; }, data() { return { react翻译 2021-01-22 18:33:42 · 1292 阅读 · 0 评论 -
【vue】vue插件学习
首先,一点小内容要讲:插件对于vue来说不是特有的,jq也有,你会发现有大量不同的插件做不同的事情。下一个定义就是:它们都提供一个接口去做扩展。tips:插件其实就是一种全局方法插入到app中进行扩展,以便自己的使用。vue的插件文档尽可能的详细的描述了插件并且提供了关于插件的常用类别:添加一些全局方法或者属性添加一个或者多个全局资源:directives/filters/transitions等等利用全局混入(mixin)添加一些组件选项增加一些vue实例方法,通过Vue.proto翻译 2020-11-18 15:12:12 · 686 阅读 · 0 评论 -
【vue】vue组件通信
1. 组件之间的通信1.1 事件处理模式子组件向父组件通信 => 使用 emit , 触发事件父组件接收信息 => 使用v-on,监听事件在一个组件的根元素上直接监听一个原生事件 - $listeners1.2 属性传递props 父组件使用属性,对子组件通信1.3 非 Prop 的 Attribute一个非 prop 的 attribute 是指传向一个组件,但是该组件并没有相应 prop 定义的 attribute因为显式定义的 prop 适用于向一个子组件传原创 2020-11-17 15:01:59 · 130 阅读 · 0 评论 -
【vue】less 全局变量的配置
安装style-resources-loader;在vue.config.js中的pluginOptions添加第三方插件:a.引入路径:const path = require(‘path’);b,配置:pluginOptions: { 'style-resources-loader': { preProcessor: ...原创 2020-05-06 16:37:16 · 949 阅读 · 0 评论 -
【vue】关于vue组件的小结
1.vue父子组件通信,老是报warining某某属性无定义的问题: 在子组件中,定义一个属性prop form: { type:Object, default(){ return{ name:"", } } } ...原创 2018-10-17 11:50:30 · 159 阅读 · 0 评论 -
【vue】打包注意事项-----Google浏览器很神奇
Google浏览器很神奇,application不注意就会看到源码,然而在火狐上并没有观察到。如果不想让vue源文件显示出来,可以在config/index.js中build的productionSourseMap:true改为false即可。PS:以前居然没注意这个问题,失策。...原创 2018-09-30 14:55:00 · 526 阅读 · 0 评论 -
【vue】vue的style绑定background-image的方式和其他变量数据的区别
问题:使用vue加载图片变量,为了图片的自适应,需设置为背景图居中排布<tr v-for="(item,index) in dataObj"> <td class="video-msg" v-bind:id="item.videoid"> <div class="videoImg fl" v-bind:style="{backg转载 2018-06-18 22:19:23 · 17265 阅读 · 0 评论 -
【vue】关于图片路径动态化的问题
<img :src='url'>此处需要url需要返回一个asset下的一张图片路径,而图片名称则是根据id生成的图片名称,这样即可解决:src绑定图片途径的问题。 imgSrc() { if (this.userid !== "") { const url = require(`@/assets/${this.userid}.jpg`); ...原创 2018-06-18 22:14:21 · 1224 阅读 · 0 评论 -
【vue】vue组件通信,老是报XX无定义问题
在父子组件通信中,子组件属性最好跟官方文档一样的写法,写好类型和默认值,特别是子组件在定义一个object时候;子组件简写为:form:Object ;而父组件传值的form则是具体的,这时候的子组件很容易就报警告form.xxx无定义。最好将子组件的定义为: form: { type:Object, default(){ return{ ...原创 2018-06-18 22:02:31 · 1207 阅读 · 0 评论 -
【vue】加载百度地图
近期新项目使用了vue,因为涉及到物流配送,需要获取用户的位置坐标,要借助百度地图的 LocalSearch 和 Autocomplete 两个方法实现方式:通过promise以及百度地图的callback回调函数map.js export function MP(ak) { return new Promise(function (resolve, reject) ...转载 2018-04-21 17:44:07 · 984 阅读 · 0 评论 -
【vue】计算属性和侦听器
当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch<div id="demo">{{ fullName }}</div>watch版本:var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar'...转载 2018-03-26 14:30:40 · 457 阅读 · 0 评论 -
【vue】关于组件总结
1.函数式组件Vue.component('my-component', { functional: true, // 为了弥补缺少的实例 // 提供第二个参数作为上下文 render: function (createElement, context) { // ... }, // Props 可选 props: { // ... }})如果你使...原创 2018-03-19 23:31:42 · 423 阅读 · 0 评论 -
【vue】vue-cli中自定义路径别名 assets和static文件夹的区别
静态资源处理:assets和static文件夹的区别相信有很多人知道vue-cli有两个放置静态资源的地方,分别是src/assets文件夹和static文件夹,这两者的区别很多人可能不太清楚。assets目录中的文件会被webpack处理解析为模块依赖,只支持相对路径形式。例如,在 <img src="./logo.png"> 和 background: url(./logo.png...转载 2018-03-12 22:07:40 · 4219 阅读 · 0 评论 -
【vue】render 函数学习总结
在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接近编译器。createElement 函数中生成模板。这里是 createElement接受的参数:// @returns {VNode}createElement( // {String | Object | Function} // 一个 HTML 标签字符串,组...原创 2018-03-15 23:11:48 · 755 阅读 · 0 评论 -
【vue-cli】vue-cli+webpack配置下局域网,手机无法访问绑定ip的vue项目
http://192.168.0.104:8080/#/ 访问我的vue项目,浏览器可以打开,手机无法打开,在同一局域网段下。1.设置config文件下的index.js文件: dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, /...原创 2018-03-08 23:03:31 · 6725 阅读 · 0 评论 -
【vue-cil】 vue-cil 开发总结
1. 项目运行时+编译器(Runtime+Compiler)版本vs只含有运行时版本(Runtime-only)--尽可能使用只含有运行时的构建版本如果你需要在客户端编译模板(例如,向 template 选项传入一个字符串,或者需要将模板中的非 DOM 的 HTML 挂载到一个元素),你需要带有编译器的版本,因而需要完整构建版本。// 这种情况需要编译器(compiler)new V...转载 2018-10-17 11:51:43 · 360 阅读 · 0 评论 -
【vue-cli】去掉eslint语法检查
find this file: config/index.js find thie line: config.dev.useEslint = falsethen => npm run dev原文:https://segmentfault.com/q/1010000006215850?_ea=1053838转载 2018-03-14 22:37:04 · 2613 阅读 · 0 评论