Vue3
漸進式的javascript框架，我們可以逐步引入vue的功能
官方文檔
Vue.js中文手冊
你可以借助 script 標簽直接通過 CDN 來使用 Vue：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
通過 CDN 使用 Vue 時，不涉及“構建步驟”。這使得設置更加簡單，并且可以用于增強靜態的 HTML 或與后端框架集成。但是，你將無法使用單文件組件 (SFC) 語法。
簡單的web頁面不需要使用復雜的vue框架構建即可呈現出精美的效果，因此我們先使用cdn的方式來學習vue，以后逐步過渡到完整框架。
vue一般有兩種開發方式，一種是組件式，一種是組合式。vue3官方文檔主推組合式的編寫，因此我們也使用組合式開發
組合式學習
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.global.js"></script>
</head>
<body><div id="app"><h1>{{ message }}</h1><p>{{ web.title }} {{ web.url }}</p></div><script>Vue.createApp({// setup選項，用于設置響應式數據和方法等setup(){const message = Vue.ref('Hello Vue!')// 這是個對象，可以直接在模板中使用const web = Vue.reactive({title: 'Vue.js',url: 'https://cn.vuejs.org/' })return {message: message,// web: webweb}}}).mount('#app')</script></body>
</html>
在開發時我們也可以使用模塊化開發的方式大家看上面的代碼示例，每一個vue方法前都有一個Vue.，比如Vue.createApp,然而我們可以直接
import { createApp , reactive} from './vue.esm-browser.js'
即可不加Vue.來直接編寫vue代碼，也不用導入
<script src="vue.global.js"></script>
因此兩種方式視自己喜好選擇即可。
接下來我們將逐步認識各個方法
ref 與 reactive
ref是一個引用，修改使用.value, 而reactive則直接修改對應屬性即可
ref也可以存儲數組
綁定事件 v-on 簡寫 @
顯示和隱藏 v-show
<p v-show="show">...</p>
當show為false就隱藏
條件渲染 v-if
<p v-if="show"> ... </p>
不適用于頻繁切換顯示狀態以下是更好的用法
<p v-if="show < 1000">用戶較少</p>
<p v-else-if="show > 1000 && show < 10000 ">用戶較多</p>
<p v-else>用戶很多</p>
動態屬性綁定v-bind
<input type="text" :value="web.url">
這樣文本框的值就是web.url的值
簡寫直接用:
這個綁定可以用在class, img, src等用法，實現其值的動態綁定
放在li中為每行元素設置title和key
:title=“value.name”
:key=“value.id”
v-for 遍歷數組和對象
<p>遍歷數組或對象</p>
<ul><li v-for="value in arr">{{ value }}</li>
</ul>
const arr = Vue.reactive([1,2,3,4,5])
雙向數據綁定 v-model
單向數據綁定：當數據發生改變時，視圖會自動更新，但是用戶手動修改input的值，數據不會自動更新
雙向數據綁定會自動更新數據的值
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.global.js"></script>
</head><body><div id="app"><h3>文本框 {{ data.text }}</h3><h3>單選框 {{ data.radio }}</h3><h3>多選框 {{ data.checkbox }}</h3><h3>下拉框 {{ data.select }}</h3><h3>記住密碼 {{ data.remember }}</h3>雙向數據綁定 <input type="text" v-model="data.text"><br><input type="radio" value="male" v-model="data.radio"> 男<input type="radio" value="female" v-model="data.radio"> 女<br><input type="checkbox" value="apple" v-model="data.checkbox"> 蘋果<input type="checkbox" value="banana" v-model="data.checkbox"> 香蕉<input type="checkbox" value="orange" v-model="data.checkbox"> 橘子<br><select v-model="data.select"><option value="">請選擇</option><option value="apple">蘋果</option><option value="banana">香蕉</option><option value="orange">橘子</option></select><br><input type="checkbox" v-model="data.remember"> 記住密碼</div><script>Vue.createApp({// setup選項，用于設置響應式數據和方法等setup() {const data = Vue.reactive({text: 'hello',radio: '',checkbox: [],select: '',remember: false})return {data}}}).mount('#app')</script></body></html>
v-model修飾符
之前的雙向數據綁定是實時渲染的(默認形式)，現在我們不需要實時渲染，只要按enter等才改
- 在失去焦點或enter后修改 v-model.lazy
- 輸入框的值轉為數字類型 v-model.number
- 去除首尾空格 v-model.trim
以上是常用的三種
渲染數據 v-text 和 v-html
v-html可以將數據解析為html格式，而v-text會解析為純文本格式
計算屬性computed
可以避免重復計算
偵聽器watch
監聽元素的變化
setup(){const date = reactive({year:2023,month:10})watch(date.year, (newValue, oldValue))=>{console.log("new:", newValue, "old:", oldValue);}
}
// 注意，json中對象和數組是通過引用傳遞的，所以old也是修改后的值，如果是普通變量，則會通過賦值傳遞，會保留old值
自動監聽watchEffect
將不需要手動設定監聽的對象
接下來我們做一個圖片輪播案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.global.js"></script>
</head><body><div id="app"><h1>{{number}}</h1><h1>imageSrc: {{imageSrc}}</h1><img :src="imageSrc" style="width: 300px;"> <br><button @click="next">+</button><button @click="prev">-</button><ul><li v-for="value in 6"><button @click="jump(value)">{{value}}</a></li></ul></div><script>Vue.createApp({// setup選項，用于設置響應式數據和方法等setup() {const number = Vue.ref(1)// 這是個對象，可以直接在模板中使用const next = () => {number.value++if (number.value == 6) {number.value = 1}}const prev = () => {number.value--if (number.value == 1) {number.value = 6}}const web = Vue.reactive({title: 'Vue.js',url: 'https://cn.vuejs.org/'})const imageSrc = Vue.computed(() => {return `image/${number.value}.jpg`})const jump = (value) => {number.value = value}return {number,next,// web: webimageSrc,prev,jump,web}}}).mount('#app')</script></script>
</body></html>
end
![[人機交互]理解界面對用戶的影響](http://pic.xiahunao.cn/[人機交互]理解界面對用戶的影響)
