微信 jssdk 在 vue 中的简单使用import wx from weixin-js-sdk;wx.config({debug: true,appId: ,timestamp: ,nonceStr: ,signature: ,jsApiList: [] });wx.ready(() => {// do something... });wx.error((err) => {// do something... });以上是微信官方给出的示例代码，但是对于实际项目使用，还需要进一步对代码进行封装。本文基于 vue 进行示范，其余类框架同理。 在微信公众平台的官方文档中已经指出，由于安全性考虑，需要将签...
前言 关于checkbox多选框是再常见不过的了，几乎很多地方都会用到，这两天在使用vue框架时需要用到checkbox多选功能，实在着实让我头疼，vue和原生checkbox用法不太一样，之前对于vue中用到过的checkbox也只是别人写好的组件，这次在自己实现时走了很多坑，特意写这篇文章记录下来，给后来者提供一个参考 在这之前，先看看原生checkbox搭配jquery取值的用法<input type="checkbox" name="hobby" value="游泳">游泳<input type="che...
vue-resource特点 vue-resource插件具有以下特点： 1. 体积小 vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。 2. 支持主流的浏览器 和Vue.js一样，vue-resource除了不支持IE 9以下的浏览器，其他主流的浏览器都支持。 3. 支持Promise API和URI Templates Promise是ES6的特性，Promise的中文含义为“先知”，Promise对象用于异步计算。 URI Templates表示URI模板...
开发的时候有时候会遇到比如 点击这个链接跳转到其他组件的情况,氮素，我们不想跳转到新页面，只在当前页面切换着显示，那么就要涉及到路由的嵌套了，也可以说是子路由的使用。 比如我们在一个导航组件中写了三个导航链接，他们的地址分别为：/food,/rating,/seller,点击每个导航链接都会跳转到不同的组件，我们通过<router-view></router-view> <template><div class="navbar"><ul id="main"><li><router-link to="/food" >商品</...
简介页面中用 clipboard 可以进行复制粘贴，clipboard能将内容直接写入剪切板 安装npm install --save clipboard使用方法一<template><span>{{ code }}</span><iclass="el-icon-document"title="点击复制"@click="copyActiveCode($event,code )"/> </template> // methods copyActiveCode(e, text) {const clipboard = new Clipboard(e.target, { text: () => text })clipboard.on(success, e => {this.$message({ type: success, ...
ESLint是一个QA工具，用来避免低级错误和统一代码的风格 ESLint的用途 1.审查代码是否符合编码规范和统一的代码风格； 2.审查代码是否存在语法错误； 中文网地址 http://eslint.cn/ 使用VSCode编译器在Vue项目中的使用 在初始化项目时选择是否使用 ESLint管理代码(选择Y则默认开启) Use ESLint to lint your code? (Y/n)默认使用的是此标准https://github.com/standard/standard/blob/master/docs/RULES-zhcn.md 以下是对.editorco...
现代Web开发中的CSS离完美还差得远，这并不奇怪。现在，项目通常是相当的复杂的，而CSS样式又是全局性的，所以到最后总是极容易地发生样式冲突： 样式相互覆盖 或 隐式地级联到我们未考虑到的元素 。 为了减轻CSS存在的主要痛点，我们在项目中普遍采用 BEM 的方法来。不过这只能解决CSS问题中的一小部分。 对我们来说是幸运的，社区已经开发出了可以帮助我们更彻底地解决问题的解决方案。你可能已经听说过 CSS Modules 、 Styled C...
Vue —$set 在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去； 当我们去看vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 如下代码，给 student对象新增 age 属性 data () {return {student: {name: ,sex: }} } mounted () { // ——钩子函数，实例挂载之后this.student.age = 24 }原因是：受 ES5 ...
组件接受的选项大部分与Vue实例一样，而选项props是组件中非常重要的一个选项。在 Vue 中，父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。接下来通过本文给大家介绍Vue中Props，一起看看吧！单向数据流所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意...
传统方式中，许多人使用本地存储，来管理通过客户端验证生成的tokens。一个大问题是如何有更好的方式，来管理验证tokens，从而允许我们来存储更大的用户信息。 这就是Vuex的作用。 Vuex为Vue.js应用管理状态.。对于应用中所有的组件来说，它被当做中央存储，并用规则确保状态只能以可预见的方式改变。 对于经常检查本地存储来说，听起来是个更好的选择？让我们一起来探索下吧。 建立应用模块 对于这个项目，我们想创建一个使用vuex...
我的代码之前类似下面的结构 <div id="example-1" v-for="item in items"><ul><li>{{ item.message }}</li></ul> </div>结果发现不好用，数据读入了但是没有显示 于是我后来看官网的例子才明白，原来是id和v-for不在一个层级上，官网的例子如下，我按照不在一个层级上改，果然好用了 <ul id="example-1"><li v-for="item in items">{{ item.message }}</li> </ul>以上这篇Vue中的v-for指令不起效果的解决方法就是小编分享给大家的...
一、使用方法 官网地址 参考此文章（点击我） 二、常见情况 图片需要动态获取时待数据加载成功且渲染完毕后，进行节点初始化。例： axios.post(‘接口地址, 参数).then(response => { this.pages = response.data; //pages 渲染数据的数组this.$nextTick(() => { //渲染结束// mySwiper 里面的属性按需配置，详情见官网let mySwiper = new Swiper(".swiper-container", { initialSlide :0,//默认播放（值为图片下标）loop: false,...
什么是计算属性 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如： <div id="example">{{ message.split().reverse().join() }} </div>这里的表达式包含3个操作，并不是很清晰，所以遇到复杂逻辑时应该使用Vue特带的计算属性computed来进行处理。计算属性（computed）用于处理复杂逻辑 computed：{ }computed做为vue的选项是固定的 例子： <div id="itany"><p>{...
背景：在通过接口获取数据集对象后，根据业务场景需要在数据集对象上增加额外的属性 data中定义的数据集对象mindData格式示例如下 mindData: [ {label:清醒,value:清醒}, {label:朦胧,value:朦胧}, {label:嗜睡,value:嗜睡}, {label:昏睡,value:昏睡}, {label:谵妄,value:谵妄}, {label:模糊,value:模糊}]1) 通过post调用接口获取minData对象，遍历添加属性value和content（方便后续通过v-model设置绑定radio控件的选择结果值value...
首先确认 watch是一个对象，一定要当成对象来用。 对象就有键，有值。 键：就是你要监控的那个家伙，比如说$route，这个就是要监控路由的变化。或者是data中的某个变量。 值可以是函数：就是当你监控的家伙变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二个是变化后的值。 值也可以是函数名：不过这个函数名要用单引号来包裹。 第三种情况厉害了。 值是包括选项的对象：选项包括有三个。1.第一个handler：其值...