文章目錄
- 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 指向。
 產品大綱)
 下String的內存釋放)