vue基础知识
vue基础知识学习
_MadD
求战者安,求安者亡。
展开
-
自定义指令
自定义指令的作用除了内置指令外,Vue 也允许注册自定义指令。有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候使用自定义指令更为方便。自定义指令文档: https://cn.vuejs.org/v2/guide/custom-directive.html注册与使用自定义指令方式注册全局指令:// 指令名不要带 v- Vue.directive('指令名', { // el 代表使用了此指令的那个 DOM 元素 // binding 可获取使用了此指令的绑定值 等原创 2020-09-30 09:31:53 · 722 阅读 · 0 评论 -
Vue 内置指令总结
参考:https://cn.vuejs.org/v2/api/#指令v-html 内容按普通 HTML 插入,可防止 XSS 攻击v-show 根据表达式的真假值,切换元素的 display CSS 属性来显示隐藏元素v-if 根据表达式的真假值,来渲染元素v-else 前面必须有 v-if 或 v-else-ifv-else-if 前面必须有 v-if 或 v-else-ifv-for 遍历的数组或对象v-on 绑定事件监听器v-bind 用于绑定元素属性v-model 在表单控件或者组原创 2020-09-30 09:32:10 · 177 阅读 · 0 评论 -
过渡&动画效果
元素在显示和隐藏时,实现过滤或者动画的效果。常用的过渡和动画都是使用 CSS 来实现的在 CSS 中操作 trasition (过滤 )或 animation (动画)达到不同效果为目标元素添加一个父元素 , 让父元素通过自动应用 class 类名来达到效果过渡与动画时,会为对应元素动态添加的相关 class 类名:xxx-enter :定义显示前的效果。xxx-enter-active :定义显示过程的效果。xxx-enter-to : 定义显示后的效果。xxx-leave : 定义隐藏原创 2020-09-30 09:32:25 · 355 阅读 · 0 评论 -
表单数据双向绑定 v-model
单向绑定:数据变,视图变;视图变(浏览器控制台上更新html),数据不变;上面的都是单向绑定双向绑定:数据变,视图变;视图变(在输入框更新),数据变;v-model 指令用于表单数据双向绑定,针对以下类型:text 文本textarea 多行文本radio 单选按钮checkbox 复选框select 下拉框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2020-09-30 09:32:40 · 268 阅读 · 0 评论 -
事件处理 v-on
事件处理方法完整格式: v-on:事件名=“函数名” 或 v-on:事件名=“函数名(参数……)”缩写格式: @事件名=“函数名” 或 @事件名=“函数名(参数……)” 注意: @ 后面没有冒号event :函数中的默认形参,代表原生 DOM 事件当调用的函数,有多个参数传入时,需要使用原生DOM事件,则通过 $event 作为实参传入作用:用于监听 DOM 事件事件修饰符.stop 阻止单击事件继续传播 event.stopPropagation().prevent 阻止事件默认行为 ev原创 2020-09-08 22:22:18 · 128 阅读 · 0 评论 -
列表渲染v-for
列表渲染指令v-for 迭代数组语法: v-for="(alias, index) in array"说明: alias : 数组元素迭代的别名; index : 数组索引值从0开始(可选)举例:<div v-for="item in items" :key="item.id"></div> <div v-for="(item, index) in items" :key="item.id"></div>`items` 是源数据数组, `i原创 2020-09-08 21:47:18 · 204 阅读 · 0 评论 -
条件渲染 v-if
v-if 是否渲染当前元素v-elsev-else-ifv-show 与 v-if 类似,只是元素始终会被渲染并保留在 DOM 中,只是简单切换元素的 CSS 属性 display 来显示或隐藏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia原创 2020-09-08 21:29:31 · 177 阅读 · 0 评论 -
Class 与 Style 绑定 v-bind
通过 class 列表和 style 指定样式是数据绑定的一个常见需求。它们都是元素的属性,都用 v-bind 处理,其中表达式结果的类型可以是:字符串、对象或数组。语法格式:v-bind:class='表达式' 或 :class='表达式' class 的表达式可以为: 字符串 :class="activeClass" 对象 :class="{active: isActive, error: hasError}" 数组 :class="['active', 'error']" 注意要加上原创 2020-09-08 20:48:31 · 64 阅读 · 0 评论 -
监听器 watch
当属性数据发生变化时,对应属性的回调函数会自动调用, 在函数内部进行计算;通过 watch 选项 或者 vm 实例的 $watch() 来监听指定的属性。<body> <div id="app"> 数学:<input type="text" v-model="mathScore"> 英语:<input type="text" v-model="englishScore"><br> <原创 2020-09-08 20:14:25 · 122 阅读 · 0 评论 -
vue中的计算属性computed
computed 选项定义计算属性。计算属性 类似于 methods 选项中定义的函数:1>计算属性 会进行缓存,只在相关响应式依赖发生改变时它们才会重新求值。2>函数 每次都会执行函数体进行计算。<body> <div id="app"> 数学:<input type="text" v-model="mathScore"> 英语:<input type="text" v-model="englishSco原创 2020-09-08 15:59:38 · 247 阅读 · 0 评论 -
在vue项目中引入阿里图标库
使用Vue技术栈开发不仅效率高,而且很友好,而且还有很多基于vue的UI框架,例如:element等,但是这类框架美中不足的是,图标太少。为了解决这个问题,不得不引入第三方字体库,今天以阿里图标库为例,如何在vue中使用。1、首先找到合适图标,然后点击添加入库,接着点击右上角的购物车图标。2、你刚才选择的图标就能在侧边栏看到了,选择要加入的项目(提前建好的项目),点击确定。3、进入我的项目页面,就能看到所有选择好的图标,点击下载至本地按钮。4、文件解压后,将所有文件复制到如下目录。5、在m转载 2020-09-04 14:49:01 · 606 阅读 · 0 评论 -
vue项目中抽离API调用接口
在 src/api 下创建每个页面的api请求文件,例如:在 src/api 下创建 member.js , 调用接口代码如下:import request from '@/utils/request'export default { // 获取会员列表数据 getList() { return request({ url: '/member/list', method: 'get' }) },原创 2020-08-20 20:46:56 · 1401 阅读 · 0 评论 -
自定义创建 axios 对象
import axios from 'axios'import { Loading, Message } from 'element-ui';const loading = { loadingInstance: null, // Loading 实例 // 打开加载 open: function () { // 创建实例,而且会打开加载 窗口 console.log(this.loadingInstance, 'loadingInstance'原创 2020-08-19 22:31:23 · 289 阅读 · 0 评论 -
解决刷新页面回到登录页面
当前在 permission.js 路由拦截中是通过浏览器 localStorage 获取 token 值,但现在使用的Vuex状态管理,那我们希望通过 store 来获取 token 状态值.在 src\permission.js 中将获取 token 方式替换为从 store 状态中获取, 如下:注意要import导入store。。。import store from './store'router.beforeEach((to, from , next) => { // 1.原创 2020-08-19 21:11:58 · 6308 阅读 · 1 评论 -
vue项目封装auth.js工具,用vuex实现登录信息校验管理token
1.在 src\utils\ 目录下创建 auth.js, 封装 token 和 用户信息工具模块const TOKEN_KEY = 'mxg-msm-token'const USER_KEY = 'mxg-msm-user' // 获取 token export function getToken() { return localStorage.getItem(TOKEN_KEY) }// 保存 token export function setToken(token) { retu原创 2020-08-19 20:51:27 · 4719 阅读 · 0 评论 -
Vue Router 中的路由前置钩子函数( beforeEach ),路由地址校验
首先再src文件下创建permission.js文件然后编写代码/*权限校验: 通过router路由前置钩子函数 beforeEach() , 在跳转路由前进行拦截判断是否已经登录, 如果已登录,则进行路由跳转,如果没有则回到登录页*/import router from './router' import {getUserInfo} from './api/login' /*前置路由钩子函数 to :即将要进入的目标路由对象 from :当前导航正要离开的路由对象 next : 调用该方法,进入原创 2020-08-18 19:41:11 · 1094 阅读 · 0 评论 -
VSCode设置vue模板
VSCode设置vue模板文件 => 首选项 => user snippet然后输入vue,选择vue-html.json然后编辑模板,保存// An highlighted block "Print to console": { "prefix": "vue", "body": [ "<template>", " <div>", " $0", " </div>", "</template>原创 2020-08-17 19:55:16 · 508 阅读 · 0 评论 -
VS Code基本插件安装及使用整理
安装浏览器插件,用于访问html页面,在 扩展栏 的搜索框中输入 open in browser使用 Alt + B 使用默认浏览器打开当前 html 页面,或 Shift + Alt + B 选择其他浏览器安装Vue插件,安装后有快捷提示Vetur–语法高亮、智能感知、Emmet等Auto Rename Tag–自动完成另一侧标签的同步修改Path Intellisense–自动路径...原创 2020-01-27 20:10:21 · 472 阅读 · 0 评论