
VUE
衣乌安、
愿每天合上笔记本盖子的刹那,都有着剑客收剑入鞘的骄傲。。。\n
阿里巴巴-灵犀互娱内推:https://talent.lingxigames.com/off-campus/position-list?shareCode=tnUSkSaCdjj4vvU3_vDQ0g%3D%3D
展开
-
v-if和v-show、v-for和v-if
v-if vs v-showv-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。一般来说,v-if 有更高的切...转载 2018-08-10 16:36:24 · 429 阅读 · 0 评论 -
vue 默认加载某一子路由
先来看一段路由的代码,要解决的问题是在进入页面或加载某一父级路由时默认加载其某一特定路由. routes: [ { path: '/', name: 'wpIndex', component: wpIndex, redirect:'/login', children: [ { path: ...原创 2018-08-22 00:16:03 · 8407 阅读 · 3 评论 -
vue路由传参
现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据。父组件中: <li v-for="article in articles" @click="getDescribe(article.id)">methods:方案一: getDescribe(id) {// 直接调用$router.push 实现携带参数的跳转 ...转载 2018-09-04 15:22:49 · 163 阅读 · 0 评论 -
vue生命周期
关于组件的生命周期,是时候放出这张图片了:这张图片已经讲得很清楚了,很多人这部分也很清楚了,大部分生命周期并不会用到,这里提一下几点: ajax请求最好放在created里面,因为此时已经可以访问this了,请求到数据就可以直接放在data里面。 这里也碰到过几次,面试官问:ajax请求应该放在哪个生命周期。 关于dom的操作要放在mounted里面,在mount...转载 2018-09-05 12:21:55 · 345 阅读 · 0 评论 -
axios post提交数据@RequestParam后端接收不到
首先要确定表单的提交类型 在main.js中配置全局默认headers:axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';确保表单提交方式为:application/x-www-form-urlencoded然后确定数据格式应该为表单数据 建议用node的...原创 2018-09-08 22:56:30 · 3729 阅读 · 0 评论 -
vue 引入jquery 报错$ is not defined
在webpack.base.conf.js里加入const webpack = require("webpack")然后在module.exports的最后加入plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvidePlugin({ jQu...原创 2018-09-03 11:06:57 · 6128 阅读 · 1 评论 -
axios+springboot 文件上传
前端:<form action="javascript:void(0);"> <input type="file" name="upload-file" id="upload-file" @change="uploadFile"></form>// 文件上传处理 uploa原创 2018-09-09 12:02:33 · 1738 阅读 · 0 评论 -
vue cli3自定义模板删除及配置淘宝镜像
首先要知道配置文件在哪:我用的是linux系统windows类似,首先找到用户目录,将隐藏文件显示出来,找到一个名为.vuec的文件,打开如下:上图中zsy即为已定义好的一套模板名,其键值即对应具体配置,若将presets删掉后即可删掉对应模板 ...原创 2018-10-28 23:18:18 · 3448 阅读 · 0 评论 -
vue非父子组件间传值(发布订阅模式)
为vue对象添加一原型属性bus为vue实例,则所有vue实例都可调用该属性,该属性具有了$emit()方法,可以用来传递数据,$on()方法可监听$emit()方法,并通过回调函数获取数据,以实现数据交互...原创 2018-10-29 20:52:18 · 289 阅读 · 0 评论 -
vue 3.0项目.env文件配置全局环境变量
不是打广告哈,视频上看到了,网上没有找到类似做法的资料,故记录一下!得知来源:https://ke.qq.com/webcourse/index.html#cid=279700&term_id=100331213&taid=2447955265340564&vid=r14288h3vj9首先根目录下创建..env或者.env.production文件(生产...原创 2018-10-27 21:34:28 · 14609 阅读 · 5 评论 -
vue设置浏览器icon图标
首先将要设置的icon图标放入static文件夹中: 在项目中找到index.html文件在head标签中加入类似:<link rel="icon" href="./static/icon.png" />然后保存就OK啦 ...原创 2018-08-20 21:38:05 · 2242 阅读 · 0 评论 -
input标签file 上传头像,在线预览功能
首先需要了解一下FileReader对象:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader事件:FileReader.onabort处理 abort 事件。该事件在读取操作被中断时触发。FileReader.onerror处理 error 事件。该事件在读取操作发生错误时触发。FileReader.onl...原创 2018-08-27 18:14:30 · 1406 阅读 · 0 评论 -
vue 插槽slot
插槽的默认内容有的时候为插槽提供默认的内容是很有用的。例如,一个 <submit-button> 组件可能希望这个按钮的默认内容是“Submit”,但是同时允许用户覆写为“Save”、“Upload”或别的内容。你可以在 <slot> 标签内部指定默认的内容来做到这一点。 <button type="submit"> <slot&g...转载 2018-08-14 15:30:01 · 261 阅读 · 0 评论 -
VUE vm.$emit
首先呢要知道,vue自定义的组件绑定事件是不能直接在html页面组件标签上直接用@或v-on绑定事件的像这样,是行不通滴:<component v-on:click="test"> 我的组件 <component> 还有就是在定义组件模板时在字符串中绑定事件,像这样也是不行的:Vue.component('welcome-button', {...原创 2018-08-12 00:43:33 · 1783 阅读 · 1 评论 -
VUE绑定多个事件
标签绑定一个事件处理函数,然后在相应的事件处理函数中调用想要触发的多个处理函数SHOW CODE:<button id="test" @click="test1">按钮</button>new Vue({ el:"#test", data:"", methods:{ test1:function(){原创 2018-08-12 00:54:13 · 5847 阅读 · 2 评论 -
vue2.x 基础知识点
目录基础知识:Vue组件过渡 & 动画可复用性 & 组合渲染函数 & JSX插件过滤器构建 & 部署转载:https://segmentfault.com/a/1190000015740490基础知识:vue的生命周期: beforeCreate/created、beforeMount/mounted、beforeUpd...转载 2018-08-12 11:55:55 · 383 阅读 · 0 评论 -
vue-devtools如何使用
首先在谷歌应用商店搜索:Vue.js devtools安装好Vue.js devtools后打开扩展程序页面勾选允许访问文件网址;然后打开一个vue项目的页面,F12打开开发者工具在工具栏即可看到 Vue 工具栏就OK了 ...原创 2018-08-07 23:20:06 · 1179 阅读 · 0 评论 -
v-model原理及自定义组件上的实现
一提到v-model就会想到数据的双向绑定,但其实现原理又是什么呢?在原生表单中:<input type="text" v-model="name">相当于:(先给input绑定value属性值为数据name,然后给input绑定input事件将其input的value值赋给数据name<input type="text" :value="name" @inp...原创 2018-08-12 17:36:24 · 8330 阅读 · 0 评论 -
linux全局安装vue-cli后输入vue: 未找到命令
需要讲安装的全局包建立软连接#sudo ln -s /home/zsy/你的安装路径/bin/vue /usr/local/bin/vue建立成功,则会在/usr/local/bin/目录下生成一个叫vue的文件然后输入vue --version 或vue -V终端显示版本号即可...原创 2018-08-13 21:27:17 · 8192 阅读 · 6 评论 -
vue js路由跳转
1.跳转到上一次页面this.$router.go(-1)2.指定跳转的地址this.$router.replace('路径')3.指定跳转路由的名字下this.$router.replace({name:'路由名'})4.通过push跳转this.$router.push('路径')this.$router.push({name:'路由名'}) ...原创 2018-08-18 20:45:12 · 5663 阅读 · 0 评论 -
VUE scoped
scoped三条渲染规则:给HTML的DOM节点加一个不重复data属性(形如:data-v-2311c06a)来表示他的唯一性 在每句css选择器的末尾(编译后的生成的css语句)加一个当前组件的data属性选择器(如[data-v-2311c06a])来私有化样式 如果组件内部包含有其他组件,只会给其他组件的最外层标签加上当前组件的data属性 加入scoped后会把这个组件的样...原创 2018-08-16 22:12:33 · 434 阅读 · 0 评论 -
vue 深度监听
首先要知道vue的watch(侦听器),侦听某属性,当属性发生变化时执行对应的操作函数.watch:{ attributeName:function(){ //侦听到属性变化后的具体操作 }}先看一个demo:<template> <div class="hello"> <input type="text"...原创 2018-12-05 16:10:40 · 1542 阅读 · 0 评论