vue 组件之间的通讯
摘要：使用 Vue 构建组件容易，与之相伴的就是 Vue 组件之间的通讯方式 父子组件间通讯 父组件向子组件通讯 要在 Vue 中将数据从父组件传到子组件，我们可以通过 props 来实现。将数据从父组件传到子组件，在父组件中设置一个属性，该属性绑定和子组件的 prop 相同的名称的属性值。 子组件向父组
阅读全文
posted @ 2022-03-09 15:29
随笔分类 - Vue
vue 侦听器
摘要：Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。 <div id="watch-example"> <p> Ask a yes/no question: <input v-model="question"> <
阅读全文
posted @ 2022-03-07 16:42
计算属性 vs 侦听属性
摘要：计算属性默认只有 getter，不过在需要时你也可以提供一个 setter： / ... computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // se
阅读全文
posted @ 2022-03-07 15:32
计算属性缓存 vs 方法
摘要：其实，在使用计算属性的位置，我们通过调用方法可以达到同样的效果 <p>Reversed message: "{{ reversedMessage() }}"</p> // 在组件中 methods: { reversedMessage: function () { return this.messa
阅读全文
posted @ 2022-03-07 15:22
vue 计算属性
摘要：计算属性 computed 对于复杂逻辑的计算结果，我们可以使用 计算属性 例子 <div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage
阅读全文
posted @ 2022-03-07 15:17
生成二维码优惠券
摘要：Vue 生成二维码优惠券 1、图标添加动画 @keyframes go { 0% { transform: rotateZ(0); } 100% { transform: rotateZ(360deg); } } 结合vue的class动态绑定，当点击刷新时，class值改为活动，此时旋转，延时改为
阅读全文
posted @ 2022-03-01 11:44
nextTick
摘要：nextTick 例 <template> <view class="app"> <view ref="msgview" style="color:red;">{{msg}}</view> <view v-if="msg1">Message got outside $nextTick: {{msg1
阅读全文
posted @ 2022-02-28 11:13
scoped属性与 element-ui 样式
摘要：1 、vue 文件中 style 标签内 scoped 后，有时候需要修改 elemet-ui 控件样式，但是发现不成功。 想找到解决方案，首先来看看不生效的原因 1)、首先，scoped 是如何实现局部样式的？ 查看 vue-loader 文档，根据文档可以知道，当 <style> 标签有 sco
阅读全文
posted @ 2022-02-25 14:41
mixins
摘要：混入(mixin) 提供了一种非常灵活的方式，来分发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被 "混合" 进入该组件本身的选项 例子 <template> <!-- 子组件A --> <div class="views__home__su
阅读全文
posted @ 2022-02-24 14:24
如何理解Vue数据双向绑定原理
摘要：Vue 数据双向绑定原理是通过数据劫持结合发布者-订阅者模式的方式来实现的，首先是对数据进行监听，然后当监听的属性发生变化时则告诉订阅者是否要更新，若更新就会执行对应的更新函数从而更新视图。 MVC模式 以往的MVC模式是单项绑定，即 Model 绑定到 View，当我们用 JavaScript 代
阅读全文
posted @ 2022-02-23 15:22
v-if 和 v-for 一起使用
摘要：在 vue 2.x 中， 在一个元素上同时使用 v-if 和 v-for 时， v-for 会优先作用。 在 vue 3.x 中， v-if总是优先于 v-for 生效 1、惯性使用，但 vue 2.x 中，不建议 v-for 和 v-if 使用 <div v-for="item in inHous
阅读全文
posted @ 2022-02-23 09:10
vue双向数据绑定原理
摘要：几种实现双向绑定的做法 目前几种主流的mvc框架都实现了单向数据绑定，而双向绑定无非就是在单项绑定的基础上给可输入元素添加了change事件，来动态修改model和view。 实现数据绑定的做法有大致如下几种 发布者-订阅者模式 脏值检查 数据劫持 发布者-订阅者模式 一般通过sub, pub的方式
阅读全文
posted @ 2022-02-22 10:07
vuex(7)
摘要：vuex示例： app.ts export interface StateProps { visitedViews: Array<view> }export interface view { path: string, name: string} const state = { visitedVie
阅读全文
posted @ 2022-02-14 12:15
vuex (6)
摘要：Module 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时， store对象就有可能变得相当臃肿。 为了解决以上问题，Vuex允许我们将store分割成模块( module )。 每个模块拥有自己的 state、mutation、 action、 getter 甚
阅读全文
posted @ 2022-02-14 12:13
vuex (5)
摘要：Action Action 类似于 mutation， 不同在于: Action 提交的是mutation, 而不是直接变更状态 Action 可以包含任意异步操作 const store = createStore({ state: { count:0 }, mutations: { increm
阅读全文
posted @ 2022-02-11 14:52
vuex (4)
摘要：Mutation 更改vuex的store中的状态的唯一方法时提交mutation. Vuex中的mutation非常类似于事件：每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)、这个回调函数就是我们实际进行状态更改的地方，并且它会接受state作为第一个参数
阅读全文
posted @ 2022-02-11 11:14
vuex (3)
摘要：Getter 有时候我们需要从store中的state中派生出一些状态，例如对列表进行过滤并计数 computed: { doneTodosCount{ return this.$store.state.todos.filter(todo => todo.done).length } } 如果有多个
阅读全文
posted @ 2022-02-11 08:45
vuex (2)
摘要：State 单一状态树 vuex 使用单一状态树，一个对象就包含了全部的应用层级状态，作为唯一数据源而存在。这也意味着，每个应用将仅仅包含一个store实例，单一状态树让我们能够直接地定位任一特定的状态片段。 那么我们如何在Vue组件中展示状态呢？由于Vuex的状态存储是响应式的，从store实例中
阅读全文
posted @ 2022-02-10 16:12
vuex (1)
摘要：Vuex是什么？ Vuex 是转为vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 什么是 ”状态管理模式“？ const Counter = { // 状态 data () { return { coun
阅读全文
posted @ 2022-02-10 15:08
安装@vue-cli "失败"
摘要：在新电脑上试图创建vue3.0项目时， 安装@vue-cli “失败” 这是因为， 此系统禁止运行脚本 这是你笔记本禁止运行脚本，解决办法 一、管理员身份运行终端 二、更改执行策略 PS D:\vue-test> vue -V vue : File C:\Users\admin\AppData\Ro
阅读全文
posted @ 2021-11-12 09:16
