Vue
pspxuan
这个作者很懒,什么都没留下…
展开
-
密码框禁止自动填充
密码框禁止自动填充。原创 2024-06-14 15:40:24 · 210 阅读 · 0 评论 -
vue2数据绑定以及收集依赖
Watcher 依赖收集器 以及通知更新的喇叭,可以收集并管理 Watcher。他们之间的关系是多对多的,可以相互依赖更新。注意,此时只是定义了 get 方法,并没有执行收集依赖的过程,所有此时还没有根据 data 建立 对应的 Watcher。目标对象,所有监听的数据会生成一个 Watcher 实例,一 一对应。initState 中会执行 observer, 劫持所有数据,封装一层方法,如下。数组: 重写原型上的方法,用来劫持数据的改变。主要是用来数据绑定,以及定义收集依赖的方法。原创 2023-02-07 11:01:32 · 464 阅读 · 1 评论 -
el-tree组件踩坑
业务逻辑问题: tree 组件中,同一选项会出现多次,这样使用 id 指定 key 值时会出现交互问题,element 默认 key 值唯一如下解决方法:自己循环所有数据项,创建新的 key 值,例如:语文组-张三 英语组-张三等。再根据 key 值去操作 tree 中的节点是否勾选...原创 2021-11-24 17:33:08 · 274 阅读 · 0 评论 -
vue 实现基础的拖拽排序
主要使用下面三个事件绑定@dragstart=func(index, e) 开始拖元素触发,作用于拖拽元素, index为拖拽开始的位置@dragover=func(index, e) 当元素拖动到drop元素上时触发,index为拖拽结束的位置@drop=func(index, e) 当元素放下到drop元素触发,index为拖拽结束的位置我主要是使用 @dragstart 以及 @drop 这两个事件// html<li v-for="(item, in原创 2021-11-10 17:57:15 · 1307 阅读 · 0 评论 -
vue-awesome-swiper 中文文档
vue-awesome-swiper 中文文档原创 2021-09-30 14:32:46 · 12626 阅读 · 4 评论 -
vue scoped 以及 /deep/ 原理
使用 vue 写样式时,可以使用 scoped 属性,使组件得样式只在当前组件生效原理: vue 会给每个节点添加一个属性值,并且处理样式时,给每个样式添加一个属性选择器,如下// html<div class="fotter" data-v-001></div>// css .fotter[data-v-001] { /* ... */ }...原创 2021-08-17 16:20:47 · 516 阅读 · 0 评论 -
vue mixins简述
mixins 是 vue 中用来解决代码夯余的问题主要用来储存公用代码以及方法,( 登录,登出,固定跳转等 )mixins 使用定义 mixin 对象 (这个对象本质上也是一个 vue 实例)调用 vue.mixin 方法混入当前对象// 第一步: 定义全局对象const mixin = { data() { return { //... } }, computed: { // ... }, methods: { //... }}// 第二步: 挂载.原创 2021-08-11 17:37:42 · 203 阅读 · 0 评论 -
vuex 简述
vuex 解决了组件以及路由之间相互通讯和实时更新的问题1. Statestate 提供统一公告资源,所有公共的变量可以放在 state 中存储// 声明全局变量const store = new Vuex.Store({ state: { count: 0 }})/** * 调用全局变量 * 方法一: this.$store.state 调用 */ this.$store.state.count // this 指向全局 vue 实例/** * 方法二: mapState.原创 2021-08-03 15:16:00 · 88 阅读 · 0 评论 -
elementUI el-select 不支持bulr表单验证 解决方法
思路: 自定义组件事件 bulr, 手动触发表单验证el-select 组件中定义 bulr 事件 @blur.native.capture='onclick'定义表单 rules 规则手动触发对应表单规则校验 this.$refs[formName].validateField(type) formName:表单名称 type:表单属性// html// 页面中我定义了多个表单,所以传入了表单 ref 名称。单个表单可以只传属性值<el-select @blu.原创 2021-04-30 17:13:05 · 1093 阅读 · 1 评论 -
Vue-cli3 项目优化
Vue 项目完成后,因导入了大量的或体积较大的依赖包以及插件,导致项目变得非常臃肿。下面通过几个方面来优化页面的用户体验以及提升页面的响应速度。1. nprogress 页面进度条效果1.1.使用效果在项目中安装使用 nprogress 依赖项,使用户获得更好的用户体验。使用后会在页面载入时出现页面顶部的进度条。效果如下:1.2.安装使用方法( vue ui 面板 )先在项目中下...原创 2020-04-10 16:27:36 · 353 阅读 · 0 评论 -
exports defalut 和 export
ES6 导出导入导入: import 模块名 from '模块标识符' 和 import '路径'导出: export defalut 和 export 向外暴露成员NODE 导出导入导入: var 名称 = require(‘模块标识符’)导出: module.exports 和 exports注意:语法要成套使用,不要导出用 node ,导入用 ES6 语法...原创 2020-03-06 16:44:49 · 128 阅读 · 0 评论 -
Vue render方法以及与组件渲染的区别
1.render渲染页面VUE中使用 render 属性可以配置一些覆盖当前VUE组件的html//jsvar log = { template: '<h1>登录</h1>'}var vm = new Vue({ el:'#app', data:{}, render: function (creatElements){ return cr...原创 2020-03-06 16:30:38 · 1114 阅读 · 0 评论 -
Vue中watch和computed的区别
watch使用watch可以监听当前data中的数据(变化),如下 var vm = new Vue({ //...... data: { name: "张三" }, watch: { "name": function() { //..... } } })上面的代码,我们在data中定义了...原创 2020-03-03 15:26:40 · 1873 阅读 · 0 评论 -
VUE路由简述
1.路由是什么在我们浏览网页的过程中,进入一个网页,大多时候就会发起一次http请求。而前端中的路由,就是实现在页面中跳转而不会再次发送请求。有时我们再网页中看到 地址中带有#符号,这就代表了当前使用了路由,详情点击2.路由基础使用分为五步引入Vue-router文件,需要位于Vue.js文件之后创建需要被路由使用的组件实例化 VueRouter对象,定义routers属性...原创 2020-03-02 16:50:11 · 445 阅读 · 0 评论 -
使用Vue获取DOM元素
$refs获取DOM元素Vue中,使用$refs属性可以获取DOM元素。注意:需要在DOM元素中挂载ref属性后才能使用//html <p id="app" ref = "myp" @click = "oks">ok</p> //在 DOM中,需要设置 ref属性 //js let vm = new Vue({ el: "#app"...原创 2020-02-25 16:44:17 · 2928 阅读 · 0 评论 -
Vue 组件使用简述
1.定义全局组件使用 Vue.component('组件名称', Vue.extend({}))定义全局组件//html<div id="app"> <my-com1></my-com1> //使用组件</div>//jsVue.component('myCom1', Vue.extend({ template...原创 2020-02-20 09:26:25 · 413 阅读 · 0 评论 -
Vue动画简述
概述Vue中可以使用 <transition> 和 <transition-group> 标签来定义元素的过渡或动画效果二者最大的区别是,在使用 v-for 循环时,必须使用<transition-group>标签。其他时候使用<transition>1.css类名你可以在CSS中使用过渡类名来定义,过渡的效果.v-enter:过渡...原创 2020-01-18 16:44:38 · 134 阅读 · 0 评论 -
Vue自定义指令和生命周期
1.自定义全局指令在 Vue 中,可以自定义v-if v-focus等指令的行为。定义方式:在 js 中使用 Vue.derective 定义Vue.directive('focus', {})上述代码可以看出,directive 也是vue的内置方法,有两个参数,第一个参数为指令名称(注意:这里的指令不需要带上 v- 的前缀)。第二个参数为一个对象,里面有内置的钩子函数,可以...原创 2020-01-14 16:47:46 · 2487 阅读 · 0 评论 -
Vue 定义过滤器
1.全局过滤器定义全局过滤器直接在 Vue 实例对象外定义即可在使用 {{ }} 输出数据时,可以直接在括号中加上 | +过滤器名称 ,如下//html<p>{{ msg | msgFilter }}</p> //使用过滤器。//此处 msgFilter 可以传参数。对应过滤器的第二个以及之后的参数//jsVue.filter('msgFilter', ...原创 2020-01-10 17:22:52 · 324 阅读 · 0 评论 -
Vue基础指令简述
v-bind绑定属性(单向绑定:数据 --> 视图)1.概述v-bind可以绑定html中的属性,使得可以在Vue实例对象中操作该属性属性值是一个表达式,尽管它有引号,所以说我们可以自己定义合法的表达式注意:v-bind 可以使用 : 简写<p :title = "msg + '字符串'"></p> //msg 实际的值为 Vue 定义的数据2.添加 c...原创 2020-01-08 17:13:08 · 310 阅读 · 0 评论 -
Vue事件修饰符 | | 按键修饰符 | | 表单修饰符
事件修饰符,顾名思义就是处理事件的修饰符1.修饰符预览.stop //阻止事件冒泡.prevent //组止默认时事件(例如a标签的默认跳转).capture //监听元素并优先触发在该元素上的事件(当元素发生冒泡时,谁有该事件修饰符,就先触发谁。 先看没有该修饰符的操作).self //只有点击当前元素时候,才会触发事件处理函数,该元素的事件不会因为冒泡而触发。....原创 2019-10-07 17:28:44 · 212 阅读 · 0 评论 -
vue通过属性绑定为元素绑定style行内样式
1. 直接在元素上通过 :style 写一个对象在对象中设置颜色时要注意:颜色只能用单词表示,不能使用十六进制 #… 和 rgb形式和这两种都会报错2. 在data中创建一个样式对象,通过:style引用3. 在 :style中通过数组,引用多个data上的样式对象...转载 2019-09-25 16:08:46 · 516 阅读 · 0 评论 -
Vue中v-bind与v-model指令
v-bind:单向绑定v:model : 双向绑定原创 2019-09-22 21:48:40 · 280 阅读 · 0 评论