vue实践
关注
分享
扫一扫
小马哥的天涯
喜欢就去干 不问东西
展开
-
vue2.0数据双向绑定基本思路
大概思路 监听------数据劫持 ------数据改变（展示给用户了）大概思路 监听------数据劫持 ------数据改变（展示给用户了）)新建一个html 页面<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue2.0---数据双向绑定基...原创 2020-03-31 11:05:39 · 243 阅读 · 0 评论 -
vue-awesome-swiper 中 点击事件无效处理方案
最新做项目使用了vue-awesome-swiper（3.1.3版本）轮播插件在使用loop模式下 动态循环数据 点击事件不起作用 通过查看api loop模式下会在slides前后复制若干个 slide 但是这个复制只是针对 dom 不会带上事件的 所以不能在dom上 直接绑定事件 绑定则无效处理方案：如下图上图中 我的vm怎么获取呢 我们可以在顶层定...原创 2019-12-24 10:11:01 · 7562 阅读 · 7 评论 -
vue 实现 文章详情页 返回到 列表页 需要返回到原来列表页进入的地方
这个问题 网上有很多相关博客文章 但是有很多人压根自己就没有尝试过 直接ctrl+c +ctrl+v 不知道复制这些干啥呢 实在是遗憾...小编 这次 写下 自己亲身实践首先处理 这个问题 我是分步骤处理的想回到原来列表位置 可以缓存+滚动vue 中 有keep-alive 是 vue内置组件 可以保留原状态 避免重新渲染数据了我在 app.vue...原创 2019-11-09 17:08:54 · 2726 阅读 · 2 评论 -
vue之计算属性 computed
大多数 情况下 我们都是 使用computed 的 getter， 也就是获取一个值不过 有的时候我们可能会使用computed 的 setter， 设置另外一个值 。这个时候会先 调用set 然后再调用get获取最新值.现在再运行vm.fullName = 'John Doe'时，setter 会被调用，此时的newValue值为'John ...原创 2019-11-05 09:09:38 · 343 阅读 · 0 评论 -
app手机拨号 vue 写法
<a class="activity_cont_telephone" :href="'tel:' + detailData.publicTel"></a>原创 2019-10-22 10:26:23 · 245 阅读 · 0 评论 -
vue-router组件内的守卫 beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave 用法
几天前帮一个朋友看代码 组件内使用beforeRouteEnter 一直this 为 undefined 这朋友压根就没有仔细看文档1.beforeRouteEnterbeforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不！能！获取组件实例 `this` // 因为当守卫执行前...转载 2019-04-08 11:58:30 · 2464 阅读 · 0 评论 -
vue 中 修改数据 更新视图
Vue.set( target, key, value ) 参数： {Object | Array} target {string | number} key {any} value 返回值：设置的值。 用法： 向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属...翻译 2019-04-26 10:19:50 · 2637 阅读 · 0 评论 -
vue-router 路由警告 Named Route 'Member' has a default child route
因为当某个路由有子级路由的时候，这时候父级路由需要一个默认的路由，所以父级路由不能定义name属性 解决办法是：即去除父级的name属性即可原创 2019-04-30 13:44:33 · 2462 阅读 · 0 评论 -
vue-router 复用原有页面 不会加载
vue-router 复用原有页面 不会加载有的时候 我们在使用 v-router时候 只是修改 params或者query参数值的时候 页面不会重新加载 因为路由是一样的规则 vue则会认为是一样的页面 然后就是复用该页面 而不是 重新加载 导致 我们在生命周期钩子 如 created 、mounted中 调用一些方法 等 不起着用 这个时候 我们就需要使用 vue...原创 2019-05-20 16:35:31 · 1017 阅读 · 0 评论 -
vue中 修改v-html指令中的样式 该如何操作呢？
在vue中 通过 v-html指令创建的 DOM 内容不受作用域内的样式影响但是你可以通过深度作用选择器来为他们设置样式 如下图可以 看看vue中css作用域...原创 2019-05-13 14:12:29 · 4125 阅读 · 3 评论 -
vue 动态背景图片
在methods新增一个方法styleBg 在data定义一个背景样式styleObject对象styleBg() {var styleObject = {background: "url(" + this.base_url + this.train.image + ")",backgroundSize: "7.5rem" + " " + "4.2rem",backgro...原创 2019-07-25 17:40:42 · 5622 阅读 · 0 评论 -
在vue中 axios post 请求携带参数给java 后台 json 数据传递不过去
页面引入 import Qs from 'qs'Qs.stringify()将对象 序列化成URL的形式，以&进行拼接Qs.stringify(params),{headers: {'Content-Type':'application/x-www-form-urlencoded'}}向下面 这样子 就可以了...原创 2019-03-19 14:38:27 · 3189 阅读 · 1 评论 -
vue 项目 数据是对象格式 如何初始化 不报错
<div>{{ report.train.trainTag }}</div>初始化 data 数据 report.trainTag ："11111111" 吗？如果 report对象 下面 有很多属性 且 此对象 是ajax请求得来的 页面正好 要展示 这么多属性值 难道 初始化数据 data里面要定义 很多属性吗？这里肯定 不是最优解的...原创 2018-10-12 11:05:05 · 2936 阅读 · 0 评论 -
利用vue-cli脚手架搭建项目时，在我入门时开启了eslint 一直报黄色的警告 有时候非常的烦恼 所以我要去掉它
我们在项目目录里 找到 bulid--->webpack.base.conf.js 然后把下面的 代码 注释掉哦const createLintingRule = () => ({ // test: /\.(js|vue)$/, // loader: 'eslint-loader', // enforce: 'pre', // include: [resolve('src'),...原创 2018-03-21 14:44:36 · 2244 阅读 · 1 评论 -
vue脚手架vue-cli 中 引入 jquery 把某个按钮 加上点击事件 事件 第一次 成功 第二次就失效了
这里 其实 涉及到了 vue生命周期 当我们 引入jq 是不是 每次都要写$(function(){})或者是document.ready 等 代码 其实 这里可以看出 jq 生效也是有生命 周期得 所以 我们让jq 生效 必须在生命周期内 我们在这里 可以利用 vue生命周期 把jQuery中的代码放到mounted中 此时 就可以 生效了看下图...原创 2018-03-26 10:11:09 · 4254 阅读 · 0 评论 -
我们通过vue脚手架 搭建起来的项目 当项目跑起来 地址栏 始终有一个#
//实例化路由时 加上 这个配置 然后重新启动项目 就没有#了export default new VueRouter({ mode: 'history', routes})原创 2018-03-26 14:32:36 · 1419 阅读 · 0 评论 -
使用vue-cli脚手架 与 axios 请求数据 配置代理进行跨域访问数据问题
首先利用脚手架vue-cli 把项目搭建好 然后在 利用控制台 在项目中安装http-proxy-middleware中间件作为代理控制台安装中间代理命令 如下： npm install -S http-proxy-middleware然后按照下图 一步步配置 配置结束 是不是 还是不行？在这里 要关闭下项目 重新在控制台 npm run dev 重启项目 就大功告成了 ...原创 2018-03-27 10:16:12 · 2472 阅读 · 0 评论 -
vue-router路由中 this.$router 与this.$route区别
最近在重构网站 遇到参数传递 一些小细节问题 this.$router与this.$route 两者相差 一个 r 但是差距蛮大的 一开始没注意这些 细节 数据没获取到 也没有报错 嫩是 耽误了一会时间 寻找 1. this.$router 实际上 就是全局 路由对象 任何页面 都可以 调用 push(), go()等方法2.this.$route 表示当前正在用于跳转的路由...原创 2018-06-01 14:57:10 · 20243 阅读 · 0 评论 -
element-ui 表格数据html 格式解析
<el-table-column label="命中字段" width="180" align="center"> <template slot-scope="scope"> <div v-html="scope.row.Company"></div>原创 2018-07-23 12:25:53 · 6314 阅读 · 0 评论 -
element-ui 表格数据时间格式化
后台返回时间格式 /1470220594000/在element-ui table 如何格式化呢1.首先<el-table-column prop="AuditEndTime" label="处理时间" width="120" :formatter="dateFormat" align="center"></el-table-column>主要是:f...原创 2018-07-23 12:33:41 · 23634 阅读 · 26 评论 -
当我们用axios 请求数据时 a接口依赖b接口咋办呢
当我们请求数据时 this.$axios.post("b接口"}) .then(function(response){ console.log(response) } ...原创 2018-07-23 12:43:35 · 1486 阅读 · 0 评论 -
vue 项目打包出现的问题
Tip: built files are meant to be served over an HTTP server.Opening index.html over file:// won't work.第一次打包出现这句话 我以为是啥报错 原来并不是这样的 这个其实 就是个 提示而已 其实 这句话 是告诉 我们 vue打包过后 需要放在服务端 才能预览 打开 如果...原创 2018-07-27 09:15:36 · 2034 阅读 · 1 评论 -
vue.js 实现tab切换
vue tab切换 ul{ width: 100%; height:30px; } li{ list-style-type:none; float: left; margin-left: 20px; cursor: pointer原创 2018-01-23 11:20:54 · 2101 阅读 · 0 评论