grand_brol的博客

项目使用cli创建，只适用于cli项目。

代码段 devServer: { host: '0.0.0.0', port: port, open: true, proxy: { // detail: https://cli.vuejs.org/config/#devserver-proxy '/func': { target: process.env.VUE_APP_BASE_API, changeOrigin: true, pathRewrit

一、支付宝小程序1、支付宝小程序导航栏不支持自定义，但是可以通过改变透明度，使其隐藏，切不占据文档流"window": { "transparentTitle": "always", "defaultTitle": "", "titlePenetrate": "YES" },2、隐藏收藏按钮和返回首页 my.hideFavoriteMenu(); my.hideBackHome();3、手机号授权的确认和取消在uniapp中应该这么写 <button op

<template> <div id="app"> <ul> <li v-for="item in list" :v-key="item.id">{{item.name}}</li> </ul> <div> <input type="text" v-model="value" /> <button @click="add()">添加</button>

index.js文件import Vue from 'vue'import Vuex from 'vuex'import customModule from './module/custom'Vue.use(Vuex)export default new Vuex.Store({ strict: process.env.NODE_ENV !== 'production', state: { }, mutations: { }, actions: { }, mod

子组件<template> <div> <div>子组件：{{mag}}</div> <button @click="select(text)">点击</button> <!-- 自定义select传递方法 ，text传递数据--> </div></template>export default { // props: ["sendData"], da

axios拦截器作用axios拦截器分为请求拦截和响应拦截两种。主要作用：就会在每一次请求（响应）发起后，先一步将其拿到，处理里面的数据，比如在请求头中加入一些信息等。axios设置请求拦截传递token值axios.interceptors.request.use(function (config) { config.headers['Authorization'] = window.sessionStorage.getItem('token') return config})注

安装cnpm i axios -S在main.js入口文件下进行配置import Vue from 'vue'import axios from 'axios'Vue.prototype.$http = axios注：因为axios不是vue特有的插件，所以不能直接使用vue.use注册，上面的http部分是用户自定义的在组件中使用 methods: { click(){ this.$http.get('http://127.0.0.1:3000/a').then(

vuex的作用用来操作，存储数据，简化组件之间传值的操作，它有三大核心概念，state(取存数据)，mutations（操作数据），actions（执行异步任务）vuex的安装cnpm i vuex -Svuex的项目搭建在vue项目根目录下面需要创建一个store.js的文件，这是用来创建和使用vuexstore.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.St

安装vue-cli及其相关依赖cnpm i @vue/cli -gcnpm i @vue/cli-service -gcnpm i @vue/cli-service-global -g说明: @vue/cli就是脚手架，@vue/cli-service-global是来构建新想法的原型，@vue/cli-service是@vue/cli-service-global的依赖项，必须安装，否则报错vue命令当安装vue-cli之后，我们就可以在命令行中使用它。查看版本号 vue -V

一、组件之间切换动画不流畅1、底部出现滚动条原因组件切换时，相当于两个并行，被撑大了，解决办法给父级元素的类添加overflow-x: hidden;2、左出右进，内容浮动.v-enter { opacity: 0; transform: translateX(100%);}.v-leave-to { opacity: 0; transform: translateX(-100%);//实现从左面离开，右面进入 position: absolute;//脱离文档流解决内容浮

使用render方法渲染组件1、创建组件var tep = { template: '<h1>这是用 render渲染的组件</h1>'}2、使用render渲染 render: function(createElement) { //createElement是一个方法，意为将模板渲染为html，结构 return createElement(tep) //返回渲染为HTML结构的组件，}注：使用render渲染的组件会直接替换掉

一、监听数据改变作用通过监听对于数据的改变，来执行一些方法使用var vm = new Vue({ el: '#app', data: { msg: '' }, methods: { }, watch: { msg: function(newVal, oldVal) {

一、路由安装方式一：标签<script src="../js/vue2.0.js"></script><script src="../js/vue-router.js"></script>方式二：终端npm i -D vue-routeimport Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)二、路由的创建及使用1、创建两个组件的模板对象var

一、全局组件第一方式 // 1、定义全局组件，末班对象模板对象var com = Vue.extend({ // template里写入html结构 template: '<h3>这是全局组件</h3>'}) //2、使用模板对象，第一个参数为组件名称，第二个为模板对象 Vue.component('myCom', com)标签中使用， <!--不能有大写，有大写的中间用-连接，如<myComl>改为&l

vue-resource安装引入方式一：终端安装安装： npm i -D vue-resource导入： import VueResource from 'vue-resource'注册： Vue.(VueResource)方式二：标签引入<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>发送get请求getInfo() { //发起get

全局自定义指令Vue.directive('focus', { bind: function(el) { //表示当指令绑定到元素身上时会执行bind函数，只执行一次 //el代表被绑定指令的哪个元素，且函数中的第一个参数都为el.el是一个原生的js对象，里面有些元素的dom方法 // 绑定到元素身上时，数据尚在内存中，无法在页面中显示，所以el.focus()没有效果，而console.log('你好呀')可以显示 el.focus()

过滤器作用用于文本格式化使用位置差值表达式和v-bind表达式定义方式1、全局过滤器 Vue.filter('guolv', function(msg, ar) { // guolv过滤器名称 //msg为第一个参数为需要处理的数据 //ar为第二个参数是传递过来的值});2、私有过滤器 filters: { //定义私有过滤器 过滤器名称+处理函数 guolv: function(msg) { }}调用方式1、差值表达式调

代码块<div id="app"> <input type="button" value="加入购物车" @click="flag=!flag"> <!-- 使用钩子函数 分别代表了进入之前、中、后的状态--> <transition @before-enter="before" @enter="enter" @after-enter="after"> <div class="bl

代码块<style> /* 2、自定义两组样式，来控制动画。 */ /* v-enter，v-leave-to，一个是进入的开始，一个是离开的结束 */ .v-enter, .v-leave-to { opacity: 0; /* 位移x轴80px的位置 */ transform: translateX(80px); }

代码块html代码<div> <label>Id <input type="text" v-model="id"> </label> <label>Name <input type="text" v-model="name"> &

代码块 <div id="app"> <h3 id="h3">{{msg}}</h3> <!-- 直接赋值，字符串用''号，可能是因为干扰 --> <input type="button" value="修改msg" @click="msg='我们不好'"> </div>var vm = new Vue({ //创建一个vue实例 el: "#app