vscode-创建vue3项目-修改暗黑主题-常见错误-element插件标签-用法涉及问题

文章目录

  • 1.vscode创建运行编译vue3项目
  • 2.添加项目资源
  • 3.添加element-plus元素
  • 4.修改为暗黑主题
    • 4.1.在main.js主文件中引入暗黑样式
    • 4.2.添加自定义样式文件
    • 4.3.html页面html标签添加样式
  • 5.常见错误
    • 5.1.未使用变量
    • 5.2.关闭typescript检查
    • 5.3.调试器支持
    • 5.4.允许未到达代码和未定义代码
  • 6.element常用标签
    • 6.1.下拉列表|el-select
    • 6.2.对话框|el-dialog
  • 7.用法
    • 7.1.其它函数访问data数据
    • 7.2.reactive的使用-异步回调函数中data中数据的引用
    • 7.3.ref的使用-异步回调函数中data中数据的引用
    • 7.4.setup函数返回值-及与data和method的关系
    • 7.5.getCurrentInstance
    • 7.6.纯setup-组合式api绑定范例
    • 7.7.this对象

1.vscode创建运行编译vue3项目

#创建项目
vue create resourceshow
cd resourceshow
#运行项目
npm run serve#安装界面
npm install element-plus --save
npm i qrcode --save#编译项目
npm run build

2.添加项目资源

新建图片文件夹,css文件夹。

3.添加element-plus元素

在main.js文件修改如下:

//全局挂载
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

4.修改为暗黑主题

npm i sass
npm i scss

4.1.在main.js主文件中引入暗黑样式

import 'element-plus/theme-chalk/dark/css-vars.css'

4.2.添加自定义样式文件

import './assets/main.css'

main.css中内容为:

html.dark {--bPageBgColor: #232323;--bTextColor: #fff;--roleHeaderBgColor: #0e0e0e;--selectRowBgColor: #414243;
}

4.3.html页面html标签添加样式

<html lang="" class="dark">

5.常见错误

5.1.未使用变量

error ‘defaultdata’ is assigned a value but never used no-unused-vars

在 package.json 的 rules 里面 添加: “no-unused-vars”: “off” 然后重启项目。

    "rules": {"no-unused-vars": "off"}

5.2.关闭typescript检查

在设置中搜validate->往下滑找到Tyscript>Validate:Enable选项,取消勾选->重启一下vscode
在这里插入图片描述

5.3.调试器支持

在 package.json 的 rules 里面 添加:“no-debugger”: “off” 然后重启项目。

"no-debugger": "off"

5.4.允许未到达代码和未定义代码

"rules": {"no-unused-vars": "off","no-debugger": "off","no-undef": 0 ,"no-unreachable": 0
}

6.element常用标签

6.1.下拉列表|el-select

下拉列表数据绑定。

<template><img alt="Vue logo" src="../img/banner.png"><div><el-button v-model="isDark" type="primary">Primary</el-button></div><el-switch v-model="isDark"/><el-select v-model="user.name" placeholder="请选择"><el-option v-for="item in nameList" :key="item" :label="item" :value="item"></el-option></el-select><p>Message is: {{ user.name }}</p></template><script>
import { useDark, useToggle } from '@vueuse/core'// const isDark = useDark()
// const toggleDark = useToggle(isDark)export default {name: 'App',components: {//HelloWorld},data() {return {nameList: ["clz", "czh", "ccc"],user: {name: ""},};}
}
</script>

6.2.对话框|el-dialog

el-dialog 是 Element UI 框架中的一个组件,用于创建对话框,提供了丰富的功能和选项,可以用来创建各种类型的对话框,如信息确认框、表单填写框等。

