一.箭头函数和普通函数的区别:1.普通函数中的this:代表它的直接调用者(js的this是执行上下文), 例如 obj.cal() ,那么cal()方法中的this就是obj若没找到直接调用者,则this指的是 window (常见的window的属性和方法有: alert, location,document,parseInt,setTimeout,setInterval等
一、 vue组件间传值1. 父组件向子组件进行传值props父组件代码:<template>
<div>
父组件:
<input type="text" v-model="name">
<br>
<br>
<!-- 引入子组件 -->
<child :inputName
1.父组件给子组件传参(1).在父组件模板里面找到子组件标签(2). 在子组件标签上面通过 v-bind:自定义属性名="父组件的变量"(3) 在子组件的export default对象里面 定义 props接收绑定过来的属性 接收方式有两种:1. props:["自定义属性名1","自定义属性名2"...]这里面的属性名 就是 子组件标签上面通过v-bind绑定的自定义属性props注
一、什么是生命周期函数 我想,对于生命周期,咱都不会陌生,所谓生命周期,就是一个过程,从开始到结束,顾名思义,就像生命一样,从诞生到消逝。而生命周期函数,就是在这个生命周期的不同阶段中会被调用的函数,也可以比作人的一生,在不同的阶段要做不同的事(这个命名可以说是非常的人性化)。 vue中的生
转载
2024-09-23 07:27:25
97阅读
JavaScript 已成为庞大、多样化并快速发展的编程语言。每当 JS 的框架或库发布更新,社区中与之相关的项目也会随之作出改进——Vue.js 及其附属项目就是典型例子。Vuex 是简单直观的状态管理服务,但它的更新步伐是跟随 Vue.js 的,所以有时新版 Vue.js 的功能会迟一些才能获得 Vuex 的支持。例如,原生移动应用已经广泛流行。许多 JavaScript 项目都有对应的库和框
VUE3 祖孙组件传值调用方法
原创
2023-08-07 00:40:02
1345阅读
目录基本概念代码解析传递数据与接收数据基本语法通信:父组件 ==> 子组件 通信:子组件 ==> 父组件基本概念功能:让组件接收外部传输的数据props适用于: (1).父组件==>子组件通信 (2).子组件==>父组件通信(要求父先给子一个函数)注意事项:(1)props是只
转载
2024-10-25 09:03:12
445阅读
一.Vue3的介绍相信大家都已经学习过Vue2了,对Vue有了一定的了解。那么今天我们就一起来学习有关Vue3的知识点。那为什么要学习Vue3呢,主要是他有以下的特点。 (1)新增组合式api (2)更加接近原生 (3)更加解耦(react启发)二.Vue3的安装全局安装脚手架(如果安装过脚手架请忽略这步)npm i @vue/cli -g
创建一个vue3 的项目vue create 项目名称
转载
2024-04-06 16:41:00
128阅读
在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递。父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息。看看它们是怎么工作的。 一、基本用法组件不仅仅是要把模板的内容进行复用,更重要的是组件间要进行通信。在组件中,使用选项props 来声明需要从父级接收的数据, props 的值可以是两种, 一种是字符串数组,一种是对象。1.1 字符串数组:
转载
2024-10-17 10:30:02
224阅读
1 函数内部变量的局部性在一个函数中定义的变量(包括实参),其作用域仅限于定义它的函数中,在其它的函数不能使用,这种变量称为“局部变量”。局部变量的作用域:函数内部声明和定义的语句块(实参为整个函数),屏蔽语句块外的同名变量;局部变量的存续期:在函数内部声明开始到语句块结束位置。定义在函数之外的变量,其作用域范围为定义该变量的程序位置直到程序的结束,在其它的函数中,既可以使用该变量的值,对变量值的
Vue3相比于Vue2解决了:Vue2中新增属性,删除属性,界面不会更新的问题。解决了:Vue2中直接通过下标修改数组,界面不会刷新的问题。vue-cli版本必须是4.5以上,查看版本命令:vue -V创建工程命令:vue create 项目名项目中添加vue.config.js与README同级关闭语法检查module.exports = {
transpileDependencies: t
转载
2024-07-21 22:58:06
109阅读
前言我们知道vue3的Composition Api是它几个最大亮点之一,所以下文都是在setup中演示代码的实现。后面会以开发几个简单form组件为例子来演示。基本操作这里先简单开发一个VInput的输入框组件。组件就像一个函数,主要就是处理输入和输出。Vue3在setup函数上提供了两个参数,一个props,一个是context下面的emit方法,分别来处理输入和输出。props现在VInpu
转载
2023-11-08 16:18:34
327阅读
reactive对传入的类型是有限制的,必须是对象或者数组。对一些基础类型,例如string, number,boolean等不支持,如果要使用reactiveAPI必须将这些基础类型封装成对象,这样显然是不太科学的。因此Vue 3.0提供了refAPI。Ref是一个接口, 它最主要的是有一个value属性可以获取值和赋值。export interface Ref<T = any> {
setup监听数据import { watch , watchEffect ,computed ,ref,reactive} from 'vue' //ref设置响应式的基本数据类型 reactive 设置响应式的引用数据类型
// watchEffect 立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。
let WatchStopHandle= watchEffec
转载
2024-10-23 22:31:35
92阅读
我们在编写vuex代码过程中,觉得在a.vue的模板里面写入例如 <p>{{$store.state.num}}</p>很麻烦,我们希望直接就写成{{num}},我们应该怎么写,vue给出三种固定写法,大家理解之后基本照抄,稍做改动即可第一种方法 通过computed的计算属性直接赋值 1.store.js(vuex的代码如下): import Vue
文章目录一、Vue3基础语法1、Vue开发准备2、Vue的模板语法3、条件渲染4、列表渲染5、事件处理6、表单输入绑定二、Components组件1、组件基础2、组件交互3、自定义事件的组件交互4、组件生命周期5、引入第三方组件三、网络请求及路由配置1、Axios网络请求2、Axios网络请求封装3、Vue引入路由配置4、Vue路由传递参数5、Vue路由嵌套四、Vue3状态管理及新特性1、Vue
转载
2024-03-31 13:34:39
584阅读
一,简介:2020年9月18日, vue3发布3.0版本, 代号大海贼时代来临,One Piece1,特点:无需构建步骤,渐进式增强静态的 HTML 在任何页面中作为 Web Components 嵌入 单页应用 (SPA) 全栈 / 服务端渲染 (SSR) Jamstack / 静态站点生成 (SSG) 开发桌面端、移动端、WebGL,甚至是命令行终端中的界面2,Vue3带来了什么打包大小减少4
转载
2024-04-03 21:53:35
164阅读
了解 Vue 3 中路由跳转时传值的方法是开发中的常见需求。由于 Vue 3 引入了 Composition API,路由的使用方式与 Vue 2 有所不同。下面我将为你梳理几种主要的路由传值方式。 下面是一个汇总表格,帮助你快速了解各种传值方式的特点: 传值方式 特点 适用场景 页面刷新后数据是否 ...
vue项目中的接口调用?点击挑战vue专栏复习?vue项目组成接口调用具体内容summary下期预告跨域问题的解决??接口调用fetch async/await axios?? ?点击挑战vue专栏复习?
在企业开发过程中,有着明确的前后端分工,前端负责接收、使用接口,后端负责编写、处理接口。本期文章将会详细讲解 如何使用接口。vue项目组成一个项目往往由这几个部分组成。?? 其中在src文件夹
转载
2023-11-13 19:50:11
143阅读
vue3项目实战 fetch调用接口 ?一文搞定?点击进入vue专栏?fetch概述fetch基本用法fetch的HTTP请求??get请求?delete请求post请求?put请求方式?fetch响应结果/格式summary ?点击进入vue专栏?
上期推文中讲述了vue3项目实战中接口调用的方法(一)?点击即可复习?,介绍了async/await调用接口的过程和方法。 从本期文章开始将会不定
转载
2023-12-16 23:17:58
220阅读