Ta曰丿、她活的博客

VUE JS与CSS相互引用变量

重点：[1]constmethods=this.$options.methods //获取本组件下的所有method [2]methods[item.methodName].call(this,item)//使用this.$options.methods会有this指向问题<script>import _ from 'lodash'import adImage from '@/assets/base/ad.png'import ...

参考：JS 防抖与节流场景：点击一个按钮，频繁的点击需要不断和后台进行交互，更新后台数据，实际上以最后的一次操作为准也是没有问题的。使用JS防抖便可以解决这个问题【1】JS封装/*** 将防抖函数封装到公共js代码里* 这里涉及到闭包的相关内容，闭包内容自行百度*/export function debouce(func, delay = 100) { let timer = null; return function (...args) { if (timer) c

【一】vuex的数据存储在内存中，页面一刷新就会丢失vuex中存储的内容：人员信息。解决办法：1：人员登陆成功时，将人员信息保存到vuex和sessionStorage里面各一份。2：页面刷新时，在App.vue里面取出sessionStorage保存的人员信息，并设置到vuex中去。如果路由里面做了根据vuex里面是否有人信息来判断是否登陆的，需要修改为判断sessionStor...

现在有三个页面A(父组件)， B(子组件)，C（子组件）。A与B，A与C之间的通讯就是父子组件之间的通讯，那么B与C之间的通讯如何解决呢，这里就用到了消息总线$bus。--B子组件点击一个按钮，发出事件busClickmethods: { busClick() { const info = { 'code': '200', 'message': 'c...

[1]安装vuex ，由于是开发环境和正式环境都需要用到，所以需要使用命令--安装vuexnpm install vuex --save安装完毕后，可在package.json文件的dependencies查看是否有vuex[2]使用vuex，创建store.js文件，并将其挂载//store.js// 状态管理器// 引入vueximport Vue from 'vu...

【1】将父组件parent_component的值传给子组件child_component父传子：props，在子组件中定义需要传的数据，父组件在引用子组件的时候，将对应的数据传给子组件， movieslist:[{id:1,name:'暴力街区1'},{id:2,name:'暴力街区2'},{id:...

在做这个功能之前，查看了网上的一些博客，大多数人的难点就是如何重定向，如何在前台获取code!!!回想一下以前前后端不分离的时候，后台使用redirect来重定向到另一个action。通过request来获取code，拿到code了，来换取openid，拿到openid了就可以获取更多的信息。现在需要解决的就是，前台如何获取这个code值！思路：[1]设置一个空页面weixin_a...

<li v-for="(item, index) in list" :key="index" class="weui_uploader_file" :style="{'background-image':'url('+item.picUrl+')'}"> <input type="checkbox" style="display: none;"/>...

【1】项目config/index.js配置更改：然后使用npmrun build命令打包，会在下面里面生成dist目录，直接把dist上传到服务器中，我这里传上去后，更改dist为zhoul作为目录名称。放在/usr/local/vuePorject目录下。也就是下面root里面配置的路径。【2】服务器安装nginx，服务器安装nginx更改nginx.conf配置然后使用...

今天在测试微信扫一扫的时候，发现了一个很奇怪的问题。点击扫一扫的时候第一次总是打不开，再点一次就正常了。后来仔细看代码才发现：获取js-sdk验证和打开扫一扫分成了两个方法。首先调用验证方法，然后调用打开扫一扫。但是居然先打印的扫一扫里面的信息。这就很奇怪了。后来查阅资料发现了：js是异步执行的，导致了还没有验证成功，就执行了打开扫一扫功能。要想不改原代码，能治寻找其他的办法了，先执行验...

由于是使用的VUE版的YDUI。所以购物车的标准按照规定的写法来。【1】展示商品信息这个就很简单了，找到对应的样式，该添加的添加，该修改的样式稍微修改一下。控制选中了哪些商品有个双向数据绑定的变量。可以查阅一下文档信息。【2】删除功能要用到v-show，或者v-if指令绑定一个变量来实现购物车商品的删除。但是很多情况下我们获取后台的商品list并没有这个变量属性。那么该怎么办呢...

在自己做一些小功能的时候，老是用错了计算属性与监听属性的用法。虽然可以达到目的，但是还是使用正确的方式比较好。<!-- VUE 语法练习 --><template> <div class=""> <yd-cell-group :title="'计算属性实时计算结果：'+reversedMessage"> ...

微信H5开发使用微信JS-SDK打开扫一扫已经做过了，但是在vue中使用却懵逼了。不知道如何本地测试。经过一番研究，终于找到了解决办法：1：还是需要利用穿透来实现。穿透搭建2：更改vue项目的配置。devServer: { disableHostCheck: true //禁止检查host头 }添加上面的代码，不然回报‘Invalid Host header...

【一】页面传参有两种方式第一种传递参数 -- this.$router.push({path: ' 路由 ', query: {key: value}})参数取值 -- this.$route.query.key第二种： 刷新会丢参数传递参数 -- this.$router.push({name: ' 路由的name ', params: {key: value}})...

【一 】安装axios(1)先cd进入到自己的工程目录下(2)执行 npm install axios -S 安装即可【二】封装axios 与后台进行交互(1)建立http文件夹，建立http.js文件(2)http.js文件内容：import axios from 'axios';import personInfo from '../store/personInfo';...

【一】环境的搭建 (1)vue环境的搭建，网上很多，安装步骤就不多说了。 (2)搭建项目先切换到安装目录，新建项目：vue init webpack 项目名先切换到项目目录，运行项目： npm run dev安装过程中按照提示输入即可，运行项目后，如果可以看到下面的界面就代表搭建成功。【二】安装样式库在这里安利一个样式库：...

【1】方法1：require引入js文件，注意路径问题let echarts=require('../../../static/js/echarts4.0.4.min.js');【2】echart代码 drawScatterChart: function() { let scatterChart = echarts.init(document.querySe...

【1】代码<div class="btm-segmented-control"> <div class="btm-control-itemx" v-for="(item, index) in resultRange" :key="index" :class="item.range_code == rangeCode ? 'btm-activex':''"...