随笔分类 - Vue
vue
摘要：使用Vite搭建项目环境 Vite Vite是一个web开发构建工具，由于其原生ES模块导入方式，可以实现闪电般的冷服务器启动。 通过在终端中运行以下命令，可以使用Vite快速构建Vue项目。 使用npm： 1. npm init @vitejs/app <project-name> 2. cd <
阅读全文
摘要：v-if和v-for哪个优先级更高？如果两个同时出现，应该怎么优化得到更好的性能？ 示例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue事件处理</title> </head> <body> <
阅读全文
摘要：深入组件 该页面假设你已经阅读过了组件基础。如果你还对组件不太了解，推荐你先阅读它。 组件名 在注册一个组件的时候，我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了： const app = Vue.createApp({...}) app.component('my-component
阅读全文
摘要：安装 将 Vue.js 添加到项目中有三种主要方式： 在页面上以 CDN 包的形式导入。 对于制作原型或学习，你可以这样使用最新版本： <script src="https://unpkg.com/vue@next"></script> 下载 JavaScript 文件并自托管。 如果你想避免使用构
阅读全文
摘要：如果路由跳转使用path，必须使用query方式传参，如果使用name跳转，query和params都可以传参，建议使用query方式传参，query方式传参，参数在地址栏，当刷新页面后，参数还可以通过地址栏获取。 path跳转，query传参 name跳转，query传参 name跳转，param
阅读全文
摘要：ERROR Failed to compile with 1 error 上午10:36:11 error in ./src/components/InputComponent.vue?vue&type=style&index=0&id=62be3503&lang=scss&scoped=true&
阅读全文
摘要：Vue之创建组件之配置路由!== 第一步: 当然就是在我们的试图文件夹【views】新建一个文件夹比如home 在home文件夹下面新建一个文件index.vue 第二步：在router目录下做如下事情！ import Vue from 'vue' import VueRouter from 'vu
阅读全文
摘要：#Visual Studio中自定义代码段！ 第一步：在编辑器中进行快捷键的输入【ctrl + shift + p】 或者 点击 查看 第一个选项就是！请看下图 第二步：选择你要配置代码段的语言， 这里我会以Vue为例！ 点击vue.json(vue)之后 可以看到如下东西！我已经配置好了！其实他也
阅读全文
摘要：Vue之优化封装请求方法 ##对于代码中的请求操作 ###1、接口请求可能需要重用 ###2、实际工作中，接口非常容易变动, 改起来很麻烦！ ###我们建议的做法是把所有的请求都封装成函数然后统一的>###组织到模块中进行管理 ###这样做的好处就是:管理维护更方便,也好重用 ###封装请求本身！
阅读全文
摘要：Vue项目之实现登录功能的表单验证！ 步骤： 配置 Form表单验证; 1、必须给el-from组件绑定model 为表单数据对象 2 给需要验证的表单项 el-form-item 绑定 prop 属性需要指定表单对象中的数据名称 ###只需要写属性名就可以了！ prop="mobile" ###3
阅读全文
摘要：实现基本的登录功能思路及其步骤！ 给登陆按钮注册点击事件 获取表单数据 1. 获取表单数据就是要获取到我们在data里面定义的对象user里的mobile和code【也就是手机号和验证码！】 请求登录 处理后端响应结果 成功处理 失败处理
阅读全文
摘要：#Vue事件绑定 点击事件 @click="事件名" or v-on:click="事件名" 结构部分： <el-button type="primary" circle @click="handleClick">默认按钮</el-button> <el-button type="primary"
阅读全文
摘要：当Vue可视化工具创建不了项目时的解决办法！ 当你尝试用可视化工具创建一个Vue的项目的时候，报错， 出现什么indexOf什么什么的错误！ 我的解决办法是把可视化工具删除掉，重新下载！ 如果你是 npm install -g vue-cli 装的，就 npm uninstall -g vue-cl
阅读全文
摘要：Vue基础之Vue组件 // 组件是可以复用的Vue实例！ // 可以把经常重复的功能封装为组件！
阅读全文
摘要：Vue基础之Vue的模板语法 数据绑定 01 数据绑定最常见的形式就是使用插值表达式（两个大括号!）【也就是小胡子语法！mustache】 <body> <!-- Vue.js的应用可以分为两个重要的组成部分 一个是视图! 另一个是脚本!！ --> <!-- 下面的就是视图！ --> <div id
阅读全文
摘要：Vue基础之生命周期函数[残缺版]！ 为什么说是残缺版呢？! 因为有一些周期函数我并没有学到！所以是残缺版！ 01 beforeCreate //在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。// 简单理解就是整个页面创建之前调用的生
阅读全文
摘要：Vue基础之插值表达式的另一种用法！附加变量的监听！ 讲这个之前我们先回顾一下原来的用法！ <body> <!-- Vue.js的应用可以分为两个重要的组成部分 一个是视图! 另一个是脚本!！ --> <!-- 下面的就是视图！ --> <div id="app"> <h1>{{message}}<
阅读全文
摘要：Vue基础之用插值表达式在视图区显示数据 第一步：当然就是你要引入Vue.js这个脚本文件啦！ <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 第二步：就是你要在你HTML文件中的body中写入下面的代码： <
阅读全文