对 state 中的数组使用 v-model
摘要：./store/state.js export default { userInfo: { name: '' }, } ./store/mutations.js export default { UPDATE_NAME(state, payload = {}) { state.userInfo.na
阅读全文
posted @ 2021-09-09 10:53
随笔分类 - Vue
@vue/cli 创建一个新的 Vue 项目.md
摘要：@vue/cli vue create xxx
阅读全文
posted @ 2021-09-09 10:36
怎样在 Vue3 中使用 defineComponent 和 ref 实现一个计数器组件
摘要：Counter.vue <template> <button @click="increment">{{ count }}</button> </template> <script lang="ts"> import { defineComponent, ref } from "vue"; expo
阅读全文
posted @ 2021-09-09 10:15
怎样在 Vue3 中使用 reactive 实现一个计数器组件
摘要：Counter.vue <template> <button @click="increment">{{ count }}</button> </template> <script lang="ts"> import { reactive, toRefs } from "vue"; export d
阅读全文
posted @ 2021-09-09 10:15
怎样使用 Vue-CLI 创建 Vue3 项目
摘要：首先，需要安装 Vue-CLI，版本大于 4.5.4，然后使用 vue create <project-name>初始化项目； 然后，项目初始化使用选项3：Manually select features，选择这几项，然后回车： Vue CLI v5.0.0-beta.0 ? Please pick
阅读全文
posted @ 2021-09-09 10:10
怎样在 VS Code 中开发Vue项目格式化代码时让函数名与圆括号直接有一个空格
摘要：第一步： Ctrl + Shift + P，在搜索框中输入：settings.json，选择下面这个： 第二步： 将下面两行代码复制粘贴到 settings.json 中，保存后退出，重启vscode，这时使用：Alt + Shift + F 就可以加上了空格了。 "vetur.format.def
阅读全文
posted @ 2020-06-11 21:30
怎样在Chrome浏览器上安装 Vue Devtools 扩展程序
摘要：第一步: 前往 GitHub 下载 Vue Devtools 项目文件 https://github.com/vuejs/vue-devtools 注意: 1. 将分支切换为 master 2. 下载.zip压缩包后在本地解压 第二步: 进入解压后的文件夹, 打开powershell, 执行下面两条
阅读全文
posted @ 2019-09-24 20:02
怎样理解 Vue 组件中 data 必须为函数 ?
摘要：组件意在 复用 , 若为 对象, 则会相互干扰. 且 Vue 不允许此事发生, 规定必须为函数, 否则报错. 原理如下 对象 函数
阅读全文
posted @ 2019-08-30 21:29
怎样在 Vue 里面使用自定义事件将子组件的数据传回给父组件?
摘要：首先, Vue 里面的组件之间的数据流动是 单向 的, 数据可以从父组件传递给子组件, 但不能从子组件传递给父组件, 因为组件和组件之间是 隔离 的. 就像两个嵌套的 黑盒子 . 能通过 props 向子组件传递数据其实是因为子组件 暴露 出了这个属性到 外部, 但子组件并不知道是谁把数据传过来的.
阅读全文
posted @ 2019-08-30 20:43
怎样在 Vue 的 component 组件中使用 props ?
摘要：1. 在注册一个组件时, 添加一个 props 属性, 将需要添加的 props 作为数组的元素进行添加, 比如下面的例子中, 我们添加了一个变量 name , 他就是一个 props, 我们可以通过它来接收从 父组件 传进来的数据 ( 韩梅梅 ). 2. 上面这种形式是写死的, 一般不这样用, 而
阅读全文
posted @ 2019-08-30 15:54
怎样创建并使用 vue 组件 (component) ?
摘要：组件化开发 需要使用到组件, 围绕组件, Vue 提供了一系列功能方法, 这里仅记录组件的 最简单 的使用方法. 1. 通过 Vue.component(tagName, options) 注册一个 全局组件, 这个组件可以在不同的 Vue 实例 中使用. 2. 局部组件 在 Vue 实例中注册(声
阅读全文
posted @ 2019-08-30 13:54
怎样在 Vue 中使用 v-model 处理表单?
摘要：主要是通过 v-model 对表单元素做数据的 双向绑定. 用法其实也很简单, 只是因为表单元素有不同类型, 处理方式有些许不同, 这点需要注意. 1. 如果是 输入框 , 可以直接使用 v-model="" , 注意这里的 .trim | .number | .lazy 是三个 v-model 的
阅读全文
posted @ 2019-08-30 11:48
怎样理解 MVVM ( Model-View-ViewModel ) ?
摘要：MVVM 的 产生 / 实现 / 发展 可以写一篇很长的博客了, 这里仅写一下个人对 MVVM 的一些肤浅的认识. 1. 在 没有 MVVM 之前, 前端可以说是 jQuery一把梭 , jQuery 解决的是前端在写页面 交互/ 功能 时需要 频繁操作 dom 这一痛点, 在 简化 dom 操作
阅读全文
posted @ 2019-08-30 01:00
怎样在 Vue 中使用 事件修饰符 ?
摘要：Vue 中可以通过 v-on 来绑定事件监听函数, 不过事件会有许多额外情况, 比如 是否阻止冒泡 / 是否阻止重载 / 是否限制点击次数 / 是否可以通过按键触发 等等. 这时就需要使用到 事件修饰符. 下面是 vue 的 事件修饰符 和 按键修饰符. 事件修饰符 按键修饰符 下面是一个实际的例子
阅读全文
posted @ 2019-08-29 22:11
怎样在 Vue 里面绑定样式属性 ?
摘要：在 Vue 里绑定样式属性可以使用 v-bind:class="" 和 v-bind:style="" , 二者都可以接受 变量 / 数组 / 对象. 不同点是 v-bind:class 里面绑定变量的值是 class , 指向对应的 类选择器 样式表, 而 v-bind:style 里面绑定的变量
阅读全文
posted @ 2019-08-29 19:53
怎样使用 Vue 的监听属性 watch ?
摘要：需求: 我需要在某个数据变化时能够执行特定的动作, 比如我在输入框中输入数字 88, 系统检测到以后就会弹窗 拜拜 , 而输入其他字符则不会触发, 这种需求简直多入牛毛, 实际上这就是 自定义事件 , 和 点击 / 按下 / 滚动 这种事件是一样的, 都是符合条件以后就执行特定代码. 在 vue 里
阅读全文
posted @ 2019-08-29 17:31
怎样理解 Vue 中的计算属性 computed 和 methods ?
摘要：需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实并不好. 最理想的情况是: html 只负责展示, 绑定的数据都是 赤裸裸 的 变量, 而非 表达式
阅读全文
posted @ 2019-08-29 15:21
怎样使用 v-for ?
摘要：v-bind / v-on / v-if / v-for , 这四个指令应该是 vue 里面最常用的了, 之前已经简单记录的前三个的使用方法, 接下来就记一下 v-for 的基本用法. 1. v-for 需要使用 x in xs 的这种写法, 类似 for i in rangeA 循环, xs 代表
阅读全文
posted @ 2019-08-29 09:28
怎样理解 Vue 中的 v-if 和 v-show ?
摘要：1. v-if 实现了真正的 条件渲染, 条件为真时, 节点被创建, 相应的监听函数也会生效, 条件为假时, 节点被销毁, 触发事件监听函数不会生效. 而 v-show 只是使用了 display:none , 其元素节点始终在 dom 树中, 不会被销毁和重建. 如下所示, 按钮 A 使用了 v-
阅读全文
posted @ 2019-08-28 14:30
怎样在 Vue 中使用 v-model 实现双向数据绑定?
摘要：1. 所谓 双向数据绑定, 可以理解为: 修改 A , B 会跟着被修改, 修改 B , A 会跟着被修改. 常用在需要 进行用户输入的地方, 比如 这些 html 标签: input、select、textarea、checkbox、radio 等. 2. 下面是一个输入内容, 反转字符串的 de
阅读全文
posted @ 2019-08-28 13:26
