![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
厉害的明大神
这个作者很懒,什么都没留下…
展开
-
vuex使用与解析
Vuex是什么?官方解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。个人理解:Vuex就是用来进行组件之间进行数据交换的第三方 “仓库”,组件可以把想要共享的数据存放在这里面,别的组件想要的之后直接调取即可。Vuex原理个人理解它就是通过 全局混入 一个对象,在该对象的 beforeCreate 声明周期函数中,对每一个组件添加了一个属性 $store,值就是使用Vuex时所创建的原创 2020-12-03 16:26:57 · 89 阅读 · 0 评论 -
vue组件及插槽的使用
父子组件父子组件是组件之间的一种关系,这个关系并不是绝对的,而是相对的。通常,如果在A组件中 使用 了B组件,那么就称A组件为B组件的子组件,相应地,B组件就称为A组件的子组件。<!-- A组件 --><template> <div> <!-- 3、使用 --> <B></B> </div></template><script>/* 在工程化项目中,组件想原创 2020-11-30 11:03:23 · 296 阅读 · 0 评论 -
组件定义和使用
组件组件可以扩展 HTML 元素,封装可重用的代码。vue中的组件分为全局组件和局部组件全局组件全局组件:Vue.component(组件名(不能是已经存在的html标签),{配置项})在配置项中,除了没有 el项 和要有 template项 外,其他的跟vm一样 // 全局组件 Vue.component('my-h1', { data() { // 组件中的data必须是一个函数(函数返回一个对象):是为了保证数据的独立 return {原创 2020-11-26 09:11:07 · 247 阅读 · 0 评论 -
VueDOM更新笔记
DOM更新vue的DOM更新是一个异步操作:可以提高编译效率,避免性能浪费。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <h1>{{name}}</h1> <ul&原创 2020-11-24 16:38:36 · 142 阅读 · 0 评论 -
vue过滤器使用方法
vue过滤器使用方法过滤器分全局过滤器和局部过滤器。和自定义指令一样,过滤器对应的函数中的this是window(无论是全局的还是局部的),而不是当前vue的实例。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app">原创 2020-11-24 14:02:43 · 651 阅读 · 0 评论 -
vue计算属性使用方法
vue计算属性使用方法<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <h1>{{name}}</h1> <input type="text" v-model="name"&原创 2020-11-24 14:02:16 · 1030 阅读 · 0 评论 -
Vue设计模式(发布订阅,观察者)
观察者模式与发布订阅模式对比有人说观察者模式是发布订阅的升级版,也有人说发布订阅是进阶版的观察者模式,但是无论是观察者模式还是发布订阅模式,它们都是定义了对象之间的一种一对多的依赖关系。观察者模式当目标对象的状态发生改变时,所有它里面的被观察的对象,都会得到通知,并执行相应的操作。 // 目标对象类 function Sub() { this.subs = []; // 观察者列表 } Sub.prototype = { con原创 2020-11-23 15:39:36 · 1273 阅读 · 0 评论 -
Vue自定义指令使用场景(权限校验)
利用自定义指令实现权限校验// directive.js// 控制元素显示不显示Vue.directive('premission1', function(el, obj){ // 控制 display的值即可 el.style.display = obj.value > 3? 'none': 'block'; });// 控制元素加载不加载,需要用到钩子函数 insteredVue.directive('premission2',{ inserted(el, obj) {原创 2020-11-20 15:52:23 · 202 阅读 · 0 评论 -
Vue自定义指令怎么用
自定义指令vue中凡是 v- 开头的行内属性,都被认为是指令,不同的指令可以完成或实现不同的功效。vue自带的指令有时候无法满足实际需求,这时就需要我们自己“创建”指令,也就是自定义指令。自定义指令分为全局自定义指令和局部自定义指令。全局自定义指令全局自定义指令:Vue.directive(指令名, function(el,obj){…})适用范围:整个项目中都可以使用// 例如Vue.directive('color', function(el, obj){ // 用了几次v-原创 2020-11-20 15:00:52 · 319 阅读 · 0 评论 -
vue中常用的指令有什么
vue中常用的指令/* v-model='xx':一般是用在表单元素上,input框内容发生改变,所有用到这个变量的地方都会自动更新 v-text='xx':相当于 innerText,不能识别结构 v-html='xx':相当于 innerHTML,能识别结构 v-cloak:专门用来提供解决小胡子的显示问题,需要搭配css使用 当vue编译完成之后,会把这个属性删掉,这是css样式就不起作用了 v-once:有这个指令的原创 2020-11-20 15:00:15 · 658 阅读 · 0 评论