vue
文章平均质量分 63
酷酷的旭
微信871943670
展开
-
vuex练习
npm install vuex --savenpm add vuexnpm install vuex@3npm i node-sass@4.14.1 --save-dev npm i sass-loader@7.3.1 --save-dev// 和router同级创建store文件夹 index.js文件// 需要用到Vue变量引入import Vue from 'vue'//使用vuex //1 下载// 引入vuex暴漏函数对象import Vuex from 'vuex'/原创 2022-04-10 01:37:36 · 584 阅读 · 0 评论 -
Vue清除定时器优化方案
this.clock = setInterval(()=>{ this.nums = this.nums+1 console.log(this.nums) },1000) beforeDestroy(){ clearInterval(this.clock) this.clock223 = null }一个定时器,然后在beforeDestroy中清除,今天看到有一个优化方案.原创 2020-10-26 17:22:12 · 1767 阅读 · 2 评论 -
h5 animation 旋转动画
<template> <div id="wrapper"> <div class="aaa"></div> <div class="bbb"></div> <div class="ccc"></div> </div></template><script>export default {};</script><st.原创 2020-07-08 15:46:52 · 2404 阅读 · 0 评论 -
vue非父子传值 创建公共文件bus.js
<template> <div> <h1>app</h1> <one></one> <two></two> </div></template><script>import one from "./one.vue"...原创 2019-11-04 18:11:27 · 3894 阅读 · 4 评论 -
provide inject越级得实例
<template> <div> <child ref="chil"> <span slot-scope="props" ref="span"> {{props.value}} {{props.aaa}} {{value}}</span> </child> val...原创 2019-11-04 15:45:44 · 3762 阅读 · 0 评论 -
this.$refs
给组件加 ref打印结果 this.$refs.comp 是 vue 组件,this.$refs.span 打印出来的是 html 节点,这也是 ref 用在组件和 html 原生标签上的区别。可以通过 $refs 得到组件,进而调用组件的变量和方法,如 this.$refs.comp.value 拿到了组件内部变量 value 值。所以可以通过 ref 操纵组件上的内容(推荐用 props ...原创 2019-11-04 14:04:09 · 30063 阅读 · 1 评论 -
scoped slot插槽模板使用的属性是组件中的属性
如果希望插槽模板中使用的属性是组件中的属性时,就用到了 scoped slot。<template> <div> <child> <h1 slot="asd" slot-scope="props">{{props.value}}</h1> <h2 slot="dsa" sl...原创 2019-11-04 13:55:16 · 4589 阅读 · 0 评论 -
作用域插槽slot
通常,插槽内使用的属性,使用的是引用组件的组件的属性值。<template> <div> <child v-model="value"> <span>{{value}}</span> </child> </div></template><scrip...原创 2019-11-04 13:30:08 · 3905 阅读 · 0 评论 -
slot具名插槽 VUE子组件自定义事件在父组件显示
slot具名插槽 通过 slot 的 name 属性可以指定插入多个内容。VUE子组件自定义事件在父组件显示<template> <div> <h3>父组件</h3> 输入得显示:{{value}} <child v-on:huoQuNums="aaa"> <span slot="hea...原创 2019-11-04 11:18:11 · 4708 阅读 · 0 评论 -
slot 插槽 简单使用
<template> <div> <comp-one v-model="value" :aaa="value"> <span>this is content</span> <div>hahah</div> </comp-one> </div>...原创 2019-11-04 10:10:09 · 3801 阅读 · 0 评论 -
vue-cli生成项目地址去掉#号
vue的路由在默认的hash模式下,url会带有一个#去掉的话加上mode: 'history', 板成history模式就可以了如果改变之后样式出现问题可以把./换成/修改前:<link rel="stylesheet" href="./static/css/base.css">修改后:<link rel="stylesheet" href="/static/cs...原创 2019-11-01 16:24:39 · 6465 阅读 · 0 评论 -
(Vue)局部混入mixin混入用法
今天无意在百度上搜了一下mixins,然后哐哐得出来的都是mixin的概念,mixins的原理(几句话咱也没看懂),有几个是用法的,但是说的也是含含糊糊。。还有的画思维导图的。。挺简单的问题非要复杂化。。。 其实我就想知道咋用,能干什么,其他的我真不关心。。(最好带那种步骤的才好~ haha…)好了,步入正题,mixin官方文档上得解释是:官方文档介绍的。。有点官方。。。反正我第一遍是没看...原创 2019-10-30 18:12:01 · 8003 阅读 · 0 评论 -
axios 模块化管理接口
// Http.js// 在http.js文件中,处理axiosimport axios from 'axios'// 引入qs模块,用来序列化post类型的数据import QS from 'qs'import { Http2SecureServer } from 'http2';// 环境的切换// 我们的项目环境可能有开发环境、测试环境和生产环境。我们通过node的环境变量来匹...原创 2019-10-29 15:34:49 · 5704 阅读 · 0 评论 -
vue引入css js模块
<style lang="stylus" rel="stylesheet/stylus" scoped>@import '~src/stylus/mixin';@import '~src/styles/base.styl';@import '~src/styles/page-img.styl';@import '~src/styles/page-common.styl';&l...原创 2019-10-29 14:48:59 · 5775 阅读 · 0 评论 -
vuex
npm install vuex --save//main.js// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'imp...原创 2019-10-28 15:57:06 · 5402 阅读 · 0 评论 -
vue v-bind:class
<template> <div> <h3>styleDemo</h3> <div v-bind:class="{ active: isActive }"></div> </div> </template><script>expor...原创 2019-10-28 13:36:59 · 5446 阅读 · 0 评论 -
vue父传子 子传父 prop定义方法
简单的例子 没有多余代码,父传子<template>//父组件 引用子组件aaa 两种写法传递num1,num2 <div> <aaa v-bind:father1="num1" :father2="num2"></aaa> </div></template><script>import ...原创 2019-10-27 11:53:25 · 10830 阅读 · 0 评论 -
vue指令
v-on 指令让元素和方法产生绑定关系v-if和v-showv-if是真正的条件渲染,天剑为假的时候不渲染该元素,为真才渲染v-show是条件显示,无论真假,作用该指令的DOM始终都会渲染,它的原理就是通过css样式来控制的v-for用来渲染数组、对象v-for = “item in todos”item是随便起的,表示数组中的每一项元素in是固定语法todos是要遍历的数组动态...原创 2018-12-03 10:27:42 · 5296 阅读 · 0 评论 -
利用vue-cli搭建vue项目
1.安装一个脚手架工具 #安装全局命令行工具,在任何位置执行都可以 npm install --global vue-cli npm i -g vue-cli2.安装完成后会在你的终端多出一个命令’vue’安装完成后 输入 vue--help3.使用工具生成项目 #找到你想把项目存储的位置 然后执行下面的命令 vue-webpack-demo是项目起的名字 vue init ...原创 2018-12-14 10:46:23 · 5384 阅读 · 0 评论 -
vue-router router-link
个人理解vue-router能够实现当我们点击某个导航链接的时候能够动态的展示一个组件使用方法:安装 :npm install vue-router在main.js中加载使用import Vuerouter fom 'vue-router //加载路由模块Vue.use(VueRouter) //注册到Vue中才可以使用配置路由表const router ...原创 2019-06-02 06:18:46 · 5894 阅读 · 0 评论 -
axios
1安装npm install axios在哪个组件用就在哪引包import axios from ‘axios’get请求axios.get(‘http://localhost:3000/hers’).then(function(res){请求成功会自动调用该方法})。...原创 2019-06-02 18:22:00 · 5989 阅读 · 0 评论 -
流程
创建一个组件我们可以在commponents文件夹下创建一个文件名为login文件夹这样好处是如果代码多了好维护原创 2019-06-03 01:30:14 · 5469 阅读 · 0 评论 -
路由导航守卫
我们可以通过守卫来判断是否登录如果登录放行,否则不放行全局守卫//任何视图导航都要经过这//该函数有三个参数to 去哪from 来自哪里next 放行的信号router.beforeEach((to,from,next)=>{//...//这样谁也进不来//但next()就是谁都能过来//所以要判断//如果用户是非||/login视图,则校验其是否登录//如果登录...原创 2019-06-03 02:08:57 · 5372 阅读 · 0 评论 -
Promise回调地狱
//回调地狱就是异步套异步,功能没问题,代码不好维护,异步的四个指令,结果不一定是a,b,c,d如果我只想要a结束b 结束c c结束d 那只有异步嵌套套到最后就会形成这个样子//Promise对象有一个then方法.then可以继续向后,then可以return一个数据,下一个then可以接收Promise基本用法//Promise是ES6新增的一个构造函数//Promis...原创 2019-06-03 06:31:35 · 5513 阅读 · 0 评论 -
vue+element
<el-form-item label="权限:" prop="defaultRole"> <el-select v-model="defaultRole" multiple placeholder="请选择权限" clearable @change="aaa"> <el-option label="没有权限" value=...原创 2019-07-08 09:42:14 · 6306 阅读 · 0 评论 -
vue-router 3级路由
import Layout from '@/layout'const ptrECard = { path: '/ptrECard', component: Layout, redirect: '/ptrECard', name: 'ptrECard', meta: { title: 'ptrECard', icon: 'logistics' }, c...原创 2019-07-08 15:13:04 · 8671 阅读 · 0 评论 -
element-table表格点击详情页返回之前的页码
我这里用到的本地存储,然后可以直接把这段代码粘到请求前后,适当的位置上就可以实现,代码在图片下面~~*欢迎大家留言交流~~~~*//详情页<el-button size="small" @click="goBackList">返回</el-button> goBackList() { localStorage.setItem('nowPage', JS...原创 2019-07-27 14:41:24 · 6831 阅读 · 0 评论 -
axios 发 post 请求,后端接收不到参数的解决方案
axios.post(“http://192.xxx.0.xxx:8095/app-driver/insure/YunfeiPay?amount=” +String(this.options[this.value - 1].amountPayment) +“&grabsingleId=” +this.$route.query.grabsingleid +“&amount...原创 2019-08-30 13:35:09 · 5633 阅读 · 0 评论 -
vue上传头像显示在页面中base64
body部分<img src="" style="height: 60px; width: 60px;" id="portrait"> <div class="logo"> 点击上传头像 <input type="file" class="shangchuan"原创 2018-11-19 15:50:23 · 5938 阅读 · 0 评论