本章節講解一下uniapp開發的基本元件
一、視圖容器之一view
<template>
<div>
<h2>詳情頁</h2>
<view>我是一個大盒子</view>
</div>
</template>
<script>
export default{
}
</script>
<style scoped>
</style>
<view>元件就相當于我們html容器中的<div>
view中有哪些屬性:
二、template标簽
Vue模闆的主要特點
- 使用XML文法
- 使用{{}}插入表達式，隻能包含單個表達式
- 使用v-html v-on v-bind 等指令操作DOM
- 使用v-if v-for等指令實作條件判斷和循環
模闆template三種寫法
一、Vue完整版，寫在HTML裡
// html檔案
<div id=xxx>
{{n}}
<button @click="add">+1</button>
</div>
二、Vue完整版，寫在選項裡
<div id="app"></div>
new Vue({
template: `
<div>
{{n}}
<button @click="add">+1</button>
</div>`,
data:{n:0}, // data
methods:{add(){ this.n += 1 }}
}).$mount('#app')
注意：div#app 會被取代
三、Vue非完整版，配合xxx.vue檔案
// xxx.vue
<template>
<div>
{{n}}
<button @click="add">+1</button>
</div>
</template>
<script>
export default {
data(){ return {n:0} }, // data 必須為函數
methods:{add(){ this.n += 1 }}
}
</script>
<style>這裡寫 CSS </style>
// js檔案
import Xxx from './xxx.vue'
new Vue({
render: h => h(Xxx)
}).$mount('#app')
注意：這裡的template裡面的不是html文法，而是xml文法
html和xml的兩個差別：
- html：<input name="username">| <input name="username" />兩種寫法都可以，xml 隻能寫 <input name="username" />
- html寫空的标簽：<div></div>，xml <div></div>、<div />兩種都可以
展示内容
1、v-text——表達式
{{object.a}} 表達式
{{ n+1 }} 可以寫任何運算
{{ fn(n) }} 可以調用函數
如果值為undefined 或 null 就不顯示
另一種寫法是 <div v-text="表達式"></div> 很少用 2、v-html——HTML内容
假設 data.x 值為 <strong>hi</strong>
<div v-html="x"></div> 就可以顯示粗體的hi 使用v-html動态渲染的任意 HTML 可能會非常危險，因為它很容易導緻XSS 攻擊。隻對可信内容使用 HTML 插值，絕不要對使用者提供的内容使用插值。
3、v-pre——展示 {{ n }} ，兩對花括号都展示出來
<div v-pre>{{ n }}</div>
// v-pre 不會對模闆進行編譯 綁定屬性
v-bind
// 綁定src
<img v-bind:src="x" />
// 簡寫成
<img :src="x" />
// 綁定對象
<div :style="{width: 100}"></div>
// 注意這裡100預設是100px，不寫px也可以，如果是em，就需要寫上'100em' 綁定事件
v-on
<button v-on:click="add">+1</button>
// 點選之後，Vue會運作 add()
<button v-on:click="xxx(1)">xxx</button>
// 點選之後，Vue會運作 xxx(1)
<button v-on:click="n+=1">xxx</button>
// 點選之後，Vue會運作 n+=1 縮寫：<button @click="n+=1">xxx</button>，正常人都用縮寫
條件判斷
v-if、v-else-if、v-else
<div v-if="x > 0"> x 大于 0 </div>
<div v-else-if="x === 0"> x 等于 0 </div>
<div v-else="x < 0"> x 小于 0 </div> 循環
for(value, key) in 對象或數組
// 數組
<ul>
<li v-for="(u, index) in users" :key="index">
索引： {{index}} 值：{{u.name}}
</li>
</ul>
// 對象
<ul>
<li v-for="(value, name) in obj" :key="name">
屬性名： {{name}} 屬性值：{{value}}
</li>
</ul> :key="index"有bug，後面補充
顯示、隐藏
v-show
<div v-show="n % 2 === 0">n是偶數</div> 近似等于
<div :style="{display:n%2===0?'block':'none'}"> n是偶數 </div> 看得見的元素display不隻有block，如table 的 display 為table，li 的 display 為list-item
v-once——優化更新性能
隻渲染元素群組件一次。随後的重新渲染，元素/元件及其所有的子節點将被視為靜态内容并跳過。不能濫用v-once，隻有在一個元件包含大量靜态内容的情況下考慮使用
v-cloak
這個指令保持在元素上直到關聯執行個體結束編譯。和 CSS 規則一起用時，這個指令可以隐藏未編譯的 Mustache 标簽直到執行個體準備完畢。
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div> 不會顯示，直到編譯結束。
修飾符
@click.stop="x" 表示阻止事件傳播/冒泡
@click.prevent="x" 表示阻止預設動作
@click.stop.prevent="x" 同時表示兩種意思
其他：
1、v-on：
.{keycode|keyAlias }
.stop
.prevent
.capture .self .once .passive .native
快捷鍵：.ctrl .alt .shift .meta .exact
滑鼠：.left .right .middle
2、v-bind：
.prop
.camel
.sync
3、v-model：
.lazy
.number
.trim
加粗的重點學習
.sync
當需要對一個 prop 進行“雙向綁定”的時候，如下示例
// App.vue
<template>
<div class="app">
App.vue 我現在有 {{total}}
<hr>
<Child :money="total" v-on:update:money="total = $event"/> // 監聽并更新money
</div>
</template>
<script>
import Child from "./Child.vue";
export default {
data() {
return { total: 10000 };
},
components: { Child: Child }
};
</script>
<style>
</style>
// Child.vue
<template>
<div class="child">
{{money}}
<button @click="$emit('update:money', money-100)"> // 對父元件的money賦新值
<span>花錢</span>
</button>
</div>
</template>
<script>
export default {
props: ["money"]
};
</script>
<style>
</style> 代碼中 <Child :money="total" v-on:update:money="total = $event"/>
可以簡寫成 <Child :money.sync="total">
注意：v-bind帶有.sync修飾符時，不能和表達式一起使用
上面代碼中的Vue規則：
- 元件不能修改prop外部資料
- $emit可以觸發事件，并傳參
- $event可以擷取$emit的參數
- 使用update:xxx的模式
![Android EditText 設定隻能輸入數字和小數點[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)