vue
文章平均质量分 57
Aucanon
这个作者很懒,什么都没留下…
展开
-
vue3+element下拉多选框组件
vue3+element下拉多选框组件原创 2023-08-22 11:08:13 · 695 阅读 · 0 评论 -
Vue Router
路由就是一个key-value的映射关系。(路径-component/function)前端路由的value即component,不同的路径展示不同的组件。vue-router专门用来实现SPA应用。value对应function,根据根据请求路径匹配相应的函数处理响应请求。路由组件非路由组件vue-router使用:编写router配置项路由嵌套多级路由要在嵌套的出口中渲染组件,需要在 VueRouter 的参数中使用 children 配置。路由传参query参数不属于路径中的一部原创 2022-07-25 10:15:34 · 308 阅读 · 0 评论 -
Vue组件间通信
用于父组件给子组件传值>所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向难以理解。>额外的,每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。...原创 2022-07-23 19:27:35 · 121 阅读 · 0 评论 -
Vue插槽
父组件向子组件指定位置插入html结构(默认插槽、具名插槽),或者子组件给父组件传递数据,父组件决定插入子组件对应位置的结构(作用域插槽)可放置在函数参数位置的JavaScript表达式(在支持的环境下可使用解构)。可选,即只需要在为插槽传入prop的时候使用。数据在子组件中,但是自己不能决定结构,需要将数据传递给父组件,父组件决定结构。用于父子组件之间的通信(一般是结构,即标签)...原创 2022-07-23 19:24:23 · 200 阅读 · 0 评论 -
Vuex组建间通信
它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。唯一更改state数据状态的方法就是提交mutation,并且它会接受state作为第一个参数。Vuex允许我们在store中定义“getters”(可以认为是store的计算属性)。操作,响应在视图上的用户输入导致的状态变化。将mutation中的数据映射为计算属性。将getters中的数据映射为计算属性。将action中的数据映射为计算属性。将state中的数据映射为计算属性。...原创 2022-07-23 18:10:35 · 244 阅读 · 0 评论 -
Vue核心--mixin混入
首先要定义一个混合,通常在src内创建一个mixin.js文件在该文件内定义所需要的混入。全局混入:混入也可以进行全局注册。使用时格外小心!一旦使用全局混入,它将影响每一个之后创建的 Vue 实例。使用恰当时,这可以用来为自定义选项注入处理逻辑。局部混入:原创 2022-06-02 11:26:42 · 314 阅读 · 0 评论 -
Vue核心--MVVM模型
MVVM模式MVVM 是Model-View-ViewModel 的缩写模型模型是指代表真实状态内容的领域模型(面向对象),或指代表内容的数据访问层(以数据为中心)。视图就像在MVC和MVP模式中一样,视图是用户在屏幕上看到的结构、布局和外观(UI)。视图模型视图模型是暴露公共属性和命令的视图的抽象。MVVM没有MVC模式的控制器,也没有MVP模式的presenter,有的是一个绑定器。在视图模型中,绑定器在视图和数据绑定器之间进行通信。绑定器声明性数据和命令绑定隐含在MVVM模原创 2022-05-30 15:44:58 · 339 阅读 · 0 评论 -
Vue核心--计算属性、监事属性
计算属性computed定义:要用的属性不存在,要通过已有的属性计算得来(data)。原理:底层借助Object.defineProperty方法提供的getter和setter。get函数初次读取时执行一次、当依赖的函数改变再次调用。与methods相比,内部有缓存机制(复用)效率更高,调试方便。计算属性最终会出现在vm上,直接读取使用即可。如果计算属性要被修改,必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。计算属性依赖data中的数据时,data中它所原创 2022-05-31 14:06:03 · 139 阅读 · 0 评论 -
Vue核心--filter过滤器
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号|指示功能:对要显示的数据进行特定格式化后再显示。过滤器也可以接收额外参数、多个过滤器也可以串联。注意:并没有改变原本的数据, 是产生新的对应的数据。<!DOCTYPE html><html> <head> <原创 2022-05-31 15:03:19 · 78 阅读 · 0 评论 -
Vue核心--生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。所有生命周期钩子的 this 上下文将自动绑定至实例中,因此你可以访问 data、computed 和 methods。这意味着你不应该使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。因为箭头函.原创 2022-05-31 18:17:10 · 139 阅读 · 0 评论 -
Vue核心--Vue简介、脚手架
概念Vue就是一套用于构建用户界面的渐进式框架。具体介绍可以看下Vue官方的介绍 - Vue.js特点采用组件化模式,提高代码复用率、且让代码更好维护声明式编码,让编码人员无需直接操作DOM,提高开发效率使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点创建Vue(脚手架)脚手架创建vue create xxx 创建后在项目目录下通过yarn serve或npm run serve运行文件结构favicon.ico: 页签图标index.html: 主页面asset原创 2022-05-30 14:35:18 · 153 阅读 · 0 评论 -
Vue核心--内置指令
文章目录前言v-指令1.v-text2.v-html3.v-onv-if/v-showv-bind总结前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。v-指令1.v-textv-text指令的作用是设置内容的标签,设置文本。数据定义在data中。<body> <div id="app"> <h2 v-text="messa原创 2021-04-19 20:51:56 · 337 阅读 · 0 评论 -
Vue--‘el‘挂载
Vue--'el'挂载1.选择器2.挂载标签总结将DOM组件渲染塞入页面的过程<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-widt原创 2021-04-16 23:11:53 · 362 阅读 · 1 评论 -
vue--创建第一个项目
vue--创建第一个vue项目前言一、vue是什么?二、使用步骤1.创建一个vue项目2.项目的运行总结文章目录前言一、vue是什么?二、使用步骤1.创建一个vue项目2.项目的运行总结前言vue作为前端三大框架之一,对于前端开发非常重要。一、vue是什么?Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与原创 2021-04-16 15:16:53 · 869 阅读 · 0 评论