<template><div id="Login"><el-dialog title="登录" v-model="dialogVisible" width="300px" :before-close="LoginClose"><img width="248px" height="248px" src="../assets/weixin248.png"><template #footer><span class="dialog-footer"><el-button @click="LoginClose">取 消</el-button><el-button type="primary" @click="LoginOK">确 定</el-button></span></template></el-dialog></div>
</template><script>
import { ref, watch } from 'vue'export default {emits:["Custom-LoginOK"],props: {visible: {type: Boolean,default: false}},setup(props, ctx) {const dialogVisible = ref(false)const LoginClose = () => {//修改属性值ctx.emit("update:visible", false);//dialogVisible.value=false;};const LoginOK = () => {//ctx.emit("update:visible", false);ctx.emit("Custom-LoginOK","");}//属性变换值也发生变化watch(() => props.visible, (val) => {console.log(props.visible, val);dialogVisible.value = val});return {dialogVisible,LoginOK,LoginClose}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

7.用法

7.1.其它函数访问data数据

其它响应函数中访问data函数中的数据对象,可以使用this关键词,如methods对象中的ClearData函数。

export default {name: 'App',components: {//HelloWorld},data() {return {codebarNameList: ["ean13", "code128", "code39", "code93", "ean8", "code11", "二维码"],fontNameList: ["Arial", "宋体", "黑体", "微软雅黑"],codebarPara: {name: "ean13",width: 40,height: 15,fontSize: 7.5,fontName: "Arial",data: "",space: 1,},};},methods: {    ClearData(){this.codebarPara.data="";//const message = ref('Hello Vue3');}}
}

7.2.reactive的使用-异步回调函数中data中数据的引用

在介绍ref和reactive之前,我们先了解一下什么是响应式对象。简单来说,响应式对象是指当数据发生改变时,相关的视图会自动更新。这意味着我们只需要关注数据的变化,而无需手动去更新视图。Vue 3通过使用ref和reactive来实现响应式。

import { useDark, useToggle } from '@vueuse/core'
import { ref, computed } from 'vue';
import { reactive } from 'vue';// const isDark = useDark()
// const toggleDark = useToggle(isDark)
const CodeBarData = ref(null);//excel数据处理
function ExcelDataOpt(excelData) {//删除/rexcelData = excelData.replace(/\r/g, '');//\t转|excelData = excelData.replace(/\t/g, '|');return excelData;
}export default {name: 'Test',components: {//HelloWorld},data() {return {codebarPara: {name: "ean13",width: 40,height: 15,fontSize: 7.5,fontName: "Arial",data: "",space: 1,},};},methods: {CodebarGenerate() {},ClearData() {this.codebarPara.data = "";//const message = ref('Hello Vue3');},ParseDataFromExcel() {//获取剪贴板数据async function GetClipData() {var source = await navigator.clipboard.readText();return source;}//绑定当前对象数据let thisData = reactive(this);GetClipData().then(function (data) {//console.log(data);thisData.codebarPara.data = ExcelDataOpt(data);});}}
}

reactive() 虽然强大,但也有以下几条限制:

a.仅对对象类型有效(对象、数组和 Map、Set 这样的集合类型),而对 string、number 和 boolean 这样的原始类型无效。
b.因为 Vue 的响应式系统是通过属性访问进行追踪的,如果我们直接“替换”一个响应式对象,这会导致对初始引用的响应性连接丢失。

<script setup>
import { reactive } from 'vue'let state = reactive({ count: 0 })
function change() {// 非响应式替换state = reactive({ count: 1 })
}
</script><template><button @click="change">{{ state }} <!-- 当点击button时,始终显示为 { "count": 0 } --></button>
</template>

c.将响应式对象的属性赋值或解构至本地变量,或是将该属性传入一个函数时,会失去响应性。

const state = reactive({ count: 0 })// n 是一个局部变量,和 state.count 失去响应性连接
let n = state.count
// 不会影响 state
n++// count 也和 state.count 失去了响应性连接
let { count } = state
// 不会影响 state
count++// 参数 count 同样和 state.count 失去了响应性连接
function callSomeFunction(count) {// 不会影响 statecount++
}
callSomeFunction(state.count)

7.3.ref的使用-异步回调函数中data中数据的引用

在介绍ref和reactive之前,我们先了解一下什么是响应式对象。简单来说,响应式对象是指当数据发生改变时,相关的视图会自动更新。这意味着我们只需要关注数据的变化,而无需手动去更新视图。Vue 3通过使用ref和reactive来实现响应式。
Vue 提供了一个 ref() 方法来允许我们创建使用任何值类型的响应式 ref 。

import { useDark, useToggle } from '@vueuse/core'
import { ref, computed } from 'vue';
import { reactive } from 'vue';
export default {name: 'Test',components: {//HelloWorld},data() {return {codebarPara: {name: "ean13",width: 40,height: 15,fontSize: 7.5,fontName: "Arial",data: "",space: 1,},};},methods: {CodebarGenerate() {},ClearData() {this.codebarPara.data = "";//const message = ref('Hello Vue3');},ParseDataFromExcel() {//获取剪贴板数据async function GetClipData() {var source = await navigator.clipboard.readText();return source;}//绑定当前对象数据let thisData = ref(this);GetClipData().then(function (data) {//console.log(data);thisData.value.codebarPara.data = ExcelDataOpt(data);});}}
}

7.4.setup函数返回值-及与data和method的关系

setup函数的使用,通过返回值将数据和方法传到页面,返回值也可以是一个箭头函数
setup先于data和method执行,所以无法读取到this和data,method的内容,反之可以。可以直接将方法放在setup下,然后再进行暴露即可使用。
【注意】setup 内部的属性和方法,必须 return 暴露出来,将属性挂载到实例上,否则没有办法使用。

setup函数:第一个参数是 props ,表示父组件给子组件传值,props 是响应式的,当传入新的 props 时,自动更新。
第二个参数是context 上下文环境,其中包含了 属性、插槽、自定义事件三部分。

范例1,互访问

  import { useDark, useToggle } from '@vueuse/core'import { getCurrentInstance, reactive, toRefs, watch, ref } from 'vue'import { onMounted } from 'vue'export default {name: 'test',components: {//HelloWorld},data() {return {codebarNameList: ["ean13", "code128", "code39", "code93", "ean8", "code11", "二维码"],fontNameList: ["Arial", "宋体", "黑体", "微软雅黑"],codebarPara: {name: "ean13",width: 40,height: 15,fontSize: 7.5,fontName: "Arial",data: "",space: 1,},};},setup(props, ctx) {const hello = ref(null);const { proxy } = getCurrentInstance();//全局this对象//加载onMounted(() => {console.log(hello.value); // <div>知了插件</div>var helloObj = hello.value;helloObj.id="123";});const ClearDataClicked = () => {//访问data数据成员对象,并修改值proxy.codebarPara.data="";};return {hello,ClearDataClicked}},methods: {CodebarGenerate() {//访问setup和data中暴露的值和函数this.ClearDataClicked();return; },  ParseDataFromExcel(){//获取剪贴板数据async function GetClipData() {var source = await navigator.clipboard.readText();        return source;}//绑定当前对象数据let thisData = ref(this);GetClipData().then(function(data){//console.log(data);thisData.value.codebarPara.data=ExcelDataOpt(data);//hello.value=data;});      }}}

范例2.常用组织

import { useDark, useToggle } from '@vueuse/core'
import { defineComponent, getCurrentInstance, reactive, toRefs, watch, ref } from 'vue'
import { onMounted } from 'vue'// const isDark = useDark()
// const toggleDark = useToggle(isDark)//excel数据处理
function ExcelDataOpt(excelData) {//删除/rexcelData = excelData.replace(/\r/g, '');//\t转|excelData = excelData.replace(/\t/g, '|');return excelData;
}export default {name: 'App',components: {//HelloWorld},data() {return {codebarNameList: ["ean13", "code128", "code39", "code93", "ean8", "code11", "二维码"],fontNameList: ["Arial", "宋体", "黑体", "微软雅黑"],codebarPara: {name: "ean13",width: 40,height: 15,fontSize: 7.5,fontName: "Arial",data: "",space: 1,},};},setup(props, ctx) {const CodebarParaData = ref(null);onMounted(() => {console.log(CodebarParaData.value); // <div>知了插件</div>});const { proxy } = getCurrentInstance();const ClearDataClicked = () => {var cd = proxy.codebarPara;cd.data = "";};const CodebarGenerate = () => {      }const ParseDataFromExcel = () => {//获取剪贴板数据async function GetClipData() {var source = await navigator.clipboard.readText();return source;}GetClipData().then(function (data) {//console.log(data);proxy.codebarPara.data = ExcelDataOpt(data);//hello.value=data;});}return {hello,ClearDataClicked,CodebarGenerate,ParseDataFromExcel}},methods: {}
}

7.5.getCurrentInstance

getCurrentInstance 只能在 setup 或生命周期钩子中使用,内部api建议不要使用。

7.6.纯setup-组合式api绑定范例

<template>
<el-input ref="CodebarParaData" type="textarea" v-model="codebarPara.data" :autosize="{ minRows: 5, maxRows: 10 }"></el-input>
</template>
<script>
import { useDark, useToggle } from '@vueuse/core'
import { getCurrentInstance, reactive, toRefs, watch, ref } from 'vue'
import { onMounted } from 'vue'export default {name: 'App',components: {//HelloWorld},data() {return {      };},setup(props, ctx) {const CodebarParaData = ref(null);onMounted(() => {console.log(CodebarParaData.value); // <div>知了插件</div>});const codebarNameList = ref(["ean13", "code128", "code39", "code93", "ean8", "code11", "二维码"]);const fontNameList = ref(["Arial", "宋体", "黑体", "微软雅黑"]);const codebarPara = ref({name: "ean13",width: 40,height: 15,fontSize: 7.5,fontName: "Arial",data: "",space: 1,});const { proxy } = getCurrentInstance();const ClearDataClicked = () => {codebarPara.value.data = "";};const CodebarGenerate = () => {}const ParseDataFromExcel = () => {//获取剪贴板数据async function GetClipData() {var source = await navigator.clipboard.readText();return source;}GetClipData().then(function (data) {codebarPara.value.data = ExcelDataOpt(data);});}return {CodebarParaData,ClearDataClicked,CodebarGenerate,ParseDataFromExcel,codebarNameList,fontNameList,codebarPara}},methods: {}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;/*color: #2c3e50;*/color: var(--bTextColor);margin: 0px;padding-left: 0;height: 100%;
}
</style>

7.7.this对象

Vue 自动为 methods 绑定 this,以便于它始终指向组件实例。这将确保方法在用作事件监听或回调时保持正确的 this 指向。在定义 methods 时应避免使用箭头函数,因为这会阻止 Vue 绑定恰当的 this 指向。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

UE5的安装与基本操作(一)

文章目录 前言安装UE5新建第一个游戏项目基本游览方式对目标进行变换各种变换对齐 快速定位目标 总结 前言 Unreal Engine 5 (UE5) 是一款由 Epic Games 开发的实时 3D 创作平台&#xff0c;用于制作游戏、电影、动画、建筑可视化和其他类型的交互式体验。UE5 提供了一系列强大…

Flutter第十五弹 Flutter插件

目标&#xff1a; 1.Flutter插件是什么&#xff1f;有什么作用&#xff1f; 插件 (plugin) 是 package 的一种&#xff0c;全称是 plugin package&#xff0c;我们简称为 plugin&#xff0c;中文叫插件。 2.怎么创建Flutter插件&#xff1f; 一、什么是插件 在flutter中&am…

【成都活动邀请函】7月6 | PowerData 数字经济-“成都“开源行!

【成都活动邀请函】7月6 | PowerData 数字经济-"成都"开源行&#xff01; 活动介绍活动信息线上直播扫码报名往期活动回顾专注数据开源&#xff0c;推动大数据发展 活动介绍 九天开出一成都&#xff0c;万户千门入画图。 自古以来&#xff0c;成都便是国家发展的重要…

第2章-Python编程基础

#本章目标 1&#xff0c;了解什么是计算机程序 2&#xff0c;了解什么是编程语言 3&#xff0c;了解编程语言的分类 4&#xff0c;了解静态语言与脚本语言的区别 5&#xff0c;掌握IPO程序编写方法 6&#xff0c;熟练应用输出函数print与输入函数input 7&#xff0c;掌握Python…

【机器学习】机器学习的重要技术——生成对抗网络:理论、算法与实践

引言 生成对抗网络&#xff08;Generative Adversarial Networks, GANs&#xff09;由Ian Goodfellow等人在2014年提出&#xff0c;通过生成器和判别器两个神经网络的对抗训练&#xff0c;成功实现了高质量数据的生成。GANs在图像生成、数据增强、风格迁移等领域取得了显著成果…

leetCode.97. 交错字符串

leetCode.97. 交错字符串 题目思路 代码 class Solution { public:bool isInterleave(string s1, string s2, string s3) {int n s1.size(), m s2.size();if ( s3.size() ! n m ) return false;vector<vector<bool>> f( n 1, vector<bool> (m 1));s1 …

C语言使用void *类型作为函数传参

C语言使用void *怎么理解&#xff1a; 根据本人的理解&#xff0c;他就是指向操作数据区的首地址而已 凡是void指的数据区都要进行第二次初始化数据类型&#xff08;即dtype p(dtype)pdata&#xff09;*。 举两个例子&#xff1a; 传入函数&#xff1a; void tx_data(void …

Sparse4D v3: Advancing End-to-End 3D Detection and Tracking

Sparse4D v3: Advancing End-to-End 3D Detection and Tracking 相关内容&#xff1a;总览&#xff0c;Sparse4D v1&#xff0c;Sparse4D v2&#xff0c; 单位&#xff1a;地平线(Sparse4D v1 v2 原班人马) GitHub&#xff1a;https://github.com/HorizonRobotics/Sparse4D …

昇思25天学习打卡营第5天 | 网络构建

目录 1.定义模型类 2.模型层 nn.Flatten nn.Dense nn.ReLU nn.SequentialCell nn.Softmax 3.模型参数 代码实现&#xff1a; 总结 神经网络模型是由神经网络层和Tensor操作构成的&#xff0c; mindspore.nn提供了常见神经网络层的实现&#xff0c; 在MindSpore中&a…

启动spring boot项目停止 提示80端口已经被占用

可能的情况: 检查并结束占用进程: 首先,你需要确定哪个进程正在使用80端口。在Windows上,可以通过命令行输入netstat -ano | findstr LISTENING | findstr :80来查看80端口的PID,然后在任务管理器中结束该进程。在

AI智能客服项目拆解(1) 产品大纲

本文作为拆解AI智能客服项目的首篇&#xff0c;以介绍产品大纲为主。后续以某AI智能客服产品为例&#xff0c;拆解相关技术细节。 AI智能客服是一种基于人工智能技术的客户服务解决方案&#xff0c;旨在提高客户满意度和优化企业运营。利用人工智能和自然语言处理技术&#xff…

MySQL之索引失效的情况

什么情况下索引会失效&#xff1f; 违反最左前缀原则范围查询右边的列不能使用索引不要在索引列上进行运算操作字符串不加单引号导致索引失效以%开头的like模糊查询 什么情况下索引会失效&#xff1f; 示例&#xff0c;有user表如下 CREATE TABLE user (id bigint(20) NOT NU…

实验1 多层感知器设计(MLP)

1.实验目的 掌握多层感知器的原理。掌握多层感知器的设计、训练和测试。2.实验要求 设计一个多层感知器,用于对给定的数据进行分类。要求代码格式规范,注释齐全,程序可正常运行。 3.模型设计 实验设计一个多层感知机,三层机构,只含一个隐藏层,输入层,隐藏层,输出层 1…

JAVA期末速成库(11)第十二章

一、习题介绍 第十二章 Check Point&#xff1a;P454 12.1&#xff0c;12.9&#xff0c;12.10&#xff0c;12,12 二、习题及答案 12.1 What is the advantage of using exception handling? 12.1使用异常处理的优势是什么? 答:使用异常处理有以下优势&#xff1a; 1. 提高…

C++ 模板类的示例-数组

类模板可以有非通用类型参数&#xff1a;1&#xff09;通常是整型&#xff08;C20标准可以用其它的类型&#xff09;&#xff1b;2&#xff09;实例化模板时必须用常量表达式&#xff1b;3&#xff09;模板中不能修改参数的值&#xff1b;4&#xff09;可以为非通用类型参数提供…

Android中使用performClick触发点击事件

Android中使用performClick触发点击事件 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将探讨在Android开发中如何使用 performClick() 方法来触发点击…

数据库-python SQLite3

数据库-python SQLite3 一&#xff1a;sqlite3 简介二: sqlite3 流程1> demo2> sqlite3 流程 三&#xff1a;sqlite3 step1> create table2> insert into3> update4> select1. fetchall()2. fetchone()3. fetchmany() 5> delete6> other step 四&#…

Spark join数据倾斜调优

Spark中常见的两种数据倾斜现象如下 stage部分task执行特别慢 一般情况下是某个task处理的数据量远大于其他task处理的数据量&#xff0c;当然也不排除是程序代码没有冗余&#xff0c;异常数据导致程序运行异常。 作业重试多次某几个task总会失败 常见的退出码143、53、137…

【电路笔记】-放大器类型

放大器类型 文章目录 放大器类型1、概述2、关于偏置的注意事项3、A类(Class A)放大器4、B类(Class B)放大器5、AB类(Class AB)放大器6、C类(Class C)放大器7、总结1、概述 放大器通常根据输出级的结构进行分类。 事实上,功率放大确实发生在该阶段,因此输出信号的质量和…

Arduino (esp ) 下String的内存释放

在个人的开源项目 GitHub - StarCompute/tftziku: 这是一个通过单片机在各种屏幕上显示中文的解决方案 中为了方便快速检索使用了string&#xff0c;于是这个string在esp8266中占了40多k,原本以为当string设置为""的时候这个40k就可以回收&#xff0c;结果发觉不行…