当前位置： 首页 > news >正文

【vue讲解：ref属性、动态组件、插槽、vue-cli创建项目、vue项目目录介绍、vue项目开发规范、es6导入导出语法】

news 2025/12/14 19:42:05

0 ref属性（组件间通信）

# 1 ref属性放在普通标签上<input type="text" v-model="name" ref="myinput">通过 this.$refs['myinput'] 拿到的是 原生dom对象操作dom对象：改值，换属性。。。# 2 ref属性放在 组件上<Child ref="mychild"></Child>通过 this.$refs['mychild'] 拿到的是 组件对象组件对象.属性组件对象.方法实现父子间通信
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script><script src="./js/axios.js"></script></head>
<body>
<div id="app"><h1>ref属性</h1><input type="text" v-model="name" ref="myinput"><img src="./img/3.png" alt="" ref="myimg"><button @click="handleClick">点我执行代码</button><div style="background-color: aquamarine"><Child ref="mychild"></Child></div></div>
</body><script>Vue.component('Child', {template: `<div><img :src="url" alt="" height="300px" width="200px"><button @click="handleClick('子组件传入的')">点我弹窗</button></div>`,data() {return {url: './img/1.png'}},methods: {handleClick(name) {alert(name)}}})var vm = new Vue({el: '#app',data: {name: ''},methods: {handleClick() {console.log(this.$refs)// 1 根据ref指定的名字，取出原生dom对象// var i = this.$refs['myinput']// console.log(i)// i.value = "你好"// 2 改图片// var i = this.$refs['myimg']// i.src='./img/6.png'// 3 操作组件对象-->实现组件间通信var i = this.$refs['mychild']console.log(i.url)// 改图片i.url = './img/2.png'// 执行方法i.handleClick('lqz')}}})</script>
</html>

1 动态组件

# 小案例---》点击按钮，切换组件

1.1 使用v-if控制组件显示与否

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script></head>
<body>
<div id="app"><h1>点击按钮切换组件</h1><button @click="who='home'">首页</button><button @click="who='goods'">商品</button><button @click="who='order'">订单</button><Home v-if="who=='home'"></Home><Goods v-else-if="who=='goods'"></Goods><Order v-else></Order></div>
</body><script>var vm = new Vue({el: '#app',data: {who: 'home',},components: {Home: {template: `<div><h3>我是首页</h3></div>`},Goods: {template: `<div><h3 style="background-color: aquamarine">我是商品页面</h3></div>`},Order: {template: `<div><h3 style="background-color: red">我是订单</h3></div>`},}})</script>
</html>

1.2 通过动态组件控制组件显示谁

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script></head>
<body>
<div id="app"><h1>点击按钮切换组件</h1><button @click="who='Home'">首页</button><button @click="who='Goods'">商品</button><button @click="who='Order'">订单</button><keep-alive><component :is="who"></component></keep-alive>
</div>
</body><script>var vm = new Vue({el: '#app',data: {who: 'Home',},components: {Home: {template: `<div><h3>我是首页</h3></div>`},Goods: {template: `<div><h3 style="background-color: aquamarine">我是商品页面</h3></div>`},Order: {template: `<div><h3 style="background-color: red">我是订单</h3><input type="text" v-model="search"></div>`,data() {return {search: ''}}},}})</script>
</html>

1.3 keep-alive的使用–组件缓存

    <keep-alive><component :is="who"></component></keep-alive>

2 插槽

#一般情况下，编写完1个组件之后，组件的内容都是写死的，需要加数据 只能去组件中修改，扩展性很差
# 然后就出现了插槽这个概念，只需在组件中添加<slot></slot>，就可以在的组件标签中添加内容

2.1 基本使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script></head>
<body>
<div id="app"><h1>插槽使用</h1><div style="background-color: aquamarine"><Home><div><img src="./img/1.png" alt="" width="200px" height="300px"></div></Home></div><hr><div style="background-color: pink"><Home><a href="">点我看美女</a></Home></div></div>
</body><script>var vm = new Vue({el: '#app',data: {who: 'Home',},components: {Home: {template: `<div><h3>我是首页</h3><slot></slot><h3>结束了</h3></div>`},}})</script>
</html>

2.2 具名插槽

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script></head>
<body>
<div id="app"><h1>具名插槽使用</h1><div style="background-color: aquamarine"><Home><div slot="foot"><img src="./img/1.png" alt="" width="200px" height="300px"></div><div slot="middle"><a href="">点我看美女</a></div></Home></div><hr></div>
</body><script>var vm = new Vue({el: '#app',data: {who: 'Home',},components: {Home: {template: `<div><h3>我是首页</h3><slot name="middle"></slot><h3>结束了</h3><slot name="foot"></slot></div>`},}})</script>
</html>

3 vue-cli创建项目

# 创建vue项目，需要借助于几个东西- nodejs：-javascript只能运行在浏览器中-把谷歌浏览器的js解释环境---》使用c重写，--》能够运行在操作之上-使用js的语法，就可以写后端了：c写了网络，文件操作，数据库操作-js的语法，运行在操作系统上的一个解释型后端语言- vue-cli：vue脚手架  是node的一个模块# 安装node环境-官网下载安装包：node-v18.16.1-x64.msi 一路下一步安装-node---》python的python命令-npm---》python的pip命令-下载模块，去国外，很慢-加速下载第三方模块：（用来替换npm命令的)npm install -g cnpm --registry=https://registry.npm.taobao.org-安装模块使用：npm install -现在使用  cnpm install  速度快# 安装vue脚手架
cnpm install -g @vue/cli
安装完就会释放 vue 令   #装完django 释放了django-admin一样，用来创建项目# 使用vue脚手架，创建vue项目
vue create 项目名
操作如下图# 另一种创建vue项目方式：图形化界面

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

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

4 vue项目目录介绍

# 使用pycharm开发# 运行vue项目的两种方式-使用名：npm run dev-使用pycharm运行：绿色箭头# 目录结构
first_vue  #项目名-node_modules  # 项目有很多依赖都放在这，等同python的 .venv文件夹，可以删掉，非常多小文件，复制很慢，如果没了，执行 cnpm install  就可以在装上，装完项目可以运行-public # 文件夹（一般不动）favicon.ico # 网站小图标index.html # spa：单页面应用---》整个vue项目其实就这一个html页面，以后都是组件切换-src # 开发重点，以后代码几乎都是写在这里-assets   # 放一些静态资源：图片，css，js-logo.png  # 组件中使用的图片-components # 放组件：小组件-HelloWorld.vue  # 默认提供给咱们的-views      # 放组件：页面组件HomeView.vue # 首页AboutView.vue#关于-router # 装了vue-router就会有这个文件夹，后面讲-index.js-store # 装 vuex 就会有这个文件夹，后面讲-index.js-main.js # 整个项目的入口-App.vue #根组件-.gitignore  # 使用了git，忽略文件-babel.config.js #装了bable就会生成它---》语法转换--》可以写es高版本语法-package.json  # 放了项目的依赖-package-lock.json # 锁定文件--》锁定依赖的版本-README.md  #介绍文件-vue.config.js # vue配置文件 一般不动

在这里插入图片描述

4.1 大致看一下文件中写了什么内容

# index.html  单页面应用，全局只有一个html-不能禁用js，否则，vue项目执行不力-div  id是app，跟咱们之前写的一样# HelloWorld.vue   组件化开发，开发阶段，以后再vue项目中，写组件  写 xx.vuetemplate：在这里写 html内容script：在这里写jsstyle：在这里写样式之前写组件#组件名字就是：HelloWorld 文件名# template：template内写的内容# data(){} :在script中<script>export default {data(){return {}},methods:{}}</script># 之前不能写独立的css，以后都写在 style中#总结：之前定义组件，写起来很麻烦，现在定义组件，只要创建一个 xx.vue,在固定的位置，写固定的代码即可# main.js--》控制  index.html 使用哪个跟组件 ---App.vue-import store from './store' # 导入语法- 在这里 new 了vue实例new Vue({render: h => h(App)}).$mount('#app')# package.json 里面有项目依赖

​

5 vue项目开发规范

# 以后做vue开发，只需要创建 组件 xx.vue# 会有三部分
##第一部分###  写html，插值，事件绑定
<template>
</template>##第二部分###  data，methods，watch，created
<script>
export default {
}
</script>##第三部分###   写样式
<style scoped>
</style>

6 es6导入导出语法

# 以后，做了项目开发，肯定要导入某些模块使用-之前是使用<script src=""></script>-以后再项目中：import App from './App.vue'  语法引入# 默认导出和默认导入的使用#在utils.js中 ，导出var NAME = '彭于晏'function add(a, b) {return a + b}export default { #导出add,NAME}# 在想用的位置导入import lqz from './lqz/utils' # 以后使用lqz代指就是导出的对象

相关文章：

【vue讲解：ref属性、动态组件、插槽、vue-cli创建项目、vue项目目录介绍、vue项目开发规范、es6导入导出语法】

0 ref属性&#xff08;组件间通信&#xff09; # 1 ref属性放在普通标签上<input type"text" v-model"name" ref"myinput">通过 this.$refs[myinput] 拿到的是 原生dom对象操作dom对象&#xff1a;改值&#xff0c;换属性。。。# 2 ref属…...

编程日记 2024/8/18 21:08:58

ubuntu：最新安装使用docker

前言 系统&#xff1a;ubuntu 22.04 desktop 目的&#xff1a;安装使用docker 安装小猫猫 没有安装包的&#xff0c;可以自己去瞅瞅&#xff0c;这里不提供下载方式 sudo dpkg -i ./cat-verge_1.7.5_amd64.deb 在应用里&#xff0c;打开这个软件&#xff0c;并开启系统猫猫 配…...

编程日记 2024/8/18 21:07:55

Linux ssh 免密失效

sudo chmod -R 777 /home/xxx sudo chown -R xxx:xxx /home/xxx 为什么我输入这两条指令后&#xff0c;ssh免密失效了&#xff1f; 当你使用 sudo chmod -R 777 /home/xxx 和 sudo chown -R xxx:xxx /home/xxx 这两条指令后&#xff0c;可能会导致 SSH 免密登录失效的原因有以…...

编程日记 2024/8/18 21:06:52

k8s上部署ingress-controller

一、安装helm仓库 # helm pull ingress-nginx/ingress-nginx 二、修改 三、运行 # kubectl label nodes node01.110111.cn ingresstrue# kubectl label nodes node02.110112.cn ingresstrue# helm upgrade --install ingress-nginx -n ingress-nginx . -f values.yaml 四、检…...

编程日记 2024/8/18 21:05:49

Android 13 about launcher3 (1)

Android 13 Launcher3 android13#launcher3#分屏相关 Launcher3修改 wm density界面布局不改变 /packages/apps/Launcher3/src/com/android/launcher3/InvariantDeviceProfile.java Launcher的默认配置加载类&#xff0c;通过InvariantDeviceProfile方法可以看出&#xff0c;…...

编程日记 2024/8/18 21:04:48

服务器数据恢复—raid5阵列热备盘未全部启用导致阵列崩溃的数据恢复案例

服务器存储数据恢复环境&#xff1a; 一台EMC某型号存储中有一组RAID5磁盘阵列。该raid5阵列中有12块硬盘&#xff0c;其中2块硬盘为热备盘。 服务器存储故障&#xff1a; 该存储raid5阵列中有两块硬盘离线&#xff0c;只有1块热备盘启用替换掉其中一块离线盘&#xff0c;另外…...

编程日记 2024/8/18 21:03:45

HTML—css

css概述 C S S 是 C a s c a d i n g S t y l e S h e e t s &#xff08; 级 联 样 式 表 &#xff09; 。 C S S 是 一 种 样 式 表 语 言 &#xff0c; 用 于 为 H T M L 文 档 控 制 外 观 &#xff0c; 定 义 布 局 。 例 如 &#xff0c; C S S 涉 及 字 体 、 颜 色 、…...

编程日记 2024/8/18 21:02:44

IO多路复用（Input/Output Multiplexing）

IO多路复用（Input/Output Multiplexing） 是一种在单个线程中管理多个输入/输出通道的技术。它允许一个线程同时监听多个输入流（如网络套接字、文件描述符等），并在有数据可读或可写时进行相应的处理，而不需要为每个通道创建一个独立的线程。这种技术主要用于处理并发连接…...

编程日记 2024/8/18 21:01:43

android与pc 用socket无线通信

今天做一个android与pc通信的小demo&#xff08;不是wifi&#xff0c;蓝牙&#xff09;android为客户端&#xff0c;pc为服务器&#xff08;一对多&#xff09;。pc代码很简单&#xff0c;android客户端代码也不难&#xff0c;但是有一点不太明白就是在客户端向服务器发送消息时…...

编程日记 2024/8/18 21:00:41

【流程引擎】springboot完美集成activiti工作流方案

前言 activiti工作流引擎项目&#xff0c;企业erp、oa、hr、crm等企事业办公系统轻松落地&#xff0c;一套完整并且实际运用在多套项目中的案例&#xff0c;满足日常业务流程审批需求。 项目源码配套文档获取&#xff1a;本文末个人名片直接获取。 一、项目形式 springboot…...

编程日记 2024/8/18 20:59:30

11、常见API

01、String类概述及构造方法简介 一、字符串 由多个字符组成的一串数据 二、简介 String类代表的是一个字符串。字符串对象在开发中是最常见的。为了方便我们对字符串进行操作&#xff0c;java就把字符串用对象进行了封装&#xff0c;这个封装就是String类 三、String类的构造方…...

编程日记 2024/8/18 20:58:29

渗透第三次作业

目录 第一关Ma Spaghet! 第二关Jefff&#xff1a; 第三关&#xff1a;Ugandan Knuckles 第四关&#xff1a;Ricardo Milos 第五关&#xff1a; Ah Thats Hawt 第一关Ma Spaghet! <h2 id"spaghet"></h2> <script>spaghet.innerHTML (new URL(…...

编程日记 2024/8/18 20:57:28

Python自动化：解锁高效工作与生产力的密钥

在当今快节奏的数字时代&#xff0c;自动化已成为提升工作效率、优化流程、减少人为错误的不可或缺的工具。Python&#xff0c;作为一种功能强大、易于学习且应用广泛的编程语言&#xff0c;在自动化领域扮演着举足轻重的角色。无论是数据处理、Web自动化、软件测试&#xff0c…...

编程日记 2024/8/18 20:56:26

Sentinel1.8.1 控制台改造

Sentinel 控制台是流量控制、熔断降级规则统一配置和管理的入口&#xff0c;它为用户提供了机器自发现、簇点链路自发现、监控、规则配置等功能。在 Sentinel 控制台上&#xff0c;我们可以配置规则并实时查看流量控制效果。 本项目是在Sentinel控制台1.8.1的基础上改造的&…...

编程日记 2024/8/18 20:55:25

设计模式（2）行为型模式和七大原则

1、目标 本文的主要目标是学习设计模式的行为型模式并举例说明 2、行为型模式 2.1 观察者模式&#xff08;Observer&#xff09; 观察者模式是对象之间存在一对多的依赖关系&#xff0c;当一个对象的状态发生变化时&#xff0c;所有依赖它的对象都会得到通知并自动更新&…...

编程日记 2024/8/18 20:54:23

学懂C++（三十一）：高级教程——深入详解C++高级多线程编程技术之锁优化与替代

引言 随着多核处理器的普及&#xff0c;多线程编程技术已经成为提高应用程序性能的关键手段。在多线程环境下&#xff0c;如何高效、安全地管理线程之间的共享资源是开发者面临的主要挑战。传统的锁机制&#xff0c;如互斥锁&#xff08;Mutex&#xff09;、临界区&#xff08;…...

编程日记 2024/8/18 20:52:21

Linux - 基础工具使用

文章目录 一、yum1、介绍2、功能3、语法4、使用 二、rzsz1、安装rzsz的指令2、介绍3、使用 三、vim基础使用1、介绍2、基础使用 四、gcc/g使用1、生成可执行文件过程2、语法3、常用选项4、编译过程5、动静态库6、包含头文件的多文件编译7、链接外部库 一、yum 1、介绍 Linux中…...

编程日记 2024/8/18 20:51:19

理解线程id和简单封装原生线程库

一、理解线程id 首先我们要知道给用户提供的线程id不是内核里面LWP&#xff08;轻量级进程id&#xff09;&#xff0c;而是pthread库自己维护的一个唯一值。 我们理解为什么线程id不是内核里面LWP&#xff0c;因为用户没有权限使用内核里面的字段&#xff0c;那是专门给OS管理…...

编程日记 2024/8/18 20:48:16

Unified 阻抗控制 architecture、framework、approach

Unified 阻抗控制&#xff08;Unified Impedance Control&#xff09;作为一种控制策略&#xff0c;其architecture&#xff08;架构&#xff09;、framework&#xff08;框架&#xff09;和approach&#xff08;方法&#xff09;为&#xff1a; 一、Unified 阻抗控制 Archite…...

编程日记 2024/8/18 20:46:13

Java后端面试题(mq相关)(day9)

目录 为什么用MQ&#xff1f; 异步 、削峰、解耦1. 异步处理2. 解耦3. 削峰填谷 Exchange类型什么是死信队列&#xff1f;如何保证消息的可靠性&#xff1f;RabbitMQ中如何解决消息堆积问题?RabbitMQ中如何保证消息有序性?如何防止消息重复消费&#xff1f;(如何保证消息幂等…...

编程日记 2024/8/18 20:44:11

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2025/12/8 7:56:16

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

编程新知 2025/10/31 17:25:40

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2025/12/9 0:41:46

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

编程新知 2025/11/17 18:58:56

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2025/12/3 21:51:26

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

编程新知 2025/8/22 13:56:38

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

编程新知 2025/12/11 9:49:13

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/11/18 18:31:30

怎么让Comfyui导出的图像不包含工作流信息，

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

编程新知 2025/8/13 15:12:54

高防服务器价格高原因分析

高防服务器的价格较高&#xff0c;主要是由于其特殊的防御机制、硬件配置、运营维护等多方面的综合成本。以下从技术、资源和服务三个维度详细解析高防服务器昂贵的原因&#xff1a; 一、硬件与技术投入 大带宽需求 DDoS攻击通过占用大量带宽资源瘫痪目标服务器&#xff0c;因此…...

编程新知 2025/12/8 14:33:23