laoli360的博客

哎 今天麻了 用非脚手架的vue和el-ui来写页面 结果发现 不兼容ie浏览器这里我通过百度 确认了几种方法但是都没有实现最后实现的就是Releases · babel/babel-standalone · GitHub通过这个链接 下载 babel 来进行设置第一步先下载下载min版本的 轻量然后 第二步<script src="./js/babel.min.js"></script>引入后第三步在你要写JavaScri...

vue三种不同方式实现页面跳转Vue：router-lin 及query传参方式 1 2 3 <router-link to="/">[跳转到主页]</router-link> <router-link to="/login">[登录]</router-link> <router-link to="/logout">[登出]</router-link> ..

大家在实际工作中 可能会遇到操作token 用户数据等等的 存取到 本地localStorage中或者 cookie中的情况但是为了优化读取速度 又要使用vuex 来进行加速处理 但是对于很多人来说 难免会觉得有点脱裤子放屁的感觉用户登录后，访问其他页面需要携带token，vuex是储存在内存里面的，而内存的特点就是快，将token存在vuex中可以提高获取token速度。因为localStorage的读取是一次磁盘读取，读取速度远低于vuex的内存读取，为了避免重复读取localStorage..

<template> <el-table :data="tableData" style="width: 100%"> //---:data="用于存放请求数据回来的数组" <el-table-column label="索引值" width="400"> <template slot-scope="scope"> //--- 这里取到当前单元格 <span>{{ scope.$in.

场景:比如我们在做一个项目的时候 一开始使用的localStorage 方法存入数据 但是后面 又要修改然后又要修改来回切换很费劲这里教给大家一个统一封装管理 的方法\比如我这里保存用户的token值 存到本地localStorage我们将本地存储方式 统一保存在一个文件里,这里我统一放到一个storage.js的文件内这样 在我们需要使用的地方 可以引入使用了比如刚才的localStorage的存储token值得地方首先我们引入这个getSt...

正常工作的时候 我们的Vue脚手架 导入了很多组件,例如我们这里的vant组件,如果全放到main.js内 就不太好管理和操作.这里我就教给大家如何将一堆注册组件抽离统一管理首先我们准备一个js文件 用来装vant组件注册需要剪切的有如下剪切完毕后 只需要在main.js 引入个js文件即可实现 vant组件抽离 统一管理就是这么简单,感觉很容易吧?...

这里我们利用 axios请求 get方式获取 后端地址的数据然后通过前端网页控制台看res打印出来什么我们知晓了 他的具体位置 然后在data里面保存一个空对象用来存放这个书籍数据this.Bookobj=res.data.data然后让bookobj 接收这些数据然后实现页面数据显示这里 用了 v-for 是防止以后 书籍数据是多个 没法全部铺展 而设置的这里的obj.author 就是 res.data.data.author 依次...

component: Login// 改成这个写法component: () => import('@/views/Login.vue')它可以让 用户加载到什么组件 才会获取对应组件 方便效率降低流量数据路由懒加载 - 查看文档: 路由懒加载 | Vue Router

//加入scoped以后webpack在打包时会给当前vue组件内所有标签和组件的跟标签会加上data-v属性,而//组件内的标签没有data-v属性//需求当你想要修改组件内标签样式时有问题了//style里选择器会额外被加上data-v属性选择器//而标签身上没有data-v属性所以选不中而想要修改span标签的颜色直接写的话 是不可以的而要解决这种情况 只需要在选择器前面加个/deep/即可//...

脚手架是做vue项目时候的前备条件 而有些设置 每次都要来回重复着弄 是很麻烦的在这里教大家自定义脚手架模板vue create 起名字首先给项目起个名字 然后 运行然后选择第三项 Manually select features(手动选择功能)选择你需要的功能这里分别代表着选择vue版本 2.或者3.选择路由模式选择CSS预处理(推荐用less)选择eslint和语法风格规则选择esl...

首先 准备一个 Add的组件<template> <div> <p>子组件库存: {{ value }}</p> <button @click="addFn">增加+1</button> </div></template><script>export default { props: { value: { type: Number,

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。 v-xxxhtml+css的复用的主要形式是组件你需要对普通 DOM 元素进A行底层操作，这时候就会用到自定义指令App.vue内准备内容<template> <div> <!-- <input type="text" v-gfocus> --> <input type="text" v-focus>

正常我们调用组件的时候 肯定不希望一个组件写死了 或者进入这个组件修改各个内容这对于组件的复用性 不太好在这里我给大家讲一下 Vue的插槽用法组件 -----插槽以前折叠面板案例, 想要实现不同内容显示, 我们把折叠面板里的Pannel组件, 添加组件插槽方式之前的折叠面板案例的组件我们拿过来Pannel.vue 内容如下<template> <div> <!-- 按钮标题 --> <div class...

人是有生命的,也是有周期这一个说法的婴儿 =>少年=>青年=>中年=>老年=>黄土Vue也是有周期这一个说法的 它分为 创建=>挂载=>更新=>销毁Vue - 钩子函数Vue 框架内置函数，随着组件的生命周期阶段，自动执行组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据阶段 方法名 方法名 初始化 beforeCreate created 挂载 ..

TodoFooter.vue<template> <footer class="footer"> <span class="todo-count">剩余<strong>{{ count }}</strong></span> <ul class="filters" @click="fn"> <li> <!-- 6.1 判断谁应该有高亮样式: 动态class

组件通信-父向子-props在实际工作中,不可能每个组件的值都是一样的,这时候就需要学会组件通信,互相传值因为每个组件的变量和值都是独立的组件通信先暂时关注父传子, 子传父父: 使用其他组件的vue文件子: 被引入的组件(嵌入)例如: App.vue(父) MyProduct.vue(子)封装一个商品组件MyProduct.vue - 外部传入具体要显示的数据, 如下图所示components/MyProduct.vue - 准备标签<template&.

大家在学习vue后,肯定会需要封装一个组件 和组件相互传值的方法组件组件是可复用的 Vue 实例, 封装标签, 样式和JS代码组件化:封装的思想,把页面上可重新利用的部分封装为组件,从而方便项目的开发和维护.一个页面， 可以拆分成一个个组件，一个组件就是一个整体, 每个组件可以有自己独立的 结构 样式 和 行为(html, css和js) 组件是什么? 可复用的vue实例, 封装标签, 样式, JS 什么时候封装组件? 遇到重复标签,.

情况1: 数组翻转情况2: 数组截取情况3: 更新值数组变更方法, 就会导致v-for更新, 页面更新数组非变更方法, 返回新数组, 就不会导致v-for更新, 可采用覆盖数组或this.$set()<template> <div> <ul> <li v-for="(val, index) in arr" :key="index"> {{ val }} </li>

1.v-bind 动态属性给标签属性赋予动态值 v-bind:src='imgsrc' data return里面写imgsrc:.....2.v-on事件绑定v-on:click='btn' 单击事件 触发函数btn 也可以 @click='btn'3.修饰符如@click.stop 阻止事件冒泡@click.prevent 阻止默认行为4. v-model双向绑定用来实现vue变量和表单标签value属性双向绑定的指令比如<input type...

Vue语法-插值表达式

相信大家学习前端之前肯定听说过三件套+vue 就可以出去找工作了分别是 html css JavaScript 和vue今天就讲讲vue基础中的基础 类似于我们看到日常搭建楼房的脚手架一般在开始之前 准备一个用来调试谷歌浏览器的vue插件(没其他浏览器的哦 自行搜索吧)链接：https://pan.baidu.com/s/1onWUQ1uBi_-UPI-NkZfYBQ提取码：1oia...

实际开发中,一个项目其实就是一个个组件来组合出来一个项目比如登录信息的token保存 下面代码 可以复制复用的这里给大家展示保存到浏览器 可以用来实现判断用户登录情况// 操作认证信息token的工具函数const KEY = '****-****-**-****'// 获取tokenexport const getToken = () => { return localStorage.getItem(KEY)}// 设置tokenexport const set..

效果图如下(图片较大,请稍后)效果就是实现下拉更新数据 然后 当没有数据的时候 让他提示一个'没有更多了'的字符串首先我们打开vant的线上文档 找到list大家在看我笔记的时候 先阅读两遍上面的基础用法然后我给大家简单演示下如何使用这里我是用van-list包含需要刷新的文章列表 data () { return { articleList: [], loading: false, // 底部加载状态 finished..

这里我们以引入button按钮为例 其实很多表单 或者 时间 等等的组件 引入方式都是一样的举一反三吧.首先 yarn add element-ui -S 让我们来安装这个包main.js 全局注册 element-ui这个组件// 完整引入，main.js写入以下代码import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)这样 我们就可..

今天做的笔记是todos 待办事项项目相信大家学完vue基础后,迫不及待想实现一些功能.所以这里我会用到Vue基础语法 和一些js的知识来互相结合运用可能写的笔记不太好 大家耐心观看,有意见可以在评论区留言.我不会分享源码哦,大家想要源码还是自己看一遍敲出来最好的.自行创建目录下的子组件 和样式csstodos-创建工程和组件目录情况如下base.css内容如下hr { margin: 20px 0; border: 0; border-top: ...