前端：Vue学习-2

前端：Vue学习-2

    • 1. vue的生命周期
    • 2. 工程化开发和脚手架Vue CLI
      • 2.1 组件化开发
      • 2.2 scoped解决样式冲突
      • 2.3 data是一个函数
      • 2.4 组件通信
      • 2.5 非父子通信- event bus事件，provide&inject
    • 3.v-model原理->实现父子组件双向绑定
    • 4. sync 修饰符->实现父子组件双向绑定
    • 5. ref 和 $refs
    • 6. Vue异步更新，$nextTick

1. vue的生命周期

Vue的生命周期，一个Vue实例从创建到销毁的整个过程。
生命周期的四个阶段为：创建、挂载、更新、销毁

  1. 创建阶段，把数据转化为响应式数据；
  2. 挂载阶段，渲染模板；
  3. 更新阶段，数据修改，更新视图；
  4. 销毁阶段

Vue生命周期函数（钩子函数）
请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue2</title><script src="../vue2.js"></script>
</head>
<body><div id="app"><input type="text" v-model.number="count"><h4>{{count}}</h4></div><script>const app = new Vue({el:'#app',data:{count:100},beforeCreate(){console.log('before Create',this.count);},created(){console.log('created',this.count);},// 创建阶段beforeMount(){console.log('beforeMount',document.querySelector('h4').innerText);},mounted(){console.log('mounted', document.querySelector('h4').innerText);},// 挂载阶段beforeUpdate(){console.log('beforeUpdate', document.querySelector('h4').innerText);},updated(){console.log('updated', document.querySelector('h4').innerText);},// 更新阶段beforeDestroy(){console.log('beforeDestory');console.log('清除一些vue以外的资源占用，比如定时器等');},destroyed(){console.log('destoryed');}//销毁阶段})</script>
</body>
</html>

请添加图片描述

2. 工程化开发和脚手架Vue CLI

安装脚手架的命令，前提是本地电脑上已经安装nodejs，安装命令为：

npm install @vue/cli -g
// 全局安装
vue --version
// 查看安装的版本

在这里插入图片描述
创建vue项目为：

vue create 项目名

启动项目命令为：

// 首先需要cd到当前项目目录下
cd 项目名
npm run serve   // 启动项目

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

这个项目文件结构为：node_modules-第三方包目录，public-放html文件的目录，src-源代码目录，package.json-项目配置文件，jsconfig.json-js配置文件。。。src有个main.js文件，为项目的核心文件

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = false// vue实例化
new Vue({// render: h => h(App),render:(createElement)=>{return createElement(App)}
}).$mount('#app')

2.1 组件化开发

一个页面可以拆分为一个个组件，每个组件可以拥有自己独立的结构、样式、行为，结构下有且只能有一个根元素。使样式支持less语法，需要安装less，npm命令为：

npm install less-loader

组件注册：局部注册、全局注册
局部注册，在components目录下新建“.vue”文件，文件命名采用大驼峰命名。然后在这个新建的vue文件下输入组件的三个组成部分，分别为结构、样式和行为。在App.vue根组件引入这个组件，并进行组测，然后就可以在根组件中使用这个组件了。

<script>
import Com from './components/Com.vue'export default {name: 'App',components: {Com:Com}
}
</script>

全局注册，在main.js中进行全局注册，==所有组件内均可以使用该组件 ==。

import Com from './components/Com.vue'Vue.component('Com',Com)
// 进行全局注册，对应的组件名，组件对象

2.2 scoped解决样式冲突

写在组件中的样式会全局生效，因此会造成多个组件之间的样式冲突。可以给组件的样式标签添加scoped属性，可以让样式只作用于当前组件。
在这里插入图片描述
加上scoped属性。

<style scoped>.com-1{width: 200px;height: 40px;background-color: red;}
</style>

在这里插入图片描述
实现原理：加上scoped之后，不同组件的标签元素上会自动添加上自定义属性“data-一个hash值”。
在这里插入图片描述

2.3 data是一个函数

一个组件的data选项必须使一个函数，可以保证每个组件实例，维护独立的一份数据对象。 每次创建新的组件实例，都会重新执行一次data函数，得到一个新对象。
Com组件：

<template><div class="com-1"><button @click="fn(-1)">-1</button>{{count}}<button @click="fn(1)">+1</button></div>
</template><script>
export default {name:'Com',data(){return{count:1}},methods:{fn(p){this.count += p;}}
}
</script><style scoped></style>

<template><div id="app"><Com></Com><br><Com></Com><br><Com></Com></div>
</template>

请添加图片描述

2.4 组件通信

父、子组件通信，父组件通过props将数据传递给子组件。在父组件中给子组件添加动态属性，属性值为父组件中的数据。在子组件中使用props来接收父组件传递来的数据。如果在子组件中想要修改这个父组件中的数据，可以通过this.$emit(‘父组件中传递的动态函数名’,要修改的值)
父组件：

<template><div id="app"><p>{{title}}</p><Com :count1="count" @changeCount="fn" @changeTitle="fn1"></Com></div>
</template>
<script>
export default {name: 'App',data(){return{count:1,title:'hello world!'}},methods:{fn(){this.count ++;},fn1(newTitle){this.title = newTitle;}}
}
</script>
<style>
</style>

子组件：

<template><div class="com-1"><p>{{count1}}</p><button @click="fn1">修改</button><br><button @click="fn2">修改名称</button></div>
</template><script>
export default {name:'Com',props:['count1'],methods:{fn1(){this.$emit('changeCount');},fn2(){this.$emit('changeTitle','hello Vue！');}}
}
</script><style></style>

请添加图片描述
可以传递任意数量的prop，传递任意类型的prop。

props校验
校验有类型校验、非空校验、默认值、自定义校验
类型校验如下：

props:{校验的属性名:类型
}
// 类型可以为Number、String、Boolean、

完整的校验为：

props:{校验的属性名:{type:类型,required:true,  // 是否必填default:默认值,validator(value){// 逻辑return 是否通过校验// return true或false}}
}

prop和data的区别
共同点：都可以给组件提供数据
区别：data的数据是组件本身的，可以随便改；prop的数据是外部的，不能直接改，要遵循单向数据流。

2.5 非父子通信- event bus事件，provide&inject

event bus事件
适用于兄弟组件。新建工具js文件，js文件代码如下：

import Vue from 'vue'const bus = new Vue();export default bus

在BaseA组件接收方代码如下：

<template><div>我是BaseA组件<p>{{count}}</p></div>
</template><script>
import bus from '../utils/bus'export default {name:'BaseA',data(){return {count:1}},created(){bus.$on('changeCount',(count)=>{this.count = count;})}
}
</script><style scoped>div{width: 200px;height: 100px;border: 1px solid black;}
</style>

BaseB组件发送方代码如下：

<template><div>我是组件BaseB <br><button @click="fn">修改组件BaseA中的值</button></div>
</template><script>
import bus from '../utils/bus'
export default {name:'BaseB',methods:{fn(){bus.$emit('changeCount',12);}}
}
</script><style scoped>div{width: 200px;height: 100px;border: 1px solid black;}
</style>

运行结果：
请添加图片描述
在组件接收方中通过bus.$on对事件进行监听，组件发送方通过bus.$emit使组件接收方中事件进行触发。这是一个一对多的关系，即一个发送方组件，可以有多个接收方组件进行监听。

provide&inject
跨层级共享数据，适用于祖孙组件，在祖先组件中使用provide进行数据共享，在子或孙组件中使用inject进行接收。需要注意的是如果数据是简单类型，那么为非响应式的；如果数据是复杂类型，那么为响应式的。
祖先组件代码如下：

import BaseS from './components/BaseS.vue'export default {name: 'App',data(){return{color:'red',person:{name:'liuze'}}},components:{BaseS},provide(){return{person:this.person,color:this.color}},methods:{fn(){this.color = 'blue';this.person.name = 'lz';}}
}

孙子组件代码如下：

<template><div class="son-s">孙子组件<p>{{color}}{{person.name}}</p></div>
</template><script>
export default {name:'BaseSS',inject:['color','person']
}
</script><style scoped>.son-s{border: 1px solid black;width: 100px;height: 100px;}
</style>

运行结果：
请添加图片描述

3.v-model原理->实现父子组件双向绑定

v-model本身是一个语法糖，应用在输入框上，就是value属性和input事件的合写。
数据变，视图跟着变“:value”；视图变，数据跟着变“@input”。

<input type="text" :value="val" @input="val = $event.target.value">

请添加图片描述

父子组件不能直接使用v-model的，因为v-model是双向数据绑定，而子组件是无法直接修改父组件中的数据的。如果要使用v-model，那么在子组件中对父组件中数据进行修改就必须使用“:value”及“input”，即 props:{value}和this.$emit(‘input’,更新的数据)。
具体例子为：v-model原理:父组件、子组件使用v-model

4. sync 修饰符->实现父子组件双向绑定

可以实现子组件与父组件数据的双向绑定，简化代码。prop属性名，可以自定义，非固定为value。使用场景，封装弹框类的基础组件。本质上就是 :属性名和@update:属性名 合写；如下的弹框父子组件如下：

<template><div class="diag" v-show="visible"><button @click="fn">X</button></div>
</template><script>
export default {props:{visible:Boolean},methods:{fn(){this.$emit('update:visible',false);}}
}
</script><style>.diag{width: 200px;height: 100px;border: 1px solid black;background-color: red;position: relative;}.diag button{position: absolute;top: 2px;right: 2px;width: 20px;height: 20px;line-height: 20px;text-align: center;}
</style>

<template><div id="app"><button @click="fn">取消修改</button><Diag :visible.sync="isShow" ></Diag></div>
</template>
<script>
import Diag from './components/Diag.vue'export default {name: 'App',components:{Diag},data(){return{isShow:false}},methods:{fn(){this.isShow = true;}}
}
</script>
<style scoped>
</style>

运行结果：
请添加图片描述

5. ref 和 $refs

利用ref和$refs可以用于获取dom元素或组件实例，查找范围为当前组件内。(如果dom进行查找，当其他组件和当前组件有同一个类名时，并且其他组件在当前组件前面进行渲染，那么此时就会出现dom找到的标签元素为其他组件内的。)

  1. 获取dom，在目标标签上添加ref属性
  2. 适当时机，通过this.$refs.xxx，获取目标标签
<div ref="div_1"></div>this.$refs.div_1
// 获取上述这个div标签

<template><div id="app"><div ref="div_1">哈哈</div></div>
</template>
<script>export default {name: 'App',data(){return{isShow:false}},methods:{fn(){this.isShow = true;}},mounted(){console.log(this.$refs.div_1);}
}
</script>
<style scoped>
</style>

运行结果：
在这里插入图片描述
如果要获取组件实例，直接在组件实例的标签上添加属性ref，之后就可以通过this.$refs.xxx获取这个组件，返回的是一个Vue组件对象，通过==this.$refs.xxx.组件方法()==调用这个组件下的方法。

6. Vue异步更新，$nextTick

下述是异步更新实例，因为Vue是异步更新的，所有点击编辑按钮之后，输入框并不会出现聚焦，所有需要使用到$nextTick

<template><div id="app"><div v-if="isShow"><span>{{v}}</span><button @click="edit">编辑</button></div><div v-else><input type="text" v-model="v" ref="inp"><button @click="save">保存</button></div></div>
</template>
<script>export default {name: 'App',data(){return{isShow:true,v:'北京'}},methods:{edit(){this.isShow = false;this.$nextTick(()=>{this.$refs.inp.focus();});},save(){this.isShow = true;}}
}
</script>
<style scoped>#app{width: 100px;height: 100px;margin: 20px auto;}
</style>

运行结果：
请添加图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://xiahunao.cn/news/3248387.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

centos7 中tcp连接问题

centos7 中tcp连接问题

centos对telnet过来的包没有响应 通过tcpdump查看到的TCP连接的不正常的报文&#xff0c;如下 通过tcpdump查看到的TCP连接的正常的报文 &#xff0c;如下 解决方法&#xff1a; cat /proc/sys/net/ipv4/tcp_tw_recycle cat /proc/sys/net/ipv4/tcp_timestamps 如果两个参数…
阅读更多...
【Java算法】前缀和 下

【Java算法】前缀和 下

&#x1f525;个人主页&#xff1a; 中草药 &#x1f525;专栏&#xff1a;【算法工作坊】算法实战揭秘 一.连续数组 题目链接&#xff1a;525.连续数组 代码 public int findMaxLength(int[] nums) {HashMap<Integer,Integer> mapnew HashMap<>();map.put(0,-1);…
阅读更多...
【系统架构设计师】十三、软件可靠性(基本概念|软件可靠性建模)

【系统架构设计师】十三、软件可靠性(基本概念|软件可靠性建模)

目录 一、基本概念 1.1 定义 1.2 软件可靠性的定量描述 1.3 可靠性测试的意义 1.4 广义的软件可靠性测试和狭义的软件可靠性测试 二、软件可靠性建模 2.1 可靠性模型的组成 2.2 可靠性模型的共同假设 2.3 可靠性模型的重要特性 2.4 可靠性建模方法 往期推荐 历年真…
阅读更多...
SD-WAN组网搭建5G备份方案实现方式

SD-WAN组网搭建5G备份方案实现方式

SD-WAN&#xff08;Software-Defined Wide Area Network&#xff0c;软件定义广域网&#xff09;结合5G作为备份链路是现代企业网络弹性策略的一部分&#xff0c;尤其是在需要高可用性和快速故障切换的场景下。以下是实现SD-WAN组网并集成5G备份方案的一般步骤&#xff1a; 1. …
阅读更多...
‍我想我大抵是疯了，我喜欢上了写单元测试

‍我想我大抵是疯了，我喜欢上了写单元测试

前言 大家好我是聪。相信有不少的小伙伴喜欢写代码&#xff0c;但是对于单元测试这些反而觉得多此一举&#xff0c;想着我都在接口文档测过了&#xff01;还要写什么单元测试&#xff01;写不了一点&#xff01;&#xff01; 由于本人也是一个小小程序猿&#x1f649;&#xf…
阅读更多...
Python | 分享8个Excel自动化脚本，一定有你用得上的！

Python | 分享8个Excel自动化脚本，一定有你用得上的！

本文将介绍8个常用的Python脚本&#xff0c;帮助你轻松应对Excel的日常操作。那话不多说&#xff0c;开始吧&#xff01; 1. 安装所需的Python库 在开始之前&#xff0c;我们需要安装一些Python库来操作Excel文件。以下是需要安装的库&#xff1a; pandas&#xff1a;用于数据…
阅读更多...
Java 实验七：集合的使用

Java 实验七：集合的使用

一、实验目的 1、理解Java集合框架的特点、接口与类之间的关系&#xff1b; 2、掌握Java集合框架的List接口&#xff0c;以及List接口的重要实现类LinkedList、ArrayList&#xff1b; 3、掌握Java集合框架的Set、SortedSet接口&#xff0c;以及重要实现类HashSet 与 TreeSet…
阅读更多...
活动回顾 | AutoMQ 联合 GreptimeDB 共同探讨新能源汽车数据基础设施

活动回顾 | AutoMQ 联合 GreptimeDB 共同探讨新能源汽车数据基础设施

7 月 13 日&#xff0c;AutoMQ 携手 GreptimeDB“新能源汽车数据基础设施” 主题 meetup 在上海圆满落幕。本次论坛多角度探讨如何通过创新的数据管理和存储架构&#xff0c;提升汽车系统的性能、安全性和可靠性&#xff0c;从而驱动行业的持续发展和创新&#xff0c;涵盖 Auto…
阅读更多...
C#字符串基本操作

C#字符串基本操作

1、代码 //1、创建字符串&#xff08;获取长度&#xff09;string str "Hello, World!";Console.WriteLine($"string:{str},length:{str.Length}");//2、字符串连接string str1 "Hello, ";string str2 "World!";Console.WriteLine…
阅读更多...
简易ELK搭建

简易ELK搭建

ELK搭建 1. elasticsearch1.1 下载1.2 ES配置1.3 启动ES1.4 开启权限认证1.5 IK分词器配置&#xff08;非必须&#xff09; 2. kibana2.1 下载2.2 配置2.3 启动kibana 3. logstash3.1 下载3.2 配置3.3 启动logstash 4. springboot推送数据 ELK包括elasticsearch、logstash、kib…
阅读更多...
【初阶数据结构】掌握二叉树遍历技巧与信息求解：深入解析四种遍历方法及树的结构与统计分析

【初阶数据结构】掌握二叉树遍历技巧与信息求解：深入解析四种遍历方法及树的结构与统计分析

初阶数据结构相关知识点可以通过点击以下链接进行学习一起加油&#xff01;时间与空间复杂度的深度剖析深入解析顺序表:探索底层逻辑深入解析单链表:探索底层逻辑深入解析带头双向循环链表:探索底层逻辑深入解析栈:探索底层逻辑深入解析队列:探索底层逻辑深入解析循环队列:探索…
阅读更多...
25.dom创建、获取、插入、替换、删除、克隆节点

25.dom创建、获取、插入、替换、删除、克隆节点

dom节点 -构成页面的每个组成部分&#xff08;标签 属性 文字 注释&#xff09; 节点(所有的文本内容 包括换行和空格) 元素节点(页面上的每个标签) 属性节点(标签上的属性) 注释节点(所有的注释内容包括注释内的空格换行) 创建节点 创建文本节点&#xff1a; var 变量名docume…
阅读更多...
Sui基金会公布第一批RFP资助获得者名单

Sui基金会公布第一批RFP资助获得者名单

Sui资助计划已经从RFP申请者中选出了第一批受资助名单&#xff0c;这一举措标志着我们在促进Sui生态创新和增长方面迈出的重要一步。RFP计划旨在解决生态内的特定需求&#xff0c;为与我们战略目标一致的项目提供有针对性的支持。 为非技术者打造兼容Kiosk的启动平台 现存问题…
阅读更多...
更新：彩虹云商城系统 自助下单免授权无后门源码（修复完整版）

更新：彩虹云商城系统 自助下单免授权无后门源码（修复完整版）

源码简介&#xff1a; 最新更新彩虹云商城系统&#xff0c;自助下单免授权无后门源码&#xff08;修复完整版&#xff09; 自助下单彩虹云商城系统。这玩意儿不简单&#xff0c;它是高效稳定的电商平台&#xff01;免授权源码版本&#xff0c;灵活方便。源码是用PHP语言写的。…
阅读更多...
[CP_AUTOSAR]_分层软件架构_接口之内存模块的交互介绍

[CP_AUTOSAR]_分层软件架构_接口之内存模块的交互介绍

目录 1、Memory service modules 特征及差异2、Memory 如何通信交互2.1、Memory通信架构2.2、大块的NV数据管理 3、Memory 软件接口4、内存抽象接口的实现3.1、情况1&#xff1a;只使用了一种NV设备类型3.2、情况2&#xff1a;使用了2种或更多的NV设备 4、结论 在前面 关于接口…
阅读更多...
2. KNN分类算法与鸢尾花分类任务

2. KNN分类算法与鸢尾花分类任务

鸢尾花分类任务 1. 鸢尾花分类步骤1.1 分析问题&#xff0c;搞定输入和输出1.2 每个类别各采集50朵花1.3 选择一种算法&#xff0c;完成输入到输出的映射1.4 第四步&#xff1a;部署&#xff0c;集成 2. KNN算法原理2.1 基本概念2.2 核心理念2.3 训练2.4 推理流程 3. 使用 skle…
阅读更多...
路由数据获取及封装方法

路由数据获取及封装方法

数据库设计 自联表 定义tree字段 public class LabelValue{public int label { get; set; }public string? value { get; set; }public List<LabelValue> children { get; set; }}获取路由方法 public Response<object> getMenuList() {Response<object>…
阅读更多...
spark 事件总线listenerBus

spark 事件总线listenerBus

事件总线基本流程 图片来源&#xff1a;https://blog.csdn.net/sinat_26781639/article/details/105012302 LiveListenerBus创建 在sparkContext初始化中创建LiveListenerBus对象。 主要变量有两个 queues&#xff1a;事件队列&#xff0c;里面存放四个队列&#xff0c;每…
阅读更多...
零基础学习Python（三）

零基础学习Python（三）

1. 多重继承 一个子类可以继承多个父类&#xff0c;这与一些编程语言的规则不通。 如果多个父类中有同名的变量和方法&#xff0c;子类访问的顺序是按照继承时小括号里书写的顺序进行访问的。 可以用issubclass(B, A)方法判断B是否为A的子类。 2. 绑定 类中的方法通过参数s…
阅读更多...
Unity 导入MRTK，使用URP 升级材质，MRTK的材质还是洋红色

Unity 导入MRTK，使用URP 升级材质，MRTK的材质还是洋红色

控制台显示信息 ToggleBackground material was not upgraded. There’s no upgrader to convert Mixed Reality Toolkit/Standard shader to selected pipeline UnityEditor.Rendering.Universal.UniversalRenderPipelineMaterialUpgrader:UpgradeProjectMaterials() (at 点击…
阅读更多...
最新文章

Copyright @ 2022~2023