随笔分类 - Vue
摘要：一、slot是什么 在HTML中 slot 元素 ，作为 Web Components 技术套件的一部分，是Web组件内的一个占位符 该占位符可以在后期使用自己的标记语言填充 举个栗子 <template id="element-details-template"> <slot name="elem
阅读全文
摘要：一、作用 v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名
阅读全文
摘要：一、直接添加属性的问题 我们从一个例子开始 定义一个p标签，通过v-for指令进行遍历 然后给botton标签绑定点击事件，我们预期点击按钮时，数据新增一个属性，界面也新增一行 <p v-for="(value,key) in item" :key="key"> {{ value }} </p> <
阅读全文
摘要：双向绑定的原理： 采用数据劫持结合发布者-订阅者模式方式，使用 Object.defineProperty 来给每个对象添加 getter 和 setter ，通过数据劫持监听到数据变化的时候，把变化数据发布给订阅者。 对MVVM开发模式的理解： MVVM分为Model、View、ViewModel
阅读全文
摘要：我们知道，每个 vue 组件，其实是 Vue 的一个实例，每个 vue 组件中的 data 数据都是 Vue 原型上的属性，这就决定了，每个 vue 组件（实例）中的 data 必须是函数，而不能是对象。因为，如果是对象的话，每个 vue 组件（实例）会共用 Vue 原型上的属性，这就会造成数据混乱
阅读全文
摘要：计算属性（computed）和监听器（watch）如何选择？ 分享两篇博文： https://blog.csdn.net/itcast_cs/article/details/102802310 https://www.jianshu.com/p/cb3aa17c9f65
阅读全文
摘要：给项目添加进度条效果，先安装 nprogress 打开main.js，编写如下代码 //导入进度条插件 import NProgress from 'nprogress' //导入进度条样式 import 'nprogress/nprogress.css' ..... //请求在到达服务器之前，先会
阅读全文
摘要：1. 移除 consol.log() 的 babel 插件 安装：npm i babel-plugin-transform-remove-console -D 配置：babel.config.js： // 这是项目发布阶段需要用到的bebel插件 const prodPlugins = [] //
阅读全文
摘要：1. 创建Vue3单页面应用程序项目 官方提供两种快速创建 SPA 项目方式： 基于 vite 创建项目 （小而巧，仅支持 Vue3.x ） 基于 vue-cli 创建项目 （大而全，支持 Vue2.x 和 Vue3.x ） 2. template 模板节点 Vue2.x 只支持一个根节点 Vue3
阅读全文
摘要：1. Vue全家桶是什么 官方给 vue 的定位是前端框架，因为它提供了构建用户界面的一整套解决方案: vue (核心库) vue-router (路由方案) vuex (状态管理方案) vue 组件库 (快速搭建页面 UI 效果的方案) 以及辅助 vue 项目开发的一系列工具: vue-cli (
阅读全文
摘要：开发步骤如下： 安装和配置 Vue 和 Vant 组件库 安装Vue：vue create 项目名称（记得选上 vue-router 项） 启动项目：npm run serve 了解一下创建后的项目目录： 其中，src 里面的 components 文件夹用来存放可以复用的组件的，views 文件夹
阅读全文
摘要：# vue-router的基本使用 1. 什么是vue-router vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA（单页面应用程序） 项目 中组件的切换。 2. vue-router安装和配置步骤 ① 安装 vue-rout
阅读全文
摘要：# 动态组件 动态组件，即可以动态切换显示和隐藏的组件。 1. 动态组件的使用 vue 提供了一个内置的 <component> 组件，专门用来实现动态组件的渲染。默认情况下，切换动态组件时无法保持组件的状态（即切换了组件，再切换回来，之前的数据内容会丢失，因为之前的组件销毁了）。此时可以使用 vu
阅读全文
摘要：# ref引用 ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。 每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向一个空对象。 1. 使用 ref 引用DOM元素 如果
阅读全文
摘要：插件名称：Path Autocomplete 安装后配置： 然后将下面代码放进settings.json文件里面的大括号就行。 //配置path-autocomplete插件开始 //导入文件时是否携带扩展名 "path-autocomplete.extensionOnImport": true,
阅读全文
摘要：# 了解组件 vue 中规定:组件的后缀名是 .vue。因此，组件一般是以 .vue 后缀的，比如 App.vue 文件本质上就是一个 vue 的组件。组件化开发，根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护。 1. 组件的组成 每个 .vue 组件都由 3 部分
阅读全文
摘要：# 什么是 vue-cli vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程。 引用自 vue-cli 官网上的一句话:程序员可以专注在撰写应用上，而不必花好几天去纠结 webpack 配置的问题。 # 安装和使用vue-cli
阅读全文
摘要：# 什么是 vue 1. 构建用户界面 用 vue 往 html 页面中填充数据，非常的方便 2. 框架 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！ 要学习 vue，就是在学习 vue 框架中规定的用法！ vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex
阅读全文
