三、VUE学习
成长中...
不坚持你就不知道坚持这件事是多么有意义!
展开
-
Vue自定义指令总结及案例
自定义指令:自定义一些指令对普通 DOM 元素进行底层操作(可注册全局指令、局部指令)。使用:如果想注册局部指令,组件中也接受一个directives的选项案例一:设置dom字体颜色一、简单入门:局部注册:<template> <div> <div class="study-directive" v-color='fontColor'>自定义指令总结:可以是变量 <!-- <div class="study-d..原创 2021-12-06 11:42:29 · 553 阅读 · 0 评论 -
vue mixins使用总结
基础:一、局部混入:1)、混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。2)、选项合并当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。①:新建minxins.js文件//minxins.js 文件export default{ data()原创 2021-12-01 18:00:34 · 5928 阅读 · 1 评论 -
vue el-tree @node-click 传自定义参数
<el-tree node-click="(data, node, item) => nodeClick(data, node, item, param)"></el-tree>nodeClick(data, node, item, param) { console.log(data) // data,node,item为默认参数 console.log(node) console.log(item) console.log(param) // par.原创 2021-05-28 11:29:51 · 3574 阅读 · 0 评论 -
vue $emit子组件传出多个参数,如何在父组件中在接收所有参数的同时添加自定义参数
提示:很多时候用$emit携带参数传出事件,并且又需要在父组件中使用自定义参数时,这时我们就无法接受到子组件传出的参数了。以下方式可同时添加自定义参数的方法。一、组件传入单个参数时://子组件传入data:this.$emit("watchData", data);//父组件接收data同时自定义index@watchData="getData($event,index)"二、组件传入多个参数时:// 子组件传入data1,data2this.$emit('.原创 2021-05-28 11:17:36 · 1139 阅读 · 0 评论 -
vue 中 this.$nextTick()说明及使用
$nextTick Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后使用$nextTick,则可以在回调中获取更新后的DOM(dom的改变是发生在nextTick()之后),这个方法作用是当数据被修改后使用这个方法,会回调获取更新后的dom再render出来 Vue.nextTick()作用:在下次dom更新循环结束之后,执行延迟回调。在修改数据之后立即使用这个方法,获得更新后的dom在以下两个情况下需要用到Vue.nextTick()1、Vue.转载 2020-06-17 16:19:10 · 848 阅读 · 0 评论 -
vue中watch的详细用法
在vue中,使用watch来监听数据的变化。watch的用法大致有四种。下面代码是watch的简单的用法:<input type="text" v-model='names'>1)、直接写一个监听处理函数,当每次监听到names值发生改变时,执行函数:export default { watch: { names(newval,oldval){//第一次绑定值不会执行此方法,只有input值发生改变后才会执行 console.log('初始值:'+o.原创 2020-06-04 11:54:46 · 741 阅读 · 0 评论 -
vue中如何动态设置元素的高度
1. 添加样式绑定<div class="container" :style="{height: scrollerHeight}"></div>2. 添加属性计算computed: { // 滚动区高度 scrollerHeight: function() { return (window.innerHeight - 50) + 'px'; //自定义高度需求 } } ...原创 2020-06-03 10:03:31 · 13072 阅读 · 0 评论 -
vue中实现点击当前元素之外的元素之执行此方法(clickoutside)
引入:importClickoutsidefrom"element-ui/src/utils/clickoutside";声明指令:export default { directives: { Clickoutside }, data() {}}使用: <div v-clickoutside="handleClose"> </div> methods: { handleClose() { console....原创 2020-06-03 09:52:11 · 2528 阅读 · 2 评论 -
element input自定义正则验证
constcheckDeptTel=(rule,value,callback)=>{constpattern=/^((0\d{2,3}-\d{7,8})|(1[3576849]\d{9}))$/if(value!==''){if(!pattern.test(value)){cal...原创 2019-10-28 14:48:38 · 8243 阅读 · 0 评论 -
vscode使用Ctrl+s保存代码自动格式化html/css/js
1、使用时首先安装一下插件:1、ESlint //代码分格检查,2、vetur // 语法高亮,Vetur支持.vue文件的语法高亮显示,除了支持template模板以外,还支持大多数主流的前端开发脚本和插件3、Prettier - Code formatter4、Manta's Stylus Supremacy // 格式化 css2、修改配置:3、设置配置内容:{...原创 2019-10-11 15:25:03 · 10300 阅读 · 0 评论 -
vuex 初学
vuex属性:有5种,分别是:State、Getter、Mutation、 Module。实用场景,注册商家时信息过多,分步填写信息1、安装:npm install vuex --save2、使用:在main.js中注入:import Vuex from 'vuex'Vue.use(Vuex)3、在src 中新建stroe文件,创建index.js,registe...原创 2019-08-24 17:15:49 · 155 阅读 · 0 评论 -
vue 过滤器 filter的使用
使用:由“管道” (|)符号 指示{{ message | handleStr}}1、组件内局部定义:filters: { handleStr: function (str) { return str.toUpperCase() } }, created () { },2、创建vue实例之前全局定义:Vue.filter('hanl...原创 2019-08-27 15:22:23 · 186 阅读 · 0 评论 -
vue-router 路由守卫
vue-router中有3中导航守卫:“导航”表示路由正在发生改变。1、全局守卫:(1)、全局前置守卫:router.beforeEach((to, from, next) => { if (to.name === 'Login') { if (localStorage.getItem('token')) { next({ na...原创 2019-09-18 21:12:18 · 250 阅读 · 0 评论 -
vue 组件及动态组件使用
写在前言:组件:是可复用的 Vue 实例。在注册一个组件的时候,我们始终需要给它一个名字,该组件名就是 Vue.component 的第一个参数。组件命规则:1、使用 kebab-caseVue.component('my-component-name', { /* ... */ })当使用 kebab-case (短横线分隔命名) 定义一个组件时,你也必须在引用这个自定...原创 2019-09-19 11:57:57 · 158 阅读 · 0 评论 -
vue父子组件传值
父组件传值给子组件:子组件通过props接受父组件传值。1、父组件 parent.vue<template> <div class="hello"> <h1>父组件</h1> <div style="padding-bottom:150px"> <Children :value='pare...原创 2019-09-19 12:22:04 · 262 阅读 · 0 评论 -
vue路由传参方式及解决传参刷新页面参数丢失问题
1、当使用params传参时,刷新页面会导致参数丢失: onRouter() { this.$router.push({ name: 'Index', params: { mm: '0000' } }) },接受页面: mounted(){ console.log(this.$route.params.mm) },此种传参方式参数...原创 2019-09-19 13:42:56 · 2290 阅读 · 5 评论 -
vue项目搭建及关联远程仓库
1、环境安装:安装nodejs,node下载: https://nodejs.org/en/ 安装淘宝镜像: npm config set registry https://registry.npm.taobao.org 全局安装 vue-cli : npm install --global vue-cli 2、搭建项目创建项目: vue init...原创 2019-08-24 17:12:51 · 1409 阅读 · 0 评论