DAY66-前端入門-javascript（十二） vue02
阿新 • • 發佈：2018-10-29
選中 log 條件 p2p bin true day6 eth spl
一.文本操作指令
采用文本指令後，頁面標簽的內容由vue實例來控制。
1.v-text
<!-- 原文本會被msg替換 -->
<p v-text=‘msg‘></p>2.v-html
<!-- 可以解析帶html標簽的文本信息 -->
<p v-html=‘msg‘></p>3.v-once
<!-- v-once只能被賦值一次 -->
<p v-once>{{ msg }}</p>4.v-model
<!-- v_model vue進行數據雙向綁定的指令 --> <input type="text" v-model=‘msg‘name=""> <p v-text=‘msg‘></p>
5.v-cloak
- 解決頁面閃爍
<!-- 方式一 --> <style> [v-cloak]{ display: none; } </style> <body> <div id="app" v-cloak> {{ msg }} </div> </body> <script src="js/vue-2.5.17.js"></script> <script> new Vue({ el:‘#app‘, data:{ msg:‘message‘ } }) </script> <!-- 方式二 --> <head> <script src="js/vue-2.5.17.js"></script> </head> <body> <div id="app"> {{ msg }} </div> </body> <script> new Vue({ el:‘#app‘, data:{ msg:‘message‘ } }) </script>
二.關鍵指令
1.v-bind
<!-- 該指令綁定的是HTML標簽的全局屬性，綁定獲得屬性值可以由變量決定 --> <!-- 自定義全局屬性abc的屬性值是變量abc --> <p v-bind:abc=‘abc‘ ></p> <!-- 操作單一變量 --> <p v-bind:title=‘t1‘>p1p1p1p1p1p1p1</p> <!-- 操作普通字符串 --> <p v-bind:title=‘"t2"‘>p2p2p2p2p2p2p2</p> <!-- 操作類名 --> <!-- 操作單一類名 --> <p v-bind:class=‘t3‘>p3p3p3p3p3p3p3</p> <!-- 操作多個類名[] --> <p v-bind:class=‘[t4,tt4]‘>p4p4p4p4p4p4p4</p> <!-- 操作類名的顯隱 --> <!-- {}語法：{key:value} --> <!-- key:實際類名 value(類名的顯隱)： true | false --> <p v-bind:class=‘{abc:t5}‘ v-on:click=‘fn‘>p5p5p5p5p5p5p5</p> <!-- []、{} 的結合使用 --> <p v-bind:class=‘[{p6:t6},{pp6:tt6}]‘>p6p6p6p6p6p6p6</p> <!-- v-bind: 簡寫成 : --> <!-- 操作Style --> <div :style=‘div_style‘></div> <!-- 以上操作相對應的vue --> <script> new Vue({ el:‘#app‘, data:{ abc:‘ABC‘, t1:‘p1~title‘, t3:‘p pp‘, t4:‘p‘, tt4:‘pp‘, t5:true, t6:true, tt6:true, div_style:{ backgroundColor:‘cyan‘, width:‘200px‘, height:‘200px‘ } }, methods:{ fn(){ this.t5 = !this.t5 } } }) </script>
2.v-on指令
1.簡寫 v-on:click <=> @click
2.默認綁定 @click="fn" => 回調方法可以獲取ev
3.帶參綁定 @click="fn(10)" => 回調參數只能獲取自定義參數10
4.帶參綁定 @click="fn(10, $event)" => 回調參數可以獲取自定義參數10即事件參數ev<div id="app">
<p @click="fn1"></p>
<p @click="fn2"></p>
<p @click="fn3(10)"></p>
<p @click="fn4($event, 10, 20)"></p>
<p @click="fn5(10, $event, 20)"></p>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
methods: {
fn1: function () {
console.log("click event");
},
fn2 (ev) {
console.log(ev);
},
fn3 (num) {
console.log(num);
},
fn4 (ev, n1, n2) {
console.log(ev);
console.log(n1);
console.log(n2);
},
fn5 (n1, ev, n2) {
console.log(ev);
}
}
})
</script>3.v-model指令
- 操作的是表單元素的value值
<!-- 數據的雙向綁定 -->
<!-- 兩個輸入框綁定的是同一個val,那麽其中一個input的內容改變會直接映射到另一個input上。-->
<!-- v-model綁定的是value,可以省略 -->
<input type="text" v-model="val1" name="usr">
<textarea v-model="val1"></textarea>
<p v-text="val1"></p>
<!-- 單一復選框 -->
<!-- val2值為true|false的變量,控制單選框是否被選中 -->
<input type="checkbox" v-model="val2" name="ck1">
<!-- val3值為自定義"選中"|"未選中",控制單選框是否被選中 -->
<!-- 選中狀態,提交給後臺可以對應的value為on,為選中狀態,不向後臺提交value值 -->
<input type="checkbox" v-model=‘val3‘ true-value="選中" false-value="未選中" name="ck2" /><!-- 多復選框 -->
<!-- 多個復選框的v-model綁定一個變量 -->
<!-- 該變量為數組數據,存放的是復選框的value值(value值必須明確) -->
<!-- 出現在數組中的value值對應的復選框默認為選中狀態 -->
<!-- 提交給後臺數據: ck=ppqiu&ck=zqiu -->
籃球<input type="checkbox" value="lqiu" v-model="val" name="ck">
足球<input type="checkbox" value="zqiu" v-model="val" name="ck">
乒乓球<input type="checkbox" value="ppqiu" v-model="val" name="ck"><!-- 多單選框 -->
<!-- 多個單選框的v-model綁定一個變量 -->
<!-- 變量值為多個單選框中一個的value值,則該單選框為默認選中狀態 那麽該單選框默認選中 eg: val: famale => 女單選框默認選中-->
<!-- 提交給後臺數據: sex=famale-->
男:<input type="radio" value="male" v-model="val" name="sex">
女:<input type="radio" value="famale" v-model="val" name="sex">三.條件渲染指令
- v-show
<div v-show="isShow"></div>
<!-- 變量isShow值為true(顯示,display: block)|false(隱藏,display: none) ->- v-if
<div v-if="isShow"></div>
<!-- 變量isShow值為true(顯示,渲染到頁面)|false(隱藏,不渲染到頁面) -->- v-if v-else-if v-else
<div v-if="tag == 0" key="0"></div>
<div v-else-if="tag == 1" key="1"></div>
<div v-else="tag == 2" key="2"></div>
<!-- v-else邏輯可言省略 -->
<!-- 變量tag取值在0~2之間,可以決定具體渲染那個div -->
<!-- 通過key全局屬性操作後,渲染過的分支會建立key對應的緩存,提高下一次渲染速度 -->四.列表渲染指令
- v-for 遍歷數組[]
<ul>
<li v-for="(n, i) in list" :key="i">value:{{ n }} | index: {{ i }}</li>
</ul>
<!-- list為提供的數組數據 -->
<!-- n為遍歷的數組元素值,i為遍歷的元素索引 -->
<!-- 一般列表渲染需要建立緩存 -->
<!-- key是為遍歷建立緩存,采用變量賦值,所以通過v-bind:指令操作 -->
<script>
new Vue({
el: "#app",
data: {
list: [1, 2, 3, 4, 5],
}
})
</script>- v-for變量對象{}
<ul>
<li v-for="(v, k, i) in dic" :key="k">value:{{ v }} | key:{{ k }} | index: {{ i }}</li>
</ul>
<!-- dic為提供的對象(字典)數據 -->
<!-- v為遍歷的對象值,k為對象值的鍵,i為對象值的索引 -->
<!-- key是為遍歷建立緩存,采用變量賦值,所以通過v-bind:指令操作 -->
<script>
new Vue({
el: "#app",
data: {
dic: {
name: ‘張三‘,
age: 18,
gender: ‘男‘
}
}
})
</script>- 遍歷的嵌套
<div v-for="(person, index) in persons" :key="index" style="height: 21px;">
<div v-for="(v, k) in person" :key="k" style="float: left;">{{ k }} : {{ v }} </div>
</div>
<script>
new Vue({
el: "#app",
data: {
persons: [
{name: "zero", age: 8},
{name: "egon", age: 78},
{name: "liuXX", age: 77},
{name: "yXX", age: 38}
]
}
})
</script>今日所學實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<input type="text" v-model=‘val‘>
<button type="button" @click=‘submitMsg‘>提交</button>
</div>
<ul>
<li v-for=‘(v,i) in list‘ :key=‘i‘ @click=‘removeMsg(i)‘>{{v}}</li>
</ul>
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script>
new Vue({
el:‘#app‘,
data:{
val:‘‘,
list:[]
},
methods:{
submitMsg(){
// 往list中添加input框中的value
if (this.val){
this.list.push(this.val);
this.val = ‘‘
}
},
removeMsg(index){
this.list.splice(index,1)
}
}
})
</script>
</html>DAY66-前端入門-javascript（十二） vue02