vue3創(chuàng)建一個項目
PS D:\code> npm init vue@latest
Vue.js - The Progressive JavaScript Framework
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? ? No
√ Add ESLint for code quality? ... No / Yes
Scaffolding project in D:\code\vue-demo1...
Done. Now run:
cd vue-demo1
npm install
npm run dev
PS D:\code> cd .\vue-demo1\
PS D:\code\vue-demo1> npm install
added 25 packages, and audited 26 packages in 33s
3 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
PS D:\code\vue-demo1> npm run dev
> vue-demo1@0.0.0 dev
> vite
VITE v4.4.9 ready in 453 ms
? Local: http://localhost:5173/
? Network: use --host to expose
? press h to show help
1.模板語法
數(shù)據(jù)綁定最常見的形式就是使用“雙大括號” 語法在HTML中插入文本：
<p>Message: {{ msg }}</p>
{{msg}}將被替代對應(yīng)組件實例中msg屬性的值。無論何時，綁定的組件實例上msg屬性發(fā)
生改變，插值處內(nèi)容都會更新
<template>
<h1>{{ msg }}</h1>
</template>
<script>
export default{
data(){ //data函數(shù)
return { //return 方法
msg:"1234567"
}
}
}
</script>
2.Vue 常用指令
? 指令介紹
? v-text
? v-html
? v-bind
? v-on
? 指令縮寫
指令：帶有 v- 前綴的特殊屬性。
指令的作用：當(dāng)表達式的值改變時，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于 DOM文章來源：http://www.zghlxwxcb.cn/news/detail-660665.html
v-text作用與雙大花括號作用一樣，將數(shù)據(jù)填充到標(biāo)簽中。但沒有閃爍問題！
某些情況下，從服務(wù)端請求的數(shù)據(jù)本身就是一個HTML代碼，如果用雙大括號會將數(shù)據(jù)解
釋為普通文本，而非HTML代碼，為了輸出真正的HTML，需要使用v-html指令。
在前端開發(fā)中，我們經(jīng)常監(jiān)聽用戶發(fā)生的事件，例如點擊、拖拽、鍵盤事件等。
在Vue中如何監(jiān)聽事件呢？使用v-on指令，v-on: 冒號后面是event參數(shù)，例如click、change
示例：監(jiān)聽按鈕的點擊事件
文章來源地址http://www.zghlxwxcb.cn/news/detail-660665.html
到了這里，關(guān)于vue3 基礎(chǔ)知識的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
