![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue学习
文章平均质量分 71
vue的学习
m0_57199856
这个作者很懒,什么都没留下…
展开
-
vue十一路由
文章目录1. vue-router 的理解2. 对 SPA 应用的理解3. 路由的理解前提:3.多级路由(多级路由)跳转(要写完整路径):1. vue-router 的理解vue 的一个插件库,专门用来实现 SPA 应用2. 对 SPA 应用的理解单页 Web 应用(single page web application,SPA)。整个应用只有一个完整的页面。点击页面中的导航链接不会刷新页面,只会做页面的局部更新。对比 多页面应用是 点击一个链接 跳转到别的页面 页面一直在刷新 跳转数据需原创 2022-05-30 00:24:08 · 108 阅读 · 0 评论 -
vue十vuex
文章目录Vuex过程1. 搭建环境进行调用5.getters的使用四个map方法的使用mapState方法:用于帮助我们映射state中的数据为计算属性mapGetters方法:用于帮助我们映射getters中的数据为计算属性mapActions方法mapMutations方法:用mapState 很轻松就可以两个组件之间传数据模块化+命名空间修改store.js开启命名空间后,组件中读取state数据:开启命名空间后,组件中读取getters数据:开启命名空间后,组件中调用dispatch开启命名空间后,原创 2022-05-30 00:22:40 · 135 阅读 · 0 评论 -
vue九插槽
文章目录插槽slot默认插槽2. 具名插槽作用域插槽也可以用来实现 子传父父组件:子组件插槽slot作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于 父组件 ===> 子组件父组件里面写子组件的标签 里面包裹别的元素子组件里面写slot 来决定插在哪分类:默认插槽、具名插槽、作用域插槽template v-slot slot-scope都用于父组件默认插槽父组件中:<Category> <div>html结构1<原创 2022-05-30 00:21:43 · 57 阅读 · 0 评论 -
vue九消息订阅与发布
文章目录消息订阅与发布消息订阅与发布一种组件间通信的方式,适用于任意组件间通信。使用步骤:引入: import pubsub from ‘pubsub-js’接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身。 methods: { demo(msgName,name){ alert(name); } }, mounted() { this.pubId=pubsub.subs原创 2022-05-30 00:20:39 · 62 阅读 · 0 评论 -
vue八全局时间总线
文章目录全局事件总线(GlobalEventBus)全局事件总线(GlobalEventBus)一种组件间通信的方式,适用于任意组件间通信。想实现一个公共组件 所有组件都可以用它来绑定事件 调用函数 所有组件都可以用它来触发事件 传递参数所有为了让所有组件都可以看到这个组件 所以让它成为 原型上的一个东西 且必须是组件(因为要用$on $emit这个是vue原型的东西 所以只有vm或者vc可以使用)让它成为谁的原型 才可以让所有组件看到 可以让它成为一个vue原型上的东西根据这原创 2022-05-30 00:19:50 · 269 阅读 · 0 评论 -
vue七ref,mixin,props
文章目录ref属性使用方式:props配置项mixin(混入)第一步定义混合:第二步:引入混合1. 可以全局引入 在main.js中2. 局部引入 给某一个组件 不太常用注意事项scoped样式ref属性被用来给元素或子组件注册引用信息(id的替代者)应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)使用方式:打标识:<h1 ref="xxx">.....</h1>或 <School ref="xxx"></Schoo原创 2022-05-30 00:18:22 · 196 阅读 · 0 评论 -
vue六自定义指令
文章目录自定义指令总结:一、定义语法:(1).局部指令:(2).全局指令:二、配置对象中常用的3个回调:三、备注:自定义指令总结:一、定义语法:(1).局部指令:对象一般用于需要元素在插入页面时就实现一些操作(函数做不到) "big-number":{ //指定与元素绑定时 bind(element,binding){ element.value=binding.va原创 2022-05-30 00:16:57 · 57 阅读 · 0 评论 -
vue五v-show v-if
绑定样式:1. class样式写法:class=“xxx” xxx可以是字符串、对象、数组。字符串写法适用于:类名不确定,要动态获取。对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。2. style样式 :style="{fontSize: xxx}"其中xxx是动态值。 :style="[a,b]"其中a、b是样式对象。样式对象值得是 fontSize这样有固定书写规范的注意v-原创 2022-05-30 00:15:17 · 240 阅读 · 0 评论 -
vue四watch
监视属性 watch通过通过vm对象的$watch()方法或watch属性来监视指定的属性当属性变化时, 回调函数自动调用, 在函数内部进行计算监视的属性必须存在,才能进行监视!!也可以监视计算属性监视的两种写法:(1). new Vue时传入watch配置(2). 通过vm.$watch监视监视属性和计算属性的书写格式一样 都是先写名称 在写要计算哪个属性 在写函数immediate: true,//初始化时 让handler调用一下computed: {//原创 2022-05-18 21:15:12 · 88 阅读 · 0 评论 -
vue三事件绑定
事件的基本使用:1.使用v-on:xxx 或绑定事件,其中xxx是事件名;2.事件的回调需要配置在methods最终会在vm上;3.methods中配置的函数,不用使用箭头函数!否则this就不是vm了;4.methods中配置的函数,都是vue所管理的函数,this的指向组件实例对象;5.@click=“demo” 和 @click=“demo($event)” 效果一致,但后者可以传参;6.methods里的函数自动有event这个参数没有传参数 可以不写括号 也会在事件触发时被调用原创 2022-05-18 21:14:12 · 1992 阅读 · 0 评论 -
vue二数据绑定和mvvm
数据绑定单向数据绑定语法:v-bind:href =“xxx” 或简写为 :href =“xxx”特点:数据只能从 data 流向页面若绑定的是value 可以简写为 :value=‘’双向数据绑定指令 v-model语法:v-mode:value=“xxx” 可以简写为v-model=‘’特点:数据不仅能从 data 流向页面,还能从页面流向 data只能用在有value值的 表单类元素 如input 单选 多选————————————————关于el和data的两种写法2.1 e原创 2022-05-18 21:13:16 · 104 阅读 · 0 评论 -
vue学习一v-bind和v-on
1. vue引入 <!-- 路径不能写./的形式 用//的形式 --> <script type="text/javascript" src="/js/vue.js"></script></head><body> <script type="text/javascript"> Vue.config.productionTip = false; </script>2. 创原创 2022-05-18 21:11:54 · 259 阅读 · 0 评论