VUE相关知识学习
文章平均质量分 78
VUE相关知识学习
@Autowire
这个作者很懒,什么都没留下…
展开
-
IVIEW常用问题解决
【代码】IVIEW常用问题解决。原创 2023-06-23 09:24:22 · 264 阅读 · 0 评论 -
FE_VUE路由 细致解读router/index.js的配置
router-link 其实是一种a标签的方式实现路由跳转的,但是,如果是button 或者是无须用户操作的自动跳转,就无法实现路由跳转了吗?很多情况下,由于列表页的组件已经被销毁,所以我们返回到列表页后页面会置顶,不得不又重新下拉查看列表,这样就做了很多没有必要的操作,也是不符合用户的预期。一般路由文件单独放在router文件夹,在src目录下,创建router文件夹,文件夹下,创建index.js,用来实现路由的创建。我们在一个很长的列表页往下拉,然后点击列表中的某一个数据进入到详情页查看。原创 2023-05-19 14:50:34 · 4324 阅读 · 0 评论 -
FE_Vue学习笔记 框架的执行流程详解
完整的vue中有三分之一都是模板解析器【vue -> js】,之后webpack打包完成后,会生成一个非常大的文件,这个时候vue的模板解析器就不适合出现在这里,没有作用【这里模板已经编译完成了,浏览器可以认识了】。简而言之,没有了模板解析器的vue体积很小,打包之后能够更加轻量,代价就是写的时候要用那行render去写。2、因为 vue.runtime.xxx.js 没有模板解析器,所以不能使用template配置项,需要使用render函数接收到的createrElement函数去指定具体内容。原创 2023-05-10 17:24:40 · 707 阅读 · 0 评论 -
FE_Vue学习笔记 - 模板语法[插值 & 指令] & 数据绑定[v-bind & v-model] & 数据代理 & 事件
插值语法:功能:用于解析标签体内容。写法:{{xxx}},xxx是JS表达式,且可以直接读取到data中所有属性。起始标签和结束标签中间夹的内容就是标签体。指令语法:功能:用于解析标签(包括:标签属性、标签体内容、绑定事件…)。或写为,xxx同样为JS表达式。Vue中有很多指令,且形式都是 v-???,此处的v-bind只是例子。原创 2023-05-12 15:14:30 · 752 阅读 · 0 评论 -
FE_Vue学习笔记 常用指令的学习【v-model filters v-text v-html v-cloak v-once v-pre 自定义指令】
备注:v-model的三个修饰符:过滤器定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。语法:v-text指令:4 v-html 向指定节点中渲染包含html结构的内容v-html指令:作用:向指定节点中渲染包含html结构的内容。与插值语法的区别:1)v-html会替换掉节点中所有的内容,{{ xxx }}则不会。2)v-html可识别html结构。严重注意:v-html有安全性问题!1)在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。2)一原创 2023-05-13 09:07:23 · 1019 阅读 · 0 评论 -
FE_Vue学习笔记 条件渲染[v-show v-if] & 列表渲染[v-for] 列表过滤 列表排序
使用template可以使其里面的内容在html的结构中不变。条件渲染:2 列表渲染 v-for用于展示列表数据语法:v-for=“(item,index) in xxx” :key=“yyy”可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)上面的key可以做一个替换:in 也可以替换为 of:除了数组还可以遍历对象:测试遍历字符串:看似没有问题,其实问题很大,如下:遍历列表时key的作用(index作为key)遍历列表时key的作用(id作为key)原创 2023-05-12 16:12:35 · 745 阅读 · 0 评论 -
FE_Vue框架的重要属性讲解【ref props mixin】
对于传统的HTML而言,id 和 ref确实没有什么差别,但是对于组件来说就不一样了。给组件加id,打印出获取的结果为组件所对应的完整DOM结构。给组件加ref,打印出获取的结果就是VueComponent实例。原创 2023-05-11 08:33:08 · 383 阅读 · 0 评论 -
FE_Vue学习笔记 - 计算属性 & 监视属性
两者都能实现的时候,选用computed比较简单,需要异步计算等比较复杂实现的时候用watch。简写的前提是,如果不需要immediate、deep等的配置项,即配置项中只有handler的时候才可以简写。2)如果计算属性要被修改,那必须直接写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。// immediate:true, //初始化时让hander()调用一下, 默认为false。定义:要用的属性不存在,要通过已有的属性计算得来。// 2)当依赖的数据发生改变时会被再次调用。原创 2023-05-12 15:51:00 · 753 阅读 · 0 评论 -
FE_Vue学习笔记 - 数据代理
Vue中的数据代理是一种机制,通过它,Vue实例(vm)可以代理其数据对象(data)中的属性操作。在Vue实例化时,会将data对象中的所有属性收集到vm._data中,属性值不再直接给出,而是通过响应式getter获取,当data中数据改变时,就会调用响应式setter,导致重新解析模板,然后生成新的虚拟DOM进行新旧DOM对比,最后更新页面。通过这种方式,Vue实例可以方便地代理其数据对象中的属性操作,使得我们不需要直接操作data对象,简化了代码并提高了可维护性。原创 2023-09-15 16:04:18 · 206 阅读 · 0 评论 -
FE_Vue学习笔记 Vue监视数据的原理
Vue会监视data中所有层次的数据。如何监测对象中的数据?通过setter实现监视,且要在new Vue时就传入要监测的数据。1)对象中后追加的属性,Vue默认不做响应式处理。2)如需给后添加的属性做响应式,请使用如下API:vm . set(target , propertyName / index , value) 或如何监测数组中的数据?通过包裹数组更新元素的方法实现,本质就是做了两件事:1)调用原生对应的方法对数组进行更新。2)重新解析模板,进而更新页面。原创 2023-05-12 16:33:35 · 648 阅读 · 0 评论 -
FE_Vue学习笔记 - 组件的理解vue vc
当我们写构造函数的时候,属性我们直接写在构造函数体内,方法我们写在原型上。原创 2023-09-15 17:11:37 · 602 阅读 · 0 评论 -
FE_Vue学习笔记 - 组件的理解vue vc
比如说在创建组件实例对象、传入配置项的时候,是不可以写el的,但是在创建vm的时候,配置对象中就可以写el。学校地址:{{ schoolAddress }}学校地址:{{ schoolAddress }}学校地址:{{ schoolAddress }}学校地址:{{ schoolAddress }}学校地址:{{ schoolAddress }}学生名称:{{ studentName }}原创 2023-01-07 17:31:58 · 1024 阅读 · 0 评论 -
FE_Vue学习笔记 插槽 slot
插槽分为匿名插槽、具名插槽、作用域插槽。当项目中一个组件可以多次复用时,我们可以把这个组件封装成单独的.vue文件,从而可以在不同的页面中引入该组件,从而实现组件的复用,我们称这个.vue文件为子组件,需要用到这个子组件的页面我们称为父组件。当子组件中可以决定自己的大概结构,但是有些内容的展示与否,或者展示的形式子组件不能决定,需要由父组件来决定之后传给子组件时,需要使用到作用域插槽(匿名插槽和具名插槽辅助作用域插槽),父组件决定内容,子组件决定位置。子组件通过slot。原创 2023-05-13 14:16:16 · 518 阅读 · 0 评论 -
FE_Vue核心知识的学习 v-model 双向绑定原理
接着,我们还需要有一个指令解析器Compile,对每个节点元素进行扫描和解析,将相关指令(如v-model,v-on)对应初始化成一个订阅者Watcher,并替换模板数据或者绑定相应的函数,此时当订阅者Watcher接收到相应属性的变化,就会执行对应的更新函数,从而更新视图。而Vue中的push却不等于 Array.prototype.push ,因为Vue中的push是经过包装的。中的属性做了一个数据劫持,把data里面的属性做了修改/升级,以便更好地完成响应式操作。以上代码是起作用的,这是为什么呢?原创 2023-03-12 08:48:39 · 393 阅读 · 0 评论 -
FE_Vue核心知识的学习 - 组件通信方式【文档1】
父亲可以修改子代穿过来的值吗?【可以修改穿过来的值,但是这种修改不会影响到子组件的值】原创 2023-03-06 13:54:32 · 396 阅读 · 0 评论 -
FE_Vue核心知识的学习 - 组件通信方式【文档2】
父子组件之间通信非父子组件之间通信(兄弟组件、隔代关系组件等)原创 2023-03-10 14:28:23 · 237 阅读 · 0 评论 -
FE_Vue核心知识的学习 - 组件通信方式-vuex【文档3】
概念:专门在 Vue 中实现集中式状态(数据)管理的一个 Vue 插件,对 vue 应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。全局事件总线的读写太过混乱了!我们的解决方案是:借助mapState生成计算属性。对于:$store.getters.bigSum。这里是使用传统的方法。原创 2023-03-09 14:57:44 · 338 阅读 · 0 评论 -
FE_Vue学习笔记 路由基本使用
路由【route】就是一组key-value的对应关系。多个路由,需要经过路由器【router】的管理。SPA (single page web application)应用 - 单页面web应用【一个index.html】1)单页Web应用(single page web application, SPA)。2)整个应用只有一个完整的页面。3)点击页面中的导航链接不会刷新页面,只会做页面的局部更新。4)数据需要通过 ajax 请求获取。原创 2023-05-13 11:34:29 · 784 阅读 · 0 评论 -
FE_Vue学习笔记 配置代理解决跨域[CORS ]的问题
利用vue的脚手架巧妙的解决ajax跨域的问题。原创 2023-02-26 12:27:15 · 831 阅读 · 0 评论 -
FE_Vue核心知识的学习 生命周期函数探究
*父组件的更新钩子将在其子组件的更新钩子之后调用。**这个钩子会在组件的任意 DOM 更新后被调用,这些更新可能是由不同的状态变更导致的。重要:mounted是实例创建期间的最后一个生命周期函数,当执行完mounted之后,实例已经被完全创建好了,此时,如果没有其他操作的话,这个实例就静静的躺在我们的内存中,并且一动不动。组件的组件实例初始化动作:初始化一个空的Vue实例对象,此时,这个对象身上只有一个默认的声明周期函数和默认事件,其他的东西都没未创建【数据代理等】重要:数据是新的,但是页面是旧的。原创 2023-03-05 11:50:10 · 593 阅读 · 0 评论 -
FE_Vue核心知识的学习 由【v-if && v-show】引出父子组件的生命周期函数调用的问题
我们在vue的父组件调用子组件时,往往会出现各种声明周期函数乱调用的问题,例如,我们本来打算在组件被引用的时候调用子组件的mounted方法,但是 在父组件刷新的时候,此时并没有调用子组件,但是子组件的声明周期函数mounted方法已经被调用了。这里主要是因为【v-show】,那我们改为【v-if】该如何呢?这个时候发现 子组件的 声明周期函数并没有调用。原创 2023-03-09 16:04:03 · 300 阅读 · 0 评论 -
FE_Vue核心知识的学习- 从宏任务 微任务 的角度来解读 $nextTick的原理
nextTick 执行的回调函数是一个异步的。功能:获取更新后的DOM。当我们使用 $nextTick 之后:ok。如下操作是有问题的:不ok。原理是什么样子的呢?原创 2023-03-11 10:55:18 · 119 阅读 · 0 评论 -
FE_Vue核心知识的学习 Vue - v-if与v-for的优先级相关
官方不推荐两者同时使用v-if v-for。原创 2023-03-10 15:05:16 · 105 阅读 · 0 评论