vuejs基礎語法 · uniapp

> 基礎語法學習，磨刀不誤砍柴工，必須掌握 [TOC] ## 文本插值 > 數據綁定最常見的形式就是使用“Mustache”語法 (雙大括號) 的文本插值 > Mustache 不支持if else 以及for loop之類的語法，僅簡單的一個雙大括號標簽，官方稱之為 “logic-less”，沒有邏輯的模板語法 ~~~ <view>{{val? val: '0'}}</view> // 簡單的三元表達式 <view>{{val / 60}}</view> // 簡單的數學算數運算，當然‘加減乘除’都可以 <view>{{(val / 60) * 10 - 10+20}}</view> // 或者更復雜的算數運算 <view>{{val.split('').reverse().join('')}}</view> // 調用復雜的邏輯 <view>{{function_name('傳值')}}</view> //這是一個方法的調用 ~~~ ## v-bind > v-bind:property 可簡寫為： :property ~~~ <view :id="'nick'+id" :class="{active:true,error:true}">2222</view> <radio value="1" :checked="status == 1" /><text>3333</text> ~~~ ## v-on > v-on:event 可簡寫為： @event ~~~ <template> <view class="content"> <button type="default" @tap="myclick">點擊我</button> </view> </template> <script> export default { data() { return {} }, methods:{ myclick:function(){ console.log('u click me') } } } </script> ~~~ ## 條件語句 ### v-if ~~~ <template> <view class="content"> <view class="title" v-if="name != null">1111</view> <view class="title" v-else-if="name == 'wk123'">2222</view> <view class="title" v-else-if="ok">3333</view> <view class="title" v-else-if="Math.random() > 0.5">4444</view> <view v-else>5555</view> </view> </template> <script> export default { data() { return { name : null, ok : false } } } </script> ~~~ ### v-show ~~~ <view class="title" v-show="ok">這個我的標題</view> ~~~ ## 循環語句 ### 數組循環 ~~~ <template> <view class="content"> <view v-for="(item,index) in items" :key="index"> <view>{{index}} : {{item.name}}</view> </view>  </view> </template> <script> export default { data() { return { items : [ {name:'user1', age:11}, {name:'user2', age:22} ] } } } </script> ~~~ ### 整數循環 ~~~ <view v-for="n in 10">{{n}}</view> ~~~ ## 計算屬性 > 處理復雜邏輯，可以將其封裝成計算屬性方法供其調用 ~~~ <view>{{ message.split('').reverse().join('') }}</view> ~~~ ### 不帶參的計算屬性 ~~~ <template> <view class="content"> <view>原始數據：{{ message}}</view> <view>轉化后的數據：{{ formatMessage }}</view> </view> </template> <script> export default { data() { return { message: 'wk123' } }, computed:{ formatMessage:function(){ if (this.message == 'wk123') { return this.message.split('').reverse().join(''); }else{ return 'Hello '+this.message; } } } } </script> ~~~ ### 帶參的計算屬性 ~~~ <template> <view class="content"> <view v-for="item in items"> {{formatMessage(item.name, 'from china')}} </view> </view> </template> <script> export default { data() { return { items:[ {name:"wk", age:11}, {name:"jj", age:22}, ] } }, computed:{ formatMessage:function(){ // 需要返回一個閉包，否則會報 formatMessage is not a function return function(name, pfrom) { return name +' '+ pfrom; } } } } </script> ~~~ ### computed vs methods > 我們可以使用 methods 來替代 computed，效果上兩個都是一樣的 > 但是 computed 是基于它的依賴緩存，只有相關依賴發生改變時才會重新取值，意味著多次訪問 formatMessage 計算屬性會立即返回之前的計算結果，而不必再次執行函數 > 而使用 methods 多次調用，函數總會重新調用執行。 ~~~ <template> <view class="content"> <view>原始數據：{{message}}</view> <view>轉化后的數據1：{{formatMessage}}</view> <view>轉化后的數據2：{{formatMessage2()}}</view> <button type="default" @tap="changeMessage">修改原始數據，重新渲染</button> </view> </template> <script> export default { data() { return { message: 'wk123' } }, computed:{ formatMessage:function(){ return this.message.split('').reverse().join(''); } }, methods:{ formatMessage2:function(){ return this.message.split('').reverse().join(''); }, changeMessage:function(){ this.message = 'abc123'; } } } </script> ~~~ ## filter過濾器 > Vue.js 允許你自定義過濾器，可被用于一些常見的文本格式化。過濾器可以用在兩個地方：雙花括號插值 ~~~ <template> <view> <view>{{name | formatData1}}</view> <view>{{name | formatData2('2020-09-22', 717)}}</view> </view> </template> <script> export default { data(){ return { name:'wk' } }, filters:{ formatData1(value){ return value + '__66' }, formatData2(value, date, rndNum){ return value + '__' + date + '___' + rndNum } } } </script> ~~~ ## 監聽屬性 > 我們可以通過監聽屬性 watch 來響應數據的變化 ~~~ <template> <view class="content"> 千米：<input type="text" v-model="kilometers"/> 米：<input type="text" v-model="meters" /> 姓名 <input v-model="name" /> </view> </template> <script> export default { data() { return { meters:0, kilometers: 0, name: '' } }, watch:{ meters:function(val){ console.log("meter change:"+val); this.kilometers = val/ 1000; }, kilometers:function(newVal, oldVal){ console.log("kilometers change:"+newVal); this.meters = newVal * 1000 }, // es6 寫法 name(newVal, oldVal){ console.log(`newVal: ${newVal}, oldVal: ${oldVal}`) } } } </script> ~~~ ## 樣式綁定 ``` <template> <view class="content">   <view :class="{active:isActive}">class最終值為：active</view>  <view :class="{active:isActive,'text-danger': hasError}">class最終值為：active text-danger</view>  <view :class="[activeClass, errorClass]">class最終值為：active text-danger</view>  <view :class="[activeClass, hasError ? errorClass : '']">class最終值為：active text-danger</view>   <view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">1111</view>  <view v-bind:style="[baseStyles,{'font-weight': 'bold', 'font-style': fontStyle }]">2222</view> </view> </template> <script> export default { data() { return { isActive : true, hasError: true, activeClass: 'active', errorClass: 'text-danger', fontSize: 30, activeColor: 'green', fontStyle:'italic', baseStyles: { color: 'green', fontSize: '30px', } } } } </script> ``` ## 表單 ### 輸入框 > 實例中 input 和 textarea 元素中使用 v-model 實現雙向數據綁定 ``` <template> <view class="content"> <input type="text" v-model="message" placeholder="編輯我……" /> <textarea v-model="message" placeholder="多行文本輸入……" /> {{message}} </view> </template> <script> export default { data() { return { message : 'wk123' } } } </script> ``` ### 復選框 > 官方文檔：https://uniapp.dcloud.io/component/checkbox ~~~ <template> <view class="content"> <checkbox-group @change="checkboxChange"> <label> <checkbox value="wk"/><text>wk</text> </label> <label> <checkbox value="66" /><text>66</text> </label> </checkbox-group> {{name}} </view> </template> <script> export default { data() { return { name:[] } }, methods:{ checkboxChange(e) { console.log(e.detail.value); // 全部都勾選上的時候，打印為 ["wk","66"] this.name = e.detail.value; } } } </script> ~~~ ### 單選框 > 官方文檔：https://uniapp.dcloud.io/component/radio ~~~ <template> <view class="content"> <radio-group @change="radioChange"> <label> <radio value="1" :checked="status == 1" /><text>選中</text> </label> <label> <radio value="0" :checked="status == 0" /><text>未選中</text> </label> </radio-group> {{status}} </view> </template> <script> export default { data() { return { status:0 } }, methods:{ radioChange(e) { console.log(e.detail.value); // 打印為 0 / 1 this.status = e.detail.value; } } } </script> ~~~ ### 下拉框 (picker) > picker文檔：https://uniapp.dcloud.io/component/picker ~~~ <template> <view> <view class="uni-title">普通選擇器</view> <picker @change="bindPickerChange" :value="index" :range="array" range-key="name" style="margin-bottom: 50rpx;"> <view class="uni-input">{{array[index].name}}</view> </picker> <view class="uni-title">時間選擇器</view> <picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange" style="margin-bottom: 50rpx;"> <view class="uni-input">{{time}}</view> </picker> <view class="uni-title">日期選擇器</view> <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" style="margin-bottom: 50rpx;"> <view class="uni-input">{{date}}</view> </picker> </view> </template> <script> export default { data() { return { array: [{name:'中國'},{name: '美國'}, {name:'巴西'}, {name:'日本'}], index: 0, date: '2020-07-18', startDate:'2020-07-17', endDate:'2021-01-01', time: '12:01' } }, methods: { bindPickerChange: function(e) { console.log('picker發送選擇改變，攜帶值為：' + e.detail.value) this.index = e.detail.value }, bindDateChange: function(e) { console.log('picker發送選擇改變，攜帶值為：' + e.detail.value) this.date = e.detail.value }, bindTimeChange: function(e) { console.log('picker發送選擇改變，攜帶值為：' + e.detail.value) this.time = e.detail.value } } } </script> ~~~ ## slot 插槽 > 主要用于組建封裝過程中的插槽應用 > 參考文檔：https://cn.vuejs.org/v2/guide/components-slots.html ### 組建里只有1個插槽 #### hello 組建（1個插槽） ~~~ <template> <view style="background-color: red;width: 100%;height: 90rpx;color: #FFF;"> <slot></slot> </view> </template> ~~~ #### 客戶端調用 ~~~ <template> <view> <hello> <view style="color: blue;">aaaa</view> <view style="color: green;">bbb</view> </hello> </view> </template> <script> import hello from '../../components/hello.vue' export default { components:{ hello } } </script> ~~~ ### 組建里有多個插槽 #### hello 組建（多個插槽） > 需要用到 “具名插槽”，就是給插槽設置具體的名稱 ~~~ <template> <view> <view class="block1"> <slot name="header"></slot> </view> <view class="block2"> <slot></slot> </view> <view class="block3"> <slot name="footer"></slot> </view> </view> </template> <style> .block1,.block2,.block3{width: 100%;height: 90rpx;color: #FFF;margin-bottom: 20rpx;} .block1{background-color: red;} .block2{background-color: black;} .block3{background-color: green;} </style> ~~~ #### 客戶端調用 ~~~ <template> <view> <hello> <template v-slot:header> <view>header...</view> <view>nav items...</view> </template> <view class="content"> this is content1 for default slot </view> <view class="content"> this is content2 for default slot </view>  <view slot="footer"> footer... </view> </hello> </view> </template> <script> import hello from '../../components/hello.vue' export default { components:{ hello } } </script> ~~~ ### 解構插槽 Prop > 將子組建里的數據，傳遞到父組建的插槽中使用 #### 組建定義 ~~~ <template> <view> <view class="block1"> <slot :user="user" :money="money"></slot> </view> </view> </template> <script> export default{ data(){ return { user:{name:'jack', sex:'male'}, money:12.5 } } } </script> ~~~ #### 客戶端調用 ~~~ <template> <view> <hello>  <template v-slot="{user, money}"> <view>{{user.name}}, dollar:{{money}}...</view> <view>nav items...</view> </template> </hello> </view> </template> <script> import hello from '../../components/hello.vue' export default { components:{ hello } } </script> ~~~ ## $set 動態響應視圖 > 當給對象新增屬性，在控制臺能打印出來，但是卻沒有更新到視圖上時，這個時候需要用到this.$set（）這個方法來動態響應視圖 > 語法：`Vue.set( target, propertyName/index, value )`， > 官方文檔：https://cn.vuejs.org/v2/api/#Vue-set ~~~ <template> <view> <view v-for="(item,index) in list" :key="index"> index:{{index}},{{item.name}} </view> <view>---------------------</view> <view> {{person.name}}, {{person.age}} </view> <button type="default" @click="addProp">新增屬性</button> </view> </template> <script> export default { data() { return { list: [ {name:'xxx1'}, {name:'xxx2'}, {name:'xxx3'} ], person: { name:'wk' } } }, methods: { addProp() { // 直接新增屬性，console里可以看到數據變化，但是視圖不會響應變化 /* this.list[3] = {name:'xxccc'} this.person.age = 11 console.log(this.list) console.log(this.person) */ // 使用$set ，視圖響應變化 this.$set(this.list, 3, {name:'xxccc'}) this.$set(this.person, 'age', 11) console.log(this.list) console.log(this.person) } } } </script> ~~~