Young的博客

公司最近有微信公众号的需求，那么微信登录授权和如何使用WX-JSSDk实现分享等等肯定是最头疼的问题。本人也是第一次开发微信公众号，在网上看了很多篇博客，最终选定了两种方法，并且亲测有效。一、通过全局，在router.afterEach中定义1.首先通过yarn add weixin-js-sdk/ npm i weixin-js-sdk2.将微信jsdk挂载到全局上在utils目录下新建...

一般项目比较大的时候，这个时候如果不优化项目，h5项目就会加载很慢。这里提供一些优化技巧，其实一般项目都可以这样做，引入cdn，压缩代码，图片懒加载，splitChunk分割代码，去掉console.log下面代码示例。1.使用cdnvue.config.jsconst isProduction = process.env.NODE_ENV !== 'development' // 开发和测...

前面一开始的时候我并没有在项目中增加eslint代码规范，eslint对于协同工作和代码规范都是很重要的工具，那么现在就在已有的项目上配置eslint。1.通过vue add eslint命令官网配置地址命令安装相关依赖之后，会弹出相关的配置选项1） Pick an ESLint config，选择Prettier2） Pick additional lint features: ...

这一章主要是讲路由权限配置，微信登录授权的设计思路以及测试微信登录授权的小技巧1.路由权限1）首先我们得在src目录新建一个setting.js文件setting.jsmodule.exports = { title: '', // 设置页面的过渡效果 needPageTrans: true, wxConfig: { appId: '0000', appSe...

这一篇主要是指令、过滤器、路由、Store的配置、axios的二次封装以及使用1.过滤器的配置1)在filters目录新建filters/index.js,目录结构如下：└─src │ filters │ index.jsfilters/index.js/** * @description 过滤时间格式，传入时间戳， 根据参数返回不同格式 */// 过...

这一章主要是有关vue.config.js的配置和开发、生产、测试环境的全局变量配置以及使用

这一篇主要是安装和配置

一、项目描述刚开始的时候，为了快速开发原生app以及微信h5网页。公司决定采用一套代码来解决，即用微信h5网页的代码，嵌套到原生端（ios和android）。这样开发起来原生端就方便快捷写，主要商品详情以及支付的逻辑都可以由微信h5这边来解决，只不过要对原生端进行兼容处理。那直接从项目结构说起吧。二、项目目录我这次主要用vue-cli4.0构建的项目，大家升级脚手架的时候可以参考其他的文章升...

vue中使用指令解决iphonex底部的适配问题在网上也看了很多的博客，怎么去解决iphoneX底部自适配的，最通用还是去用css的env(safe-area-inset-bottom)样式去解决，具体的用法我就不多说了，大家可以看下csdn env...

1.作用：v-model用于父子组件之间相互通信的一种方法 ,如果用传统的通过在子组件中的this.$emit通知父组件去$on去监听这个事件会很麻烦，v-model相对于更便捷一些2.使用：我们想在子组件中更改checked属性并且通知父组件中checked发生改变，我们可以将{{checked}}展示在页面中父组件<template> <div class="h...

1. 非vuex实现 非父组件之间的通信 原理是：在父组件或者全局创建一个事件仓储eventHub，然后通过$emit 和 $on 实现通信1.1 通过在window上绑定eventHub的Vue实例对象，具体实现方法如下： 目录结构 在绑定eventHub实例对象之前需要import Vue from ‘vue’，然后根组件中使用window.eventHub...

1.首先安装vue-router ，在项目的文件夹中使用npm命令即npm install vue-router –save（提示：如果你在vue-cli脚手架工具中已经选择安装路由可以不用执行这一步）2.在实战中，一般路由放在src/router/index.js中具体操作如下 路由的配置，需要一个实例一个路由对象，然后在路由中配置中数组，具体如下，其中component...

1.Vue提供全局的api,Vue.Component,在写data数据的时候最好用函数返回数据，这样做是为了避免在使用多个这个组件时，数据变化而导致组件的数据都变了。Vue.component('my-header',{ template: '',//渲染模板 data: function () { return { a: 1, b: 2 }

实例对象Vue前面的nodeJs安装以及npm安装vue-cli和webpack就不作解释了，可以参考网上其他的网站以及相关博客进行学习。var my = new Vue({ el: '#app',//装载对象的位置 template: '这里是一段文字',//使用的渲染模板 data: {//这是我们需要的数据 fruit: 'apple'

vue中过度动画v-if和v-show都可以使用，首先要明白四个状态，v-enter(刚开始进入) ，v-enter-active(进入过程中到进入完毕),v-leave-enter(刚开始离开),v-leave-enter-active(离开过程中到离开)，示例图如下 好的，弄清楚了这四种状态，然后我们就可以简单的开始transition过渡的实操了,在v-enter-active以及v-

前面我讲了基本组件的写法，现在一起学下父组件怎样传递数据到子组件，以及子组件传递数据到父组件的1.父组件传递数据到子组件1.1 通过props传递父组件App.vue中a big-num=98>a>//传递big-num父组件源码template> div id="app"> --> component-a big-num=98>co

1.computed计算属性常用于当value值变化时重新对值进行计算。举个简单的例子（当输入框中的value值变化时，输出结果为无数字的字符串）：//html"text" v-model="value"/>{{valueWithoutNum}}//data中data () {value: ''}//computed属性中computed: { vauleWithoutNum

v-model具有双向数据绑定的功能，可以绑定数组和字符串，不过，在绑定之前，需要将我们需要绑定的数据进行初始化。 1.当输入框的值改变时，{{value}}中的值会跟着改变//html "text" v-model="value" value="apple"/> {{value}}//datadata () { value: ''}2.input为checkbo

基本指令的写法都是以v-开头，例如v-html，v-bind:title……等等。 现在说下基本指令一些用法：1.基本的形式,v-text和v-html的区别网页上的显示效果2.v-for的使用代码（循环遍历数组）效果图 说明：如果需要索引的话可以写成如下形式（vue2.0的写法） div v-for="(item,index)