vue
huxiaoxiao.
努力学习中。。
展开
-
Vue实现实现一个带底部标识的横向滚动导航栏
此文章参考了 csdn 中另外两位大佬的文章,在他们的基础上又加上自己的写法。地址1: 这个是 uniapp 实现的uniapp: 实现一个优美的带底部标识的横向滚动导航栏_uniapp横向滚动导航条_CC#的博客-CSDN博客仿淘宝菜单栏左右滑动(VUE 移动端)_计算菜单分类滚动距离_浅暖呀丶的博客-CSDN博客。原创 2023-04-24 09:52:08 · 1401 阅读 · 0 评论 -
elementUI中 el-Switch 在 el-table-column 中点击无效的问题
在写项目时发现,就算绑定了 v-model ,switch开关也是不会生效,下面这个方法可以解决<el-table-column> <!-- slot-scope="scope" 用来解决不生效的问题 --><!-- scope.row.show 这里的 row 指的是 table绑定的data的数据 --> <template slot-scope="scope"> <el-swit原创 2022-03-24 17:42:04 · 4094 阅读 · 1 评论 -
使用vuecli工程开发-组件,安装vuecli脚手架构建工具(vuecli脚手架的全局安装)
安装vuecli脚手架构建工具一、 node安装(1)如果不确定自己是否安装了node,可以在命令行工具内执行: node -v (检查一下 版本);(2)如果 执行结果显示: xx 不是内部命令,说明你还没有安装node , node 安装地址:http://nodejs.cn/download/注 :安装 vue-cli 脚手架目前需要node版本为 v4.0 以上;(3)查看npm 版本(4)查看cnpm版本如果没有cnpm,我们需要使用淘宝镜像,进行安装.转载 2022-04-11 15:10:52 · 243 阅读 · 0 评论 -
element UI checkbox,通过后台传来的数据默认选中
今天写项目时碰到的一个问题,因为后台传来的是字符串,如果使用 checked 属性所需要的值为布尔值,应该也有办法解决,但我没找到,后面通过 v-model绑定后台拿到的数据,来完成的这一点小功能第一步:<el-checkbox-group>标签上v-model="role.permission"。这里role.permission 为后台拿到的数据,如图: <el-checkbox-group v-model="role.permissio原创 2022-03-22 11:36:09 · 7027 阅读 · 2 评论 -
运行 cmd 命令报错operation not permitted, mkdir D:\nodejs\node_cache\_cacache\tmp, Error: EPERM: opera
今天在初次下载好 node.js 配置好之后,使用cmd安装 vue Cli 脚手架时一直在报错,说是权限不够,在百度找了很久,后面确实在 c盘下使用管理员身份运行可以解决,但是太麻烦了,下面说一下我个人的解决方法1.找到node.js的文件夹所在位置,右击文件夹选择属性2.点击 安全, 选择 user 点击 编辑3. 在下面的权限中,勾选 完全控制,点击确定...原创 2022-04-11 15:27:50 · 3464 阅读 · 1 评论 -
去除el-select默认边框和 选中时的蓝色边框
【代码】去除el-select默认边框和 选中时的蓝色边框。原创 2022-10-27 16:43:50 · 4018 阅读 · 0 评论 -
vue3中使用 v-viewer 插件报错未定义的属性: Cannot set properties of undefined (setting ‘$viewer),和基本使用。
在网上搜了很久也没解决这个问题,在vue2中是不会报错的,后面查看官方文档和百度了几个小时以后,终于解决了,(我个人解决了,版本原因)。因为是 vue3,所以不能直接使用 Vue.use。1.先在main.js 引入。接着安装 viewerjs。原创 2022-10-08 16:23:05 · 3769 阅读 · 14 评论 -
Vue项目中使用懒加载 vue-lazy
1.首先准备好需要的图片,放在:src\common\image目录下default.jpgdefault.png懒加载使用的图片的目的:当你页面中的素材图片没有显示出来的时候,先让懒加载的图片显示出来。2.在你的Vue项目中下载vue-lazyloadcnpm install vue-lazyload --save-dev然后,到你的配置文件package.json中查看是否下载成功。 "vue-lazyload": "^1.3.3",3.在入口文件 main.js 中原创 2021-12-29 17:38:42 · 2696 阅读 · 0 评论 -
通过webpack构建vue初始化项目
1.安装node,这个是肯定要安装的2.安装vue脚手架构建工具,命令行输入npm install –g @ vue/cli3.安装webpack通过 npm 或者 cnpm安装webpack模块化打包工具npm install webpack –g或cnpm install webpack –g4.初始化 webpack 项目,执行命令:vue init webpack 123app其中 123app 是我们要建立的项目的名称,当脚本执行时会进行确认安装..原创 2021-12-27 09:00:00 · 793 阅读 · 0 评论 -
Vuex 中的 actions 与 Axios
Vuex的五大核心概念之一action,可以操作任意的异步操作,类似于mutations,但是是替代mutations来进行异步操作。actions异步其实和mutations是类似的,区别在于mutations是同步操作而且可以直接修改状态,而actions支持异步操作,但是不可以直接修改状态,所以actions提交的是mutations。这里接着上一篇文章,通过php模拟一段JSON数据,使用数据仓库中的 actions 拿取数据1.首先先把页面中state内的goods删除成一个空数组,然原创 2021-12-24 14:00:00 · 1099 阅读 · 0 评论 -
Vuecli搭建项目,实现正在进行todolisit操作
vuecli搭建vue项目,实现正在进行todolist的操作1.找到 src 文件夹下的 views 文件夹,在里面新建一个文件 myinput.vue2.在数据中心原创 2021-12-25 14:00:00 · 218 阅读 · 0 评论 -
Vuex的基本概念,和Vuex中的 state,getters,mutations
1.基本概念Vuex 是一个专为 Vue.js 应用程序开发的(数据的)状态管理模式。Vuex采用“集中式存储管理”方式去管理数据,把 这些数据 应用到 所有组件上 !!!vuex就是仓库---数据仓库--这个数据仓库里的所有的数据,是为组件来使用的!为组件来服务的!vuex 只 做 “数据” 的维护!!对vuex仓库中数据的处理,我们都放在“模型”里面。在vuex这个仓库 store 里面。2.vuex核心概念state 存储数据getters 获取数据的方式...原创 2021-12-21 20:26:07 · 638 阅读 · 0 评论 -
vue create~~初始化项目
在创建初始化项目之前,我们需要新建一个文件夹,用来存放项目,假如起名就叫做vue-project,打开这个文件夹,在物理路径位置输入cmd,打开终端vue create~~初始化项目执行命令:vue create hxx (注意:后面名称属于自定义名称)键盘上下键选择,选择自己需要的特性(上下键移动键,空格键是否选中,a键切换选择所有,i键反转选择选项)( ) Babel //( ) Babel //支持高阶语法转换( )...原创 2021-12-20 10:36:36 · 551 阅读 · 0 评论 -
基于webpack构建的vue项目的目录结构
vue项目结构下面的目录结构是基于webpack构建的vue项目的目录结构原创 2021-12-17 16:34:14 · 314 阅读 · 0 评论 -
vue router 路由守卫
vue 路由守卫的作用:用来拦截不符合规则(自己制定)的跳转。准备:<body> <div id="app"> <router-link to="/index">主页</router-link> <router-link to="/user">用户中心</router-link> <router-link to="/login">登录</router原创 2021-12-17 10:54:14 · 106 阅读 · 0 评论 -
Vue 中央事件总线(非父子组件间通信)
通过一个"空的vue实例"来进行值传递组件1--- $emit()---空vue实例---$on---组件2创建一个空实例(bus中央事件总线,或者叫中间组件)利用$emit $on的触发和监听事件 实现非父子组件的通信方法:1.在vue行挂载一个$bus作为中央处理组件Vue.prototype.$bus = new Vue();2.触发自定义事件传递数据this.$bus.$emit('自定义事件名','传递的数据')3.监听自定义事件获取数据this.$bus.原创 2021-12-17 10:05:11 · 756 阅读 · 0 评论 -
Vue组件通信中的$emit 子传父数据
子传父子组件里 通过$emit('自定义事件名',变量1,变量2)触发 事件父组件@自定义事件名='事件名'监听事件触发事件后, 通过$emit来触发 父组件 绑定在子组件标签上的 自定义事件参数1: 要触发的事件参数2: 要传递的值子组件方法里 this.$emit('sendfather',val1,val2)触发自定义事件父组件里<child @wyf="getMsgFromSon"></child>1.先在子组件中有一个数据let one原创 2021-12-16 18:41:41 · 696 阅读 · 0 评论 -
Vue组件通信(props,refs)
父子组件的通信(通讯) (组件的通信 是vue核心之一) 组件是vue的核心,组件的通信是vue的核心的核心通信:数据的“动态的实时的”传递父传子父传子:(子组件中)props属性-----父用子的时候 通过 属性 传递1.先创建根组件和一个局部组件,在根组件中注册局部组件,让局部组件成为根组件的子组件<body> <div id="app"> <one></one> </div>原创 2021-12-16 17:55:04 · 700 阅读 · 2 评论 -
Vue.router 的传参 和其中“标签跳转传参“ 和 “js跳转传参“,不同步的问题,解决方法
<body> <div id="app"> <router-link to="/aa">登录</router-link> <router-link to="/bb">注册</router-link> <router-view></router-view> </div> <template id="aa">.原创 2021-12-16 12:02:30 · 1052 阅读 · 0 评论 -
javascript中路由跳转的原理
前端路由,是一个前端不同页面的状态管理器。(路由,讲白了,就是页面跳转,这个跳转里面涉及到的路径 是 相对路径 /login /regPage)客户端中的路由,实际上就是dom元素的显示和隐藏。当页面中显示home内容的时候,about中的内容全部隐藏,反之也是一样。客户端路由有两种实现方式:基于hash 和基于html5 history api.路由 有 两种不同方式的方式: Hash 和 History举个例子: <style> ...原创 2021-12-16 10:19:07 · 1119 阅读 · 0 评论 -
Vue.router中的嵌套路由,和跳转的四种方式
嵌套路由(又叫 嵌套子路由)嵌套路由--- 通常由多层嵌套的组件组合而成。1:router-view的细分router-view第一层中,包含一个router-view2:每一个坑挖好了,要对应单独的组件路由配置routes: [ { path:'/menu', name:'menu', component:menu, //路由嵌套增加原创 2021-12-16 10:03:05 · 5507 阅读 · 0 评论 -
vue的安装和路由的基本使用
路由中有三个基本的概念 route, routes, router1.route 它是一条路由,由这个英文单词也可以看出来,它是单数。Home按钮 => home内容, 这是一条route, about按钮 => about 内容, 这是另一条路由。2.routes 是一组路由,把上面的每一条路由组合起来,形成一个数组。[{home 按钮 =>home内容 }, { about按钮 => about 内容}]3.router 是一个机制,相当于一个管理者,它来..原创 2021-12-15 11:05:45 · 719 阅读 · 1 评论 -
Vue做文字滚动
在JQ22看到的一个小案例,模仿一下首先在这里可以看出来,要渲染的只有滚动的部分,需求就是每过几秒跳到下一个先写布局部分: <div id="app"> <h1>文字滚动</h1> <div class="box"> <div class="box-left"> <span>最新公告</span> ...原创 2021-12-13 11:38:43 · 2437 阅读 · 0 评论 -
Vue写简单的分页组件小案例
1.页面中那些元素是写死的,那些是通过Vue渲染上去的 Vue渲染:页面中的列表数据,一共有几页,当前第几页,和1,2,3,4 写死的:上一页 和 下一页2.需求是什么 1.每一页显示三个数据 2.点击那一页显示当前页面的数据 3.点击上一页和下一页时切换到对应页面 4.知道当前是第几页布局样式:<div id="app"> <ul> ...原创 2021-12-09 14:49:54 · 946 阅读 · 2 评论 -
Vue组件中的通信(parent,root,children,el)
父子组件的通信(通讯) (组件的通信 是vue核心之一) 组件是vue的核心,组件的通信是vue的核心的核心通信:数据的“动态的实时的”传递通信(访问)--- 一定是 能 拿到 对方的 东西(数据中心的数据,方法中心的方法,计算属性等等)父子组件访问子访问父 parent和root父访问子 children和refs父组件 和 子组件 (父子之间 数据访问)父子组件数据互相访问vue中 $parent 以及 ref 和 $refs子实例(子组件) $pare...原创 2021-12-08 19:53:29 · 795 阅读 · 0 评论 -
Vue中的作用域插槽
作用域插槽(带数据的插槽):绑定数据的插槽slot插槽scope作用域首先声明一个根组件也就是 vm实例,在创建一个子组件: // 子组件 let child = { template:`#child` } // 根组件又叫父组件(基组件) let vm = new Vue({ el:'#app', })这里的template:`#ch原创 2021-12-08 18:37:44 · 2848 阅读 · 0 评论 -
Vue中的匿名插槽与具名插槽
slot又名插槽,是Vue的内容分发机制,组件内部的模板引擎使用slot元素作为承载分发内容的出口。插槽slot是子组件的一个模板标签元素,而这一个标签元素是否显示,以及怎么显示是由父组件决定的。slot又分三类,默认插槽,具名插槽和作用域插槽。(这里说前两种)插槽的实质是:插槽实质是对子组件的扩展,通过<slot>插槽-----向组件内部“指定位置”传递内容。1.匿名插槽默认插槽:又名匿名插槽,当slot没有指定name属性值的时候一个默认显示插槽,一个组件内只有有一个匿名原创 2021-12-07 21:59:08 · 2596 阅读 · 2 评论 -
Vue中监听属性的小案例
今天学习了一下在jq22官网发现的一个小案例,里面 运用到蛮多的 watch 监听事件和一个过滤器的小方法,在这里仿一下该案例。先查看一下成型后的效果:1.先做基础样式和布局因为页面中数据都是和Vue 实例数据中心进行绑定的,所以再写布局时,就直接把数据通过插值表达式去 表达了布局部分: <div id="app"> <p> 买入单价:<input type="number" v-model="mairu..原创 2021-12-06 17:41:22 · 700 阅读 · 0 评论 -
Vue中的按键修饰符
在我们平常登录功能的操作中,输入密码后会按下回车进行登录,这样就不需要在操作鼠标点击登录按钮了,那么这一功能在vue中是怎么实现的呢我们做一个简单的添加数据功能,来演示这个案例: <style> table{ width:760px; /* margin: 0 auto; */ border-collapse: collapse; } table td{ .原创 2021-12-06 10:18:04 · 553 阅读 · 0 评论 -
Vue自定义指令
Vue.directive("focus",{ bind:function(el){ console.log(el); // el.focus() //如果想让文本获得焦点,那么文本必须先插入到文档中才能生效 }, inserted(el){ el.focus(); } }) Vue.dir..原创 2021-12-05 11:34:56 · 408 阅读 · 0 评论 -
vue 中watch和computed的区别
computed 计算属性监听多个(数据)<body> <div id="app"> <p> <input type="text" name="" id="" v-model="num1" /> + <input type="text" name="" id="" v-model="num2" /> = <span>{{total}原创 2021-12-02 19:15:10 · 442 阅读 · 0 评论 -
Vue中的 watch监听属性
在Vue 中,computed计算属性用来监听多个数据;watch 监听单个数据;首先要确认 watch是一个对象,要当成对象来使用。键:就是那个,你要监听的那个家伙;值:可以是函数,当你监控的家伙发生变化时,需要执行的函数,这个函数有两个形参第一个是当前值(新的值),第二个是更新前的值(旧值)值也可以是函数名:不过这个函数名要用单引号来包裹。值是包括选项的对象:选项包括有三个。 1.第一个 handler:其值是一个回调函数。即监听到变化时应该执行的函数。 2.第二个是 deep:原创 2021-12-02 19:07:02 · 2122 阅读 · 0 评论 -
Vue中的计算属性
什么是计算属性:模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:<div id="app"> {{ message.split('').reverse().join('') }}</div>在这个地方,模板不再是简单的声明式逻辑。而是在插值表达式中直接反转字符串,如果你在多处用到该反转字符串时,这样写就会很麻烦,增加消耗。所以,对于任何复杂逻辑,你都应当使用计算属性。计算属性的语法:compute原创 2021-12-01 19:02:25 · 661 阅读 · 0 评论 -
Vue做随机点名册
布局部分:<div id="app"> <p>{{result}}</p> <button @click="randomName()">{{txt}}</button> </div>做个简单的点名器,不做样式。Vue部分: <script> let vm = new Vue({ el:'#app',原创 2021-11-29 10:07:02 · 1248 阅读 · 0 评论 -
vue使用计算属性完成动态心情滑竿条的制作
布局部分:<div id="slider"> <!-- 主要动画效果:字体和进度条以及表情随情绪程度百分比变化 --> <label for="range" :style="{'color':getHappinessColor}">情绪程度: {{val}}%</label><!-- 滑动杆的颜色应该与预先设置好的颜色进行绑定,颜色可随意更改 --> <!-- 情绪程度的值也应该随val原创 2021-11-26 14:11:13 · 675 阅读 · 0 评论 -
vue中的生命周期钩子函数
什么是生命周期Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载 Dom、渲染 → 更新 → 渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程,就是生命周期。在 Vue 的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册 js 方法,可以让我们用自己注册的 js 方法控制整个大局,在这些事件响应方法中的 this 直接指向的是 vue 的实例。vue 的生命周期生命周期函数,又叫钩子函数(生命周期钩原创 2021-11-25 10:07:15 · 494 阅读 · 0 评论 -
Vue中的局部组件
在Vue中我们可以自己定义(注册)局部组件定义组件名的方式:var ComponentA = { /* ... */ }var ComponentB = { /* ... */ }然后在components选项中定义你想要使用的组件:new Vue({ el: '#app',// 组件中心 components: { // 在视图层渲染 局部注册组件时 // component-a:你要在视图层调用时使用的名称 // ComponentA: 局部注册组件名称..原创 2021-11-24 10:13:15 · 725 阅读 · 0 评论 -
Vue全局组件
在Vue中我们可以自己定义(注册)全局组件定义组件名的方式:Vue.component("全局组件的名称",{一个对象})组件的使用方式:假设我定义了一个全局组件,名称为 myhead <div id="app"> <myhead></myhead> </div> 全局组件的基本使用:1.可以直接在组件中渲染文本:注意:为了方便对标签的识别,推荐在 template 后使用模板字符串.原创 2021-11-24 09:34:14 · 7777 阅读 · 0 评论 -
Vue过渡动画
在Vue 中,提供了6类名,其中包括4状态点,2个过程进入动画的三个类:v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。v-enter-to:vue2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡原创 2021-11-23 09:47:42 · 274 阅读 · 0 评论 -
Vue中使用 class 类样式的方式
在vue中为我们提供了 几种方式来使用class类的样式原创 2021-11-20 18:46:49 · 6787 阅读 · 0 评论