![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 67
kjs--
好的坏的都是风景
展开
-
项目readme(3)
项目readme文件原创 2022-12-13 11:45:45 · 407 阅读 · 0 评论 -
element-ui 使用(5)
element-ui 使用(5)15.DatePicker 日期选择器用于选择或输入日期以「日」为基本单位,基础的日期选择控件使用 <el-date-picker v-model="value1" type="date" placeholder="选择日期"> </el-date-picker>Attributes 属性value / v-model绑定值 类型date(DatePicker) / array(D原创 2021-05-19 21:02:22 · 660 阅读 · 1 评论 -
element-ui 使用(4)
velement-ui 使用(4)10.Form 表单 ✨由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据W3C 标准中有如下规定:当一个 form 元素中只有一个输入框时,在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为,可以在<el-form>标签上添加 @submit.native.preventnative原生prevent默认行为使用form表单Form Attributes form表单标签的属性model表单数据对象✨原创 2021-05-19 20:30:32 · 392 阅读 · 1 评论 -
element-ui 使用(3)
element-ui 使用(3)记录近期所使用element-ui组件的过程使用过程中用到的element文档https://element.eleme.cn/#/zh-CN/component/installation7.Tab ,Tabs 标签页分隔内容上有关联但属于不同类别的数据集合。Tabs 组件提供了选项卡功能,默认选中第一个标签页使用:<template> <el-tabs v-model="activeName" @tab-click="handleC原创 2021-05-17 20:58:02 · 978 阅读 · 2 评论 -
element-ui 使用(2)
element-ui 使用(2)记录近期所使用element-ui组件的过程使用过程中用到的element文档https://element.eleme.cn/#/zh-CN/component/installationLayout 布局element-ui通过基础的 24 分栏,迅速简便地创建布局。(bootstrap是栅格系统是12个分栏)简述组件名称组件功能概述Message消息提示–常用主动操作后的反馈提示Icon字体图标–提供了一套常用的图标集合U原创 2021-05-16 21:41:12 · 693 阅读 · 6 评论 -
element-ui 使用
element-ui 使用(1)记录近期所使用element-ui组件的过程使用过程中用到的element文档https://element.eleme.cn/#/zh-CN/component/installation一.element-ui的团队Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,提供了配套设计资源,帮助你的网站快速成型。由饿了么公司前端团队开源。二.安装npm 安装官方都推荐使用 npm 的方式安装,它能更好地和 webpack 打原创 2021-05-16 20:05:53 · 546 阅读 · 0 评论 -
个人博客搭建过程(2)
个人博客搭建过程(2)概述本文主要简单记录一下本人使用vuepress搭建个人博客的过程一个 VuePress 网站是一个由Vue、Vue Router和webpack驱动的单页应用。Markdown 拓展原创 2021-05-05 21:10:25 · 194 阅读 · 1 评论 -
env.development 和 .env.production环境文件 process.env属性
模式模式是 Vue CLI 项目中一个重要的概念。默认情况下,一个 Vue CLI 项目有三个模式: 开发,测试,生产development 模式用于 vue-cli-service servetest模式用于 vue-cli-service test:unitproduction 模式用于 vue-cli-service build 和 vue-cli-service test:e2evue官方文档环境文件文件名作用.env在所有的环境中被载入.env.loc原创 2021-05-03 20:40:52 · 1115 阅读 · 3 评论 -
vuex基础
vuex基础为什么会有Vuex ?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。vuex是采用集中式管理组件依赖的共享数据的一个工具,可以解决不同组件数据共享问题。结论修改state状态必须通过mutationsmutations只能执行同步代码,类似ajax,定时器之类的代码不能在mutations中执行执行异步代码,要通过actions,然后将数据提交给mutati原创 2021-05-02 20:33:16 · 193 阅读 · 3 评论 -
vant-ui 使用(3)
vant-ui 使用(3)记录近期所使用vantui组件的过程使用过程中用到的vant文档https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#tong-guo-npm-an-zhuang7.Tab 标签页标签数量超过 5 个时,标签栏可以在水平方向上滚动,切换时会自动将当前标签居中。使用<van-tabs v-model="active"> <van-tab title="标签 1">内容 1</van-原创 2021-04-26 21:50:11 · 1075 阅读 · 0 评论 -
vant-ui 使用(2)
vant-ui 使用(2)记录近期所使用vantui组件的过程使用过程中用到的vant文档https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#tong-guo-npm-an-zhuangToast 轻提示1.介绍使用了toast的页面效果就是会弹出一个黑色半透明的提示可能使用到的业务场景...原创 2021-04-26 20:48:47 · 1193 阅读 · 0 评论 -
vue3和vue2常见的使用差异 setup函数
vue3和vue2常见的使用差异学习路径单文件组件的渲染setup单文件组件的template子传父的实现单文件组件的渲染1.通过解构的方式获取createApp2.通过createApp创建应用import { createApp } from 'vue'import App from './App.vue'// import './index.css'createApp(App).mount('#app')单文件组件的templatevue 规定:每个组件对应的模板结构原创 2021-04-20 21:54:17 · 6462 阅读 · 0 评论 -
使用vite创建单页应用
使用vite创建单页应用学习路径vite介绍创建 vite 的项目梳理项目的结构vite 项目的运行流程vite介绍·vite·是vue 官方提供另外一种快速创建工程化的 SPA 项目的方式(一共有两种方式)① 基于 vite 创建 SPA 项目② 基于 vue-cli 创建 SPA 项目创建 vite 的项目按照顺序执行如下的命令,即可基于 vite 创建 vue 3.x 的工程化项目1. npm init vite-app 项目名称2. cd 项目名称3. npm inst原创 2021-04-20 21:03:49 · 759 阅读 · 1 评论 -
导航前置守卫
导航前置守卫vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航,说白了,就是控制路由到底能不能跳转,应该如何跳转全局前置守卫会拦截每个路由规则,从而对每个路由进行访问权限的控制全局的前置守卫是路由跳转前进行触发的我们可以使用 router.beforeEach 注册一个全局前置守卫router.beforeEach((to, from, next) => { // ${to and from are Route Object,next() must be c原创 2021-04-16 21:19:59 · 210 阅读 · 0 评论 -
命名路由 路由重定向 路由高亮class类
一.命名路由概念通过name 属性为路由规则定义名称的方式,叫做命名路由。注意:命名路由的 name 值不能重复,必须保证唯一性{ name: 'about', //命名路由 path: '/about/:id', component: about,}使用命名路由实现编程式导航调用 push 函数期间指定一个配置对象,name是要跳转到的路由规则、params 是携带的路由参数this.$router.push({ name: "index" });注意:如果使原创 2021-04-16 21:14:19 · 649 阅读 · 0 评论 -
编程式导航 声明式导航 push()的参数问题 go()使用方式
编程式导航概念所谓编程式导航是指通过调用 API 实现导航(路由)跳转,之前使用的router-link称为声明式导航通过this.$router.push可以实现编程式导航this.$router.push()的参数:可以是一个字符串路径也可以是描述地址的对象同样的规则也适用于 router-link 组件的 to属性router-link本质上也是通过$router.push来实现的(内部调用了push方法)细节:如果提供了path,params 会被忽略,这个时候要使原创 2021-04-16 21:04:16 · 234 阅读 · 0 评论 -
嵌套路由
嵌套路由需求场景实际开发中的应用界面,通常由多层嵌套的组件组合而成嵌套结构要对应着嵌套路由(通过路由实现组件的嵌套展示,叫做嵌套路由)① 点击/user路由链接显示user模板内容② 模板内容中又有子级路由(/profile /posts)链接③ 点击子级路由链接显示子级模板内容添加嵌套路由配置使用children可以添加嵌套路由的配置需要为谁添加嵌套路由,就是这个父级路由中添加children配置children里面的路由配置和根路由配置类似注意,以/开头的原创 2021-04-16 20:54:59 · 92 阅读 · 0 评论 -
动态路由匹配 (多个路由映射一个组件) 参数设置 参数获取
动态路由匹配动态路由的必要性我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。如果我们一个一个定义路由规则的话也是可以的但是路由规则的复用性就会变得很差例如,我们有一个 User组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果:const User = { template: '<div>User</div>'}con原创 2021-04-16 20:45:19 · 1231 阅读 · 0 评论 -
vue中 延迟加载组件
vue中 延迟加载(懒加载)原创 2021-04-15 17:48:50 · 2651 阅读 · 0 评论 -
vue中的路由
vue中的路由一.vue-router介绍Vue Router是 Vue.js 官方的路由管理器它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌,说白了,就是配合vue.js一起来实现单页应用开发的,它主要用来实现项目中的路由管理我们需要做的是:将组件 (components)映射到路由 (routes),然后告诉Vue Router在哪里渲染它们vue-router目前有 3.x 的版本和 4.x 的版本。其中:vue-router 3.x只能结合 vue2 进行使用原创 2021-04-15 17:28:31 · 134 阅读 · 0 评论 -
前端路由的概念与原理
一. 前端路由的概念与原理回顾后端路由后端路由指的是:请求方式、请求地址与 function 处理函数之间的对应关系。在 node.js 中,express 路由的基本用法如下:const express = require('express')const router = express.Router()router.get('/cates', (req, res) => { conn.query(`SELECT * FROM categories`, (err, result原创 2021-04-15 16:19:20 · 177 阅读 · 0 评论 -
axios的基本使用 axios的简易封装
axios的基本使用一. 简介Axios是一个基于promise的 HTTP 库,在vue中使用axios进行异步请求和发起和响应的接收。二.下载 引入脚手架中默认没有提供这个包的下载,意味着我们需要自己手动下载,引入,使用传送门:Axios 中文说明下载安装:npm install axios引入improt axios from 'axios'三.使用axios发起get方式请求使用axios可以发起get方式请求,请求可以无参,也可以有参1.get方式的无参请求axios.原创 2021-04-14 21:21:50 · 679 阅读 · 0 评论 -
vue中的插槽 匿名插槽 具名插槽 作用域插槽
vue中的插槽一.插槽概念插槽(Slot)是 vue 为组件的封装者提供的能力。允许开发者在封装组件时,把不确定的、希望由用户指定的部分定义为插槽可以把插槽认为是组件封装期间,为用户预留的内容的占位符二.匿名插槽在封装组件时,可以通过 <slot>元素定义插槽,从而为用户预留内容占位符如果在定义slot的时候,没有为插槽<slot>指定name属性,则这个slot就是匿名插槽//封装组件<template> <div class="btn"原创 2021-04-13 21:49:50 · 305 阅读 · 0 评论 -
vue中的动态组件
vue中的动态组件概念:动态组件指的是动态切换组件的显示与隐藏component:vue 提供了一个内置的 <component> 组件,专门用来实现动态组件的渲染通过 Vue 的 <component> 元素加一个特殊的is特性来实现不同组件之间动态切换keep-alive默认情况下,切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的<keep-alive>组件保持动态组件的状态<template> <div>原创 2021-04-13 20:53:56 · 493 阅读 · 0 评论 -
兄弟传值 事件总线
兄弟组件传值1.创建全局的事件总线全局Vue实例的创建暴露全局的Vue实例import Vue from 'vue'export default new Vue()2.子组件A使用 事件总线.$emit发出事件并传递数据引入事件总线import bus from "../utils/eventBus";发出事件并传递数据<button @click="telltoSister">告诉我姐姐 我女朋友名字</button>methods: {原创 2021-04-13 20:42:53 · 156 阅读 · 0 评论 -
子父传值 this.$emit
子组件向父组件传递数据子组件:需要做一个事件触发发出一个事件(给父组件使用的事件类型)使用this.$emit发出事件并传递数据通过this发出的事件 只能有父组件监听(兄弟不行)this是当前的组件实例语法:this.$emit(自定义事件类型,传递的数据)示例:<button @click="tell">告诉我爸爸 我女朋友名字</button>methods: { tell() { this.$emit("getname", th原创 2021-04-13 20:32:14 · 890 阅读 · 0 评论 -
父子传值 props的声明(两种形式) 父组件为props成员赋值 常见错误
父组件向子组件传递(共享)数据实现方式:父组件通过v-bind 属性绑定向子组件共享数据。同时,子组件需要使用 props 接收数据简单一句话就是 :子props 父动态绑定1.子组件props的声明(两种形式)数组形式props: ['title', 'likes', 'isPublished', 'commentIds', 'author']对象形式 props: { sonmoney: { type: [Number, String], //规定传入值原创 2021-04-13 20:19:24 · 1909 阅读 · 0 评论 -
vue中的父子组件
vue中的父子组件1.什么是父子组件在脚手架项目中,基于单击文件组件的父子组件关系可以简单的认为是使用关系,如A组件中使用了B组件,那么就可以认为A是父组件,B是子组件同时需要注意的是:在单文件组件中不能通过components来创建结构上的子组件结论:在脚手架项目,所谓父组件和子组件都是单独的单文件组件,它们更多是的引入使用关系2.创建和渲染父子组件步骤:创建父组件创建两个子组件在父组件中引入,注册,使用这两个子组件引入 import 组件名 from '组件路径'注册原创 2021-04-13 20:17:08 · 467 阅读 · 0 评论 -
vue中实现过渡动画
vue中实现过渡动画使用背景:Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具:在 CSS 过渡和动画中自动应用class可以配合使用第三方 CSS 动画库,如 Animate.cssVue 提供了transition的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡条件渲染 (使用v-if)条件展示 (使用v-show)当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理:自动嗅探目标元素是否原创 2021-04-12 21:23:58 · 411 阅读 · 0 评论 -
vue中的侦听器
vue中的侦听器一.概念:watch 侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作。例如,监视用户名的变化并发起请求,判断用户名是否可用。侦听器,也称为侦听属性。它可以监听指定的属性值的变化 ,只要属性值发生了变化 就会自动的触发相应的侦听器相比之下,它比计算属性更通用,特别是在有异步操作的场景下二.侦听器的定义及使用1.简单侦听器的定义使用watch结构定义侦听器定义为函数的形式,且函数名称必须和你想侦听的属性名称完全一致watch:{ // 定义侦听函原创 2021-04-12 20:47:56 · 1751 阅读 · 0 评论 -
vue中的计算属性
vue中的计算属性概念:模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护,所以对于任何复杂逻辑,你都应当使用计算属性说白了,计算属性能够实现一定的复杂逻辑的处理,并返回处理结果一.计算属性的定义及使用1.计算属性的定义使用computed结构定义计算属性定义为函数的形式(实现业务处理并返回处理结果)computed:{ // 这个成员可实现业务处理,所以它是一个函数形式 计算属性名称(){ //原创 2021-04-12 20:30:53 · 343 阅读 · 0 评论 -
自定义过滤器 局部过滤器 全局过滤器 过滤器的封装
自定义过滤器作用:Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化使用场景:过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。用法:过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:一.自定义局部过滤器1.创建局部自定义过滤器定义位置局部自定义过滤器需要在filters结构中定义语法filters:{ 过滤器名称:function(源数据,[其它参数.....]){ //原创 2021-04-12 19:44:04 · 326 阅读 · 0 评论 -
自定义指令 自定义局部指令 自定义全局指令 指令的封装
自定义指令概念vue 官方提供了v-text、v-for、v-model、v-if等常用的指令。除此之外 vue 还允许开发者自定义指令有时候内置指令并不能满足我们所有场景的需求,或者说有时候我们想为元素附加一些特别的功能,这时候就可以通过自定义指令来实现vue 中的自定义指令分为两类,分别是:⚫ 局部自定义指令:组件内定义的指令,只有在当前组件中可以使用⚫ 全局自定义指令:通过Vue创建的指令,可以在所有组件中使用一 .自定义局部指令定义位置局部自定义指令需要在组件的directives原创 2021-04-12 14:39:42 · 550 阅读 · 0 评论 -
ref和$refs的应用 ref为元素设置一个标识 this.$refs获取dom元素 this.$refs获取组件元素
ref和$ref的应用ref简介 作用ref用来辅助开发者在不依赖于 jQuery 的情况下,获取 DOM 元素或组件的引用ref被用来给元素或子组件注册引用信息,说白了,就相当于为元素设置一个标识如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例ref像元素的唯一标识,所以不要让其值重复每个 vue 的组件实例上,都包含一个$refs对象,里面存储着对应的 DOM 元素或组件的引用。默认情况下,组件的 $refs 指向一个空对象$refs原创 2021-04-08 21:31:15 · 1282 阅读 · 0 评论 -
vue中的重点指令 v-text v-html v-for v-model v-on v-bind v-show v-if v-else和v-else-if
vue中的重点指令什么是指令,指令使用的方式vue中的常见指令v-text:内容渲染指令v-html:内容渲染指令v-for:列表渲染指令v-model:双向绑定指令v-on:事件绑定指令v-bind:属性绑定指令v-show:条件渲染指令v-if:条件渲染指令vue中的常见指令: v-text介绍:v-text是内容渲染指令,用来辅助开发者渲染 DOM 元素的文本内容作用:设置或更新元素的内容语法:<标签 指令='值'></标签>,如&原创 2021-04-08 21:19:31 · 1042 阅读 · 0 评论 -
vue中的组件 全局组件的创建和使用 组件化开发 单文件组件的创建
vue中的组件的概念一个组件相当于是一个小模块它是html、css与js的集合体,可以用于描述页面中的某个结构(模块)组件是独立存在于我们的vue应用里面的,意味着它可以复用,不需要我们将结构代码或者是业务代码重复的编写,而且也很方便进行维护在Vue中组件的出现是为了拆分Vue实例的代码量,让我们以不同的组件来划分不同的功能模块全局组件的创建 和 使用概念:全局组件指的是可以在应用程序中的任何位置使用的组件,在vue中,组件是可复用的Vue实例语法:Vue.component(组件名称,原创 2021-04-07 21:29:34 · 417 阅读 · 0 评论 -
vue脚手架创建项目的过程和运行项目的方式
vue脚手架创建项目的过程和运行项目的方式什么是脚手架(Vue CLI)Vue CLI是一个基于 Vue.js 进行快速开发的完整系统它可以帮我们快速的生成项目的整体结构,我们不必花时间纠结配置的问题1.下载安装脚手架// 全局安装脚手架npm install -g @vue/cli2.使用脚手架创建vue项目// 打开终端或powershellvue create 项目名称//根据对话框的交互 完成项目的配置3.运行脚手架项目// 进行项目目录,打开终端或powershel原创 2021-04-07 21:18:51 · 2527 阅读 · 0 评论 -
vue的基础概念 vue的基本特点
vue的基础概念1.什么是vuevue不是一门语言,只是通过JavaScript封装的一套用于构建用户界面的前端框架,vue有自己独特的API和开发模式,vue最主要的使用场景是进行单页应用开发,能够在我们进行web单页开发的时候大大提升开发效率2.什么是单页应用单页面应用程序(英文名:Single Page Application)简称 SPA,顾名思义,指的是一个 Web 网站中只有唯一的一个HTML 页面,所有的功能与交互都在这唯一的一个页面内完成。传统多页面应用单击链接页面会跳转原创 2021-04-07 20:52:25 · 2822 阅读 · 0 评论