課程地址：【新課uniapp零基礎(chǔ)入門到項目打包（微信小程序/H5/vue/安卓apk）全掌握】 https://www.bilibili.com/video/BV1mT411K7nW/?p=12&share_source=copy_web&vd_source=b1cb921b73fe3808550eaf2224d1c155
目錄
三、vue基礎(chǔ)
3.1 vue介紹與傳統(tǒng)js的差異化
?3.2 模板語法
3.3 data屬性
3.4 條件渲染?
3.4.1 v-if和v-else
3.4.2 v-show
3.4.3 v-if和v-show的區(qū)別
3.5 列表渲染 v-for
3.5.1 對數(shù)組進(jìn)行渲染
3.5.2 對對象進(jìn)行渲染
3.5.3 key
3.6 vue的常用指令
3.6.1 v-html
3.6.2 v-once
3.6.3 v-bind ※
3.6.4 v-on 事件
?3.7 style綁定及隨機(jī)色案例練習(xí)
3.8 綁定class的多種方法
?3.9 小案例點擊導(dǎo)航高亮顯示
3.9.1 基礎(chǔ)樣式
3.9.2 選中高亮顯示
?3.11 v-model數(shù)據(jù)雙向綁定
3.12 案例-表單提交-雙向綁定與表單配合
3.13 表單組件介紹
3.13.1 @submit
3.13.2 radio-group
3.13.3 底部選擇器picker
3.14 計算屬性computed
三、vue基礎(chǔ)
繼續(xù)回到官網(wǎng)的“教程”。
js語法，這里有ES6引入和導(dǎo)出的一些東西，用到再說。
css語法之前說過，rpx也講過了。
現(xiàn)在看vue語法。介紹 | uni-app官網(wǎng)
本次課程用的是vue2（vue2可以去看【2021最新Vue從基礎(chǔ)到實例高級_vue2_vuecli腳手架博客案例】 https://www.bilibili.com/video/BV1pz4y1S7bC/?share_source=copy_web&vd_source=b1cb921b73fe3808550eaf2224d1c155，也是這個up的）
- 學(xué)習(xí)vue3也是從vue2開始看起。
- 原因1 商業(yè)項目依然使用vue2進(jìn)行維護(hù)，vue3多是新項目。
3.1 vue介紹與傳統(tǒng)js的差異化
- 解釋1:：vue是單文件項目
- 之前html去寫多個頁面
- vue單文件項目，在pages里創(chuàng)建了許多頁面，最終解析出來就是一個index.html。
- vue最終通過js編寫，編寫到一個div上去了，這就是單文件項目，最終項目打包時只有一個index.html。
- App.vue是一個頂級父組件，其他的vue文件都是子組件，子組件里可以創(chuàng)建更多的子組件。
- 注意1：template里只有一個根標(biāo)簽，否則會報錯。
- 解釋2：動態(tài)數(shù)據(jù)綁定
- jQuery：節(jié)點綁定，通過控制頁面的節(jié)點來獲取類名，然后在js中控制
- vue：數(shù)據(jù)驅(qū)動，根據(jù)js中的數(shù)據(jù)進(jìn)行綁定
- 注意2：一些外部文件引用格式發(fā)生變化
- 注意3：js變化
- 以前是通過操作DOM元素改變DOM元素的屬性或值
- 現(xiàn)在是通過vue的MVVM模型
案例，總結(jié)下vue基礎(chǔ)知識。
新建一個demo頁面，說明vue的一些知識。
- 數(shù)據(jù)渲染
-
<template> <view> <view> 當(dāng)前標(biāo)題：{{ title }} </view> </view> </template> <script> export default { data() { return { title: "uniapp學(xué)習(xí)" }; } } </script>之前修改是document.getElementsByClassName("box").innerHTML = xxx，這里使用vue的模版語法就可以實現(xiàn)數(shù)據(jù)渲染了。（其實老師具體也沒介紹什么是數(shù)據(jù)渲染）
-
?3.2 模板語法
介紹 | uni-app官網(wǎng)
插值語法
3.3 data屬性
介紹 | uni-app官網(wǎng)
data 必須聲明為返回一個初始數(shù)據(jù)對象的函數(shù)。
data里寫一個return，return 返回一個對象，然后html就把這個對象的所有屬性拿到。
3.4 條件渲染?
3.4.1 v-if和v-else
v-if會讀取state的值，是true的話就會顯示obj.age，false的話就不顯示。
<view v-if="obj.state"> {{obj.age}}</view>v-else要與v-if連用，且v-else是沒有條件的。
<view v-if="obj.state"> {{obj.age}}</view>
<view v-else> {{obj.name}}</view>且v-if和v-else要挨在一起（加空格或者回車是可以的，加v-else-if也是可以的，加其他的就會報錯）
注意這里的obj.state，取值是true /false，是boolean值，而不是“true”/“false”（這是字符串，不是boolean）
3.4.2 v-show
<view v-show="obj.state">{{obj.name}}</view>3.4.3 v-if和v-show的區(qū)別
v-if取值為false，則標(biāo)簽在頁面上不存在，v-show取值為false，標(biāo)簽在頁面上存在，但是display為none，是由css控制的，性能更好些。
當(dāng)v-if取值從false改為true，相當(dāng)于對DOM體重新進(jìn)行了一次渲染，所以性能低。
不過差異也不是很大，所以都可以使用，但是注意區(qū)別。v-show不顯示，但是DOM體存在。
3.5 列表渲染 v-for
對js數(shù)據(jù)里的數(shù)組或?qū)ο筮M(jìn)行渲染。
3.5.1 對數(shù)組進(jìn)行渲染
<view v-for="(item, index) in arr">
{{arr[index]}}
</view>arr是個數(shù)組，定義為arr: ['123','str','456','桃七']。
v-for里只寫一個參數(shù)，則是item，即數(shù)組里的每一項。
<view v-for="item in arr">
{{ item }}
</view>3.5.2 對對象進(jìn)行渲染
v-for還可以循環(huán)打印對象，但是用的不多。
<view v-for="(value, name, index) in arr">
{{ index }} - {{ name }} - {{ value }}
</view>index是索引，name是對象的屬性名，value是對象的屬性值。
3.5.3 key
key，唯一標(biāo)識符，在對一些變化的數(shù)據(jù)處理時，可以表示唯一辨識符。
不寫key的時候，一些編譯器會報錯，比如vs code。
給key賦值選擇數(shù)據(jù)里唯一的值，比如id等。
寫法（注意，index要出現(xiàn)過，才可給key賦值）
<view v-for="(item, index) in arr" :key="index">
{{index}}
</view>
3.6 vue的常用指令
3.6.1 v-html
第1行和第2行效果都是一樣的。
<view>{{title}}</view>
<view v-html="title"></view>區(qū)別在于
當(dāng)變量是含標(biāo)簽內(nèi)容的字符串時，寫法1插值語法不能解析html標(biāo)簽，而寫法2v-html可以解析html標(biāo)簽。
效果
之前說，對于<hx>標(biāo)簽，h5可以解析顯示正確的樣式，但是小程序不能。
v-html可以在小程序上正常渲染html標(biāo)簽。原理是直接寫成了支持html標(biāo)簽的nodes，可以在uniapp官網(wǎng)的組件里的rich-text的nodes屬性里查看。
3.6.2 v-once
H5和微信小程序均不支持。
v-once只渲染一次。
3.6.3 v-bind ※
動態(tài)綁定標(biāo)簽的屬性。
場景：圖片的路徑src可能需要動態(tài)獲取。
例如：通過添加v-bind，使得src可以讀取data中的img變量內(nèi)容。
v-bind: 可以簡寫為 :?
動態(tài)顯示3張不同的圖，圖片路徑相同，圖片title分別為png1、png2和png3。
<image :src="'../../static/images/png'+item+'.png'" mode="" v-for="item in 3">
</image>3.6.4 v-on 事件
原始寫法：div里寫個onClick（其實我已經(jīng)忘記了）。
methods是一個對象，里面的屬性就是函數(shù)。
data是個函數(shù)，return一個對象。
寫法
①v-on指令，綁定了click事件（還有其他事件）。
②發(fā)生click事件時，執(zhí)行onClick方法。
③onClick方法的定義。注意對data中的數(shù)據(jù)處理時前面要加this，因為是vue實例對象的屬性。
指令簡寫：v-on簡寫為@
事件處理函數(shù)的簡寫，: 和 function去掉
data就是一個簡寫后的函數(shù)。
?3.7 style綁定及隨機(jī)色案例練習(xí)
（可以直接去看④）
案例，點擊盒子可以改變盒子顏色
① 基礎(chǔ)知識：行內(nèi)樣式：<view class="box" style="background: blue"></view>
② 綁定style樣式的寫法
等號右邊的字符串里面放了一個對象，里面有屬性background和對應(yīng)屬性值‘blue’，注意屬性值是字符串。
<view class="box" :style="{background: 'blue'}"></view>③ 將屬性值改為變量，
變量命名，注意，變量也是字符串。
如此便實現(xiàn)了style樣式的綁定。
④ 添加綁定事件
事件處理函數(shù)
注意1 是將number變?yōu)閟tring類型；2 產(chǎn)生隨機(jī)小數(shù)；3 截取字符串的方法。
3.8 綁定class的多種方法
上節(jié)課的style綁定，適合樣式少的情況。
當(dāng)要綁定的樣式過多的時候，3.7節(jié)的方法就不再適用了。
步驟① 提前寫好一個樣式
步驟② 綁定樣式，等號右邊是一個對象（與3.7相似），屬性是步驟①里定義的類名，屬性值是boolean值，由點擊事件控制，boolean值變化在點擊事件的處理函數(shù)里。
步驟③ 綁定點擊事件，對應(yīng)的事件處理函數(shù)如下（isActive要在data里定義）
注意：當(dāng)isActive為true時，第5行代碼的view的class為“block myActive”。
一般不怎么用上面的方法。
寫法② 三元表達(dá)式。
（只改變了template里的寫法，其他寫法是一樣的）
up用三元表達(dá)式的方式（這個方法就夠用了）。
寫法③ 數(shù)組形式
up沒怎么講，有需要可以自己看看。
適合綁定多個class的場景。
?3.9 小案例點擊導(dǎo)航高亮顯示
點擊導(dǎo)航，高亮顯示，使用jQuery操作DOM，還是比較麻煩的。這里使用數(shù)據(jù)綁定來實現(xiàn)。
3.9.1 基礎(chǔ)樣式
template代碼
導(dǎo)航欄數(shù)據(jù)
樣式
顯示效果
3.9.2 選中高亮顯示
綁定點擊事件，通過index傳值
設(shè)置標(biāo)記值，用于標(biāo)記當(dāng)前高亮的導(dǎo)航
當(dāng)標(biāo)記值等于當(dāng)前item的index時，綁定active類，否則不綁定
當(dāng)發(fā)生點擊事件時，標(biāo)記值變化
45行可以去掉。
實現(xiàn)效果
點擊導(dǎo)航可以高亮
?3.11 v-model數(shù)據(jù)雙向綁定
v-bind通過js控制DOM體。
v-model可以通過DOM體控制js變化，js變化也可以控制DOM體，此為雙向綁定。
雙向綁定只能作用于表單上，最常見的就是input標(biāo)簽。
input要額外加個樣式
效果
簡寫形式：
v-model綁定的值是value的時候，:value可以省略。
3.12 案例-表單提交-雙向綁定與表單配合
案例：收集用戶名稱、電話和留言。
對對象里的屬性進(jìn)行雙向數(shù)據(jù)綁定。
代碼：
對象定義
樣式
效果
對于單選、底部選擇器picker，無法直接使用v-model的，需要自定義組件。
3.13 表單組件介紹
form組件
3.13.1 @submit
綁定提交事件。
當(dāng)點擊鼠標(biāo)提交表單時，觸發(fā)onSubmit事件處理函數(shù)，打印數(shù)據(jù)，即表單收集的數(shù)據(jù)。
onSubmit事件處理函數(shù)，入?yún)⒕褪潜韱问占膇nput和textarea的值。
打印的值在detail的value里。
對應(yīng)content與username。這在表單的input和textarea的name里定義了。
總結(jié)：表單提交條件
- 給button添加form-type為submit；
- 給標(biāo)簽添加name；
- 給form標(biāo)簽綁定submit事件。
3.13.2 radio-group
在表單中加一組radio-group單選框。
添加name屬性。
checked表示默認(rèn)選擇。
提交表單，表單的gender信息為保密。
還有復(fù)選框，checkbox-group，這里就不描述了。checkbox-group | uni-app官網(wǎng)
3.13.3 底部選擇器picker
picker | uni-app官網(wǎng)
案例
range是可選擇的選項內(nèi)容，name是用于收集picker最終選擇的內(nèi)容。
效果
表單收集的值
① 設(shè)置默認(rèn)固定的選項
添加value，
selectValue初始值為2，打開，學(xué)歷就留在索引為2的內(nèi)容上了。
② 選擇學(xué)歷后，要在頁面上顯示出來。
value改變時觸發(fā)change事件
事件處理函數(shù)
入?yún)里的detail的value就是picker被選擇變化后的value。
將這個value賦值給selectValue，那么當(dāng)前頁面顯示的學(xué)歷就會是用戶選擇的學(xué)歷了。
效果
選擇大專后，頁面的本科變?yōu)榇髮！?/p>
這一節(jié)有點長，完整代碼如下
<template>
<view>
<form @submit="onSubmit">
<view class="row">
<input type="text" name="username"/>
</view>
<view class="row">
<textarea name="content"></textarea>
</view>
<view class="">
<radio-group name='gender'>
<radio value='女'>女</radio>
<radio value='男'>男</radio>
<radio value='保密' checked>保密</radio>
</radio-group>
</view>
<view class="row">
<picker :range="options" name="school" :value="selectValue" @change="pickerChange">
<view>點擊選擇學(xué)歷：{{options[selectValue]}}</view>
</picker>
</view>
<view class="row">
<button form-type="submit" type="primary">提交表單</button>
<button form-type="reset">重置表單</button>
</view>
</form>
</view>
</template>
<script>
export default {
data() {
return {
options: ["高中","大專","本科","博士"],
selectValue: 2,
}
},
methods: {
onSubmit(e) {
console.log(e);//e就是input和textarea輸入的值
},
pickerChange(e) {
console.log(e);
this.selectValue = e.detail.value;
}
}
}
</script>
<style>
input, textarea {
border: 1px solid #eee;
}
.row {
padding: 20rpx 0;
}
</style>
3.14 計算屬性computed
介紹 | uni-app官網(wǎng)
計算屬性可以理解是data里的值。
案例
changeTitle是計算屬性。
定義如下，對input框里輸入的title轉(zhuǎn)大寫。
注意
① computed與methods同級；
② 字母轉(zhuǎn)大寫的方法時toUpperCase();
③ 計算屬性使用時不用加().
④ methods方法在template中調(diào)用，要加 ()，? 事件處理函數(shù)不需要加括號()
⑤ 計算屬性與方法的區(qū)別，介紹 | uni-app官網(wǎng)文章來源：http://www.zghlxwxcb.cn/news/detail-809776.html
盡管計算屬性在性能上可能要優(yōu)于方法，但其實還是methods用的多。文章來源地址http://www.zghlxwxcb.cn/news/detail-809776.html
到了這里，關(guān)于【b站咸蝦米】chapter3_vue基礎(chǔ)_新課uniapp零基礎(chǔ)入門到項目打包（微信小程序/H5/vue/安卓apk）全掌握的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
