Vue小笔记
WinterWang0207
github: wangwenqi0207
工作繁忙博客许久未更新 非常抱歉
展开
-
vue 配置baseurl
config文件夹下新建global.jsconst BASE_URL = 'http://xxxxxxx'export default { BASE_URL}main.js添加到全局import global_ from '../config/global'Vue.prototype.GLOBAL = global_;组件里使用: created() {...原创 2020-01-02 10:27:53 · 1068 阅读 · 0 评论 -
vue 循环遍历背景图
//循环背景图获取index<template> <div id="app"> <div class='pic' v-for="(item,index) in list" :key=index :style="{backgroundImage:'url(' + item.img+ ')', ...原创 2019-12-25 17:41:57 · 3264 阅读 · 0 评论 -
vue 插槽 作用域插槽 控制同一子组件视图不同
爷爷组件.vue//父组件传值,控制相同子组件内部不同变化<template> <div id="app"> <!-- son组件 --> <son :show="false"> <span slot="header">我是子组件header</span> <!...原创 2019-12-25 16:23:59 · 390 阅读 · 0 评论 -
vue 修饰符
//修饰符<template> <div id="example-3"> <!-- lazy在“change”时而非“input”时更新 --> <input v-model.lazy="msg"> 转换数字 <input v-model.number="age" type="number"> 去收尾空格 ...原创 2019-12-25 15:46:53 · 111 阅读 · 0 评论 -
vue 小知识 不同元素绑定同一事件 传值
//不同元素绑定同一事件 传值<template> <div id="example-3"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button></div>...原创 2019-12-25 15:25:08 · 449 阅读 · 0 评论 -
vue 通过router路由控制 同一组件router-view视图显示位置
/app路径下视图显示:/login路径下视图显示:app.vue组件视图: 使用name属性<template> <div id="app"> <!-- 使用命名视图 控制同一个路径的视图显示位置 --> <router-view></router-view> <router-v...原创 2019-12-25 15:15:56 · 2997 阅读 · 0 评论 -
vue 小知识点 声明式渲染 鼠标悬停显示信息
// 声明式渲染 鼠标悬停显示信息<template> <div id="app2"> <span :title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息! </span></div></template><script>export default {...原创 2019-12-25 14:45:12 · 1512 阅读 · 0 评论 -
vue 小知识点 循环JSON数据 v-pre
<template> <div id="app"> <ul> <li v-for="(val, key,index) in obj" :key='index'> <p>{{val}}:{{key}}</p> </li> </ul>...原创 2019-12-25 14:42:11 · 465 阅读 · 0 评论 -
vue 常用路由守卫
全局前置守卫to:router即将进入的路由对象 from:当前导航即将离开的路由 next:Function,进行管道中的一个钩子,如果执行完了,则导航的状态就是 confirmed (确认的);否则为false,终止导航。router.beforeEach((to,from,next)=>{ let token = getCookie("token"); consol...原创 2019-10-31 11:27:24 · 846 阅读 · 0 评论 -
vue +饿了么 系统管理 查看和修改
查看传值 表格中的button 点击button查看<template slot-scope="scope"> <el-button type="primary" size="medium" @click="handleEdit(scope.$index, sco...原创 2019-08-28 16:59:33 · 259 阅读 · 0 评论 -
vue router alias 同一页面配置 两个不同的path 路径
效果 注意顶部路径变化router.js 路由页面配置使用 alias:’‘ 配置其他路径即可import Vue from 'vue'import Router from 'vue-router'import index from '@/components/index'import son2 from '@/components/son2'Vue.use(Rou...原创 2019-07-28 18:08:56 · 5955 阅读 · 0 评论 -
vue router 路由传参
第一种 params{ path: '/son1', name:"son1", component: son1,}为路由命名 name:"son1",在路由跳转时,指定命名路由,传参1 <router-link :to="{name:'son1',params:{id:2,name:'winter',age:18}}" tag...原创 2019-07-28 17:39:14 · 531 阅读 · 0 评论 -
Vue.set 修改数组中的值
因JavaScript规则 我们无法在vue中通过这样this.outdata[0]='ddd'去改变数组中下标的值,页面不会触发更新所以此时要改变就需要用到Vue.set上demo<template> <div class="hello"> <h1>vue.set</h1> ...原创 2019-07-25 22:31:41 · 6842 阅读 · 0 评论 -
vue-router 笔记
vue-router包含的功能:嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式,在 IE9 中自动降级 自定义的滚动条行为HTML<div id="app"> <h1>He...转载 2019-06-17 17:29:58 · 385 阅读 · 0 评论 -
vue-router的懒加载模式
vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出现长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载的时间。不使用懒加载写法:import Vue from 'vue'import Route...转载 2019-06-04 11:18:33 · 1023 阅读 · 0 评论 -
vue 判断页面是首次进入还是再次刷新
<template> <div> 判断页面是首次进入还是再次刷新 </div></template> <script>export default { data(){ return{ } }, m...转载 2019-05-28 17:47:18 · 16122 阅读 · 4 评论 -
vue 基础学习笔记【一】
vue.js简介概念:构建用户界面的渐进式框架。(渐进式:不必一开始就用Vue所有的全家桶,根据场景,官方提供了方便的框架供你使用。)Vue 的核心库只关注视图层。【引入vue】可以创建一个 .html 文件,然后通过如下方式引入 Vue: <!-- 开发环境版本,包含了有帮助的命令行警告 --><script src="https://cdn.j...原创 2019-02-16 21:35:27 · 177 阅读 · 0 评论 -
vue 基础学习笔记【二】
父子间传值1、父组件可以使用 props 把数据传给子组件。2、子组件可以使用 $emit 触发父组件的自定义事件。父传子:1 父组件 data(){ return{ msg:"儿子儿子,我是你爸爸", }},复制代码2 父组件 import Child from "./Child"<Child :title="msg" />3 子组件 ...原创 2019-02-16 21:36:24 · 173 阅读 · 0 评论 -
vue项目移动端适配
配置 flexible安装 lib-flexible1.在命令行中运行如下安装:npm i lib-flexible --save2.在项目入口文件 main.js 里 引入 lib-flexible引入 lib-flexibleimport 'lib-flexible/flexible'3.在项目根目录的 index.html 中添加如下 meta添加 meta 标签...转载 2019-02-11 10:47:55 · 3338 阅读 · 0 评论 -
vue 点击按钮 路由跳转指定页面
最终效果:点击指定按钮,跳转指定 /login 页面代码:<button @click="gotolink" class="btn btn-success">点击跳转页面</button> methods:{ gotolink(){ //点击跳转至上次浏览页面 // this.$router.g...原创 2019-02-12 20:42:47 · 86901 阅读 · 23 评论 -
vue 二级三级路由配置
最终效果:二级嵌套三级index.js页面路由配置:二级:在所在页面路由对象里,加children:[继续配置路径],页面path可以自己定义三级:和二级一样 { path: '/about', name: 'about', component: about, redirect: '/about/home', chi...原创 2019-02-12 20:57:46 · 6379 阅读 · 1 评论 -
vue 路由安全守卫
全局守卫效果:1 点击登陆或者注册按钮,跳转至相应登陆或者注册页面2 点击导航其他按钮,提示用户未登陆不能跳转,然后默认返回登陆页面全局守卫代码:index.js的路由配置:const router = new Router({ routes: []})main.js页面:to是要去的页面,from是要离开的,next是个函数,否则就展示哪个页面rou...原创 2019-02-12 21:43:49 · 9646 阅读 · 4 评论 -
vue 3.0脚手架 【一】
本机升级vue3.0npm install -g @vue/cli 3.0脚手架创建:vue create 项目名称 启动项目:npm run serve 添加插件方式:vue add vuetifyvue add axios也可使用之前npm install 的方式添加界面会有明显变化的可以通过add添加比较方便 全局环境变量:1.在根目录下,创...原创 2019-02-13 12:51:21 · 578 阅读 · 0 评论 -
vue 开发中报错点【一】
本页目录:定时器问题打包后生成 .map文件的问题fastClick的300ms延迟解决方案查看打包后各文件的体积路由懒加载(也叫延迟加载)首屏加载速度很慢CSS的coped私有作用域创建项目时,项目名不能够有大写字母如何刷新当前组件页面?vue使用webPack打包发布后页面显示空白 定时器问题:我在a页面写一个定时,让他每秒钟打印一个1,然...原创 2019-02-13 17:21:53 · 311 阅读 · 0 评论 -
vue 开发中报错点【二】
本页目录npm安装依赖报错npm install 报错chromedriver 记录IE9中, 请求服务器数据并用v-for渲染option标签出现只显示第一个字的问题elementUI的el-input删除操作无法触发数据变动监听mounted钩子函数中请求数据导致页面闪屏问题class动态绑定 三元写法vue获取后端数据应该在created还是mounted方法...原创 2019-02-13 21:56:57 · 290 阅读 · 0 评论 -
vue 面试问题总结
vue-cli 工程常用的 npm 命令有哪些?全局安装 vue-clinpm install --global vue-cli创建一个基于 webpack 模板的新项目vue init webpack my-project进入项目目录,运行cd my-projectnpm installnpm run devvue-cli 生成 生产环境部署资源 的 npm命令:npm...原创 2019-02-14 14:34:11 · 6805 阅读 · 2 评论 -
vuex的使用
1.vuexvuex官网的解释是:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化vuex包含五个基本的对象state :存储状态。 getters :派生状态 mutations : 提交状态修改,这是vuex中唯一修改state的方式,但是不支持异步操作,第一个参数默认为s...转载 2019-02-25 15:12:44 · 191 阅读 · 0 评论 -
vue 中引入使用其他字体
1 .在src下新建文件夹common,将字体文件放入2.在common文件中新建font.css@font-face { font-family: 'SourceHanSans'; //自定义文字名 src: url('./SourceHanSansCN-Normal.otf'); //路径引入文字 font-weight: normal; ...原创 2019-04-30 11:35:35 · 5121 阅读 · 1 评论 -
vue 中使用rem布局
1.src下新建rem.js(function(window, document) { // 给hotcss开辟个命名空间,别问我为什么,我要给你准备你会用到的方法,免得用到的时候还要自己写。 const hotcss = {};(function() { // 根据devicePixelRatio自定计算scale // 可以有效解决移动端...原创 2019-05-10 14:26:34 · 239 阅读 · 0 评论 -
vue 中使用封装好的 cookie
1.assets文件夹 / js文件夹 /新建cookie.js文件//获取cookie、var setCookie = function setCookie(cname, cvalue, exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); v...原创 2019-05-10 14:35:03 · 573 阅读 · 0 评论 -
vue中使用sass
先安装npm install node-sass --save-devnpm install node-sass --save-devnpm install style-loader --save-dev如果npm安装报错,就安装cnpm配置loader在项目中的build目录找到webpack.base.conf.js文件,在该文件module.export中的mo...原创 2019-05-30 10:03:14 · 2728 阅读 · 0 评论 -
Vue 引用阿里小图标 移动端rem布局 v-touch使用
阿里小图标1.创建font文件夹,将阿里小图标下载放入此2.main.js中引入import './assets/font/iconfont.css'3.直接使用即可<i class="iconfont icon-fanhui"></i>移动端rem布局1.创建rem.js2.rem.js内容! function(n) {...原创 2019-01-31 20:57:22 · 773 阅读 · 0 评论