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

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

news 文章来源：https://blog.csdn.net/weixin_50556117/article/details/141196453 2025/4/3 11:33:28

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

算法-华为OD机试-识别有效的IP地址和掩码并进行分类统计

1.描述 见牛客网 https://www.nowcoder.com/practice/de538edd6f7e4bc3a5689723a74356822. 分析 根据题目要求&#xff0c;分为以下几步 1. 提取IP地址和子网掩码 我们首先需要拆分输入的每一行&#xff0c;分别提取IP地址和子网掩码&#xff0c;并检查它们的合法性。 2.…...

编程日记 2024/8/18 20:43:09

钉钉开发网页应用JSAPI前端授权鉴权nodejs实现

钉钉开发网页应用JSAPI前端授权鉴权nodejs实现 使用钉钉进行H5网页开发的时候&#xff0c;需要调用一些钉钉提供具有原生能力的api&#xff0c;要调用这些api需要进行jsapi授权。 详见官方文档&#xff08;可选&#xff09;开发网页应用前端 - 钉钉开放平台 (dingtalk.com) 官方…...

编程日记 2024/8/18 20:41:06

uniapp 自定义全局弹窗

自定义全局弹窗可在js和.vue文件中调用&#xff0c;unipop样式不满足&#xff0c;需自定义样式。 效果图 目录结构 index.vue <template><view class"uni-popup" v-if"isShow"><view class"uni-popup__mask uni-center ani uni-cust…...

编程日记 2024/8/18 20:40:05

element+-ui图片无法使用--安装

element-ui图片无法使用 安装npm install element-plus/icons-vue 注册 // main.jsimport * as ElementPlusIconsVue from element-plus/icons-vueconst app createApp(App) for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, compo…...

编程日记 2024/8/18 20:39:03

Python编码系列—Python ORM（对象关系映射）：高效数据库编程实践

&#x1f31f;&#x1f31f; 欢迎来到我的技术小筑&#xff0c;一个专为技术探索者打造的交流空间。在这里&#xff0c;我们不仅分享代码的智慧&#xff0c;还探讨技术的深度与广度。无论您是资深开发者还是技术新手&#xff0c;这里都有一片属于您的天空。让我们在知识的海洋中…...

编程日记 2024/8/18 20:36:00

一次日志记录中使用fastjson涉及到ByteBuffer的教训

背景 目前本人在公司负责的模块中&#xff0c;有一个模块是负责数据同步的&#xff0c;主要是将我们数据产线使用的 AWS Dynamodb 同步的我们的测试QA 的环境的 MongoDB 的库中&#xff0c;去年开始也提供了使用 EMR 批量同步的功能&#xff0c;但是有时候业务也需要少量的数据…...

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

掌握TCP连接管理与流量控制：从零开始

文章目录 1. TCP连接管理1.1 三次握手&#xff08;Three-way Handshake&#xff09;1.2 四次挥手&#xff08;Four-way Handshake&#xff09;1.3 TCP连接管理的重要性 2. TCP流量控制2.1 滑动窗口&#xff08;Sliding Window&#xff09;2.2 拥塞控制&#xff08;Congestion C…...

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

python提取b站视频的音频（提供源码

如果我想开一家咖啡厅&#xff0c;那么咖啡厅的音乐可得精挑细选&#xff01;又假设我非常喜欢o叔&#xff0c;而o叔只在b站弹钢琴&#xff0c;那这时候我就得想方设法把b站的视频转为音频咯&#xff01; 一、首先打开网页版bilibili&#xff0c;按F12&#xff1a; 二、刷新页面…...

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

嵌入式Linux ,QT5 鼠标键盘设备参数指定环境变量的方法

根文件系统中&#xff0c;一般用mdev来管理设备&#xff0c;不像udev方便&#xff0c;有时候在执行rcS脚本的时候因为&#xff0c;太快&#xff0c;有些设备比如鼠标还没在/dev/input中生成设备文件&#xff0c;最好使用前用mdev -s扫描并等待几秒钟&#xff0c;然后就可以在in…...

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

C语言钥匙迷宫2.0

目录 开头程序程序的流程图程序游玩的效果结尾 开头 大家好&#xff0c;我叫这是我58。废话不多说&#xff0c;咱们直接开始。 程序 #define _CRT_SECURE_NO_WARNINGS 1 #include <stdio.h> #include <string.h> #include <Windows.h> enum color {Y,B,R …...

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