個人自學前端24-Vue1-插值表示式，Vue例項，Vue指令，API
Vue基礎
Vue和React => 檢視框架 => 不通過DOM操作更新頁面(檢視)
渲染檢視
1:DOM操作
2:資料驅動(沒有DOM操作) => 給標籤繫結資料,要修改標籤,直接修改與之繫結的資料即可.(沒有DOM操作).
一. 插值表示式
插值表示式是vue框架提供的一種在html模板中繫結資料的方式，使用{{變數名}}方式繫結Vue例項中data中的資料變數。會將繫結的資料實時的顯示出來。
{{插值表示式}} => 可以寫任意的js表示式
插值表示式內的資料或者方法都應該vm例項的屬性或者方法.
alert不是Vm例項的方法,因此會報錯.
二. Vue例項
// vm就是一個Vue例項 let vm = new Vue({ // 確定檢視範圍.app內部所有的後代元素都可以繫結資料 // el的值是選擇器.如果選擇器匹配多個元素,則只有第一個生效. // 不能設定body和html這樣的特殊標籤作為檢視. el: '#app', // data內的資料都會變成Vue例項的屬性. data: { msg: '冪冪', str: '你好嗎' }, // vm例項的方法都寫在methods中. methods: { alert() { window.alert(10000); return 'alert' } } });
render選項 => 代替template選項
render選項也是為了確定元件檢視.
template => 字串檢視 => 優點是直觀.缺點是需要編譯.
render => 跳過編譯字串template,直接生成虛擬節點 => 優點是效能好,不用編譯,確定是模板不直觀
const App = { // template: ` // <div id='app'> // <h3>App元件</h3> // </div> // `, // 直接通過render函式生成虛擬節點. // createElement(標籤名, 屬性列表, 子節點列表) // createElement(元件配置項) render(createElement) { return createElement('div', { attrs: { id: 'app' } }, [ createElement('h3', null, 'App元件') ]); } } new Vue({ // el: '#app', // template: '<App />', // render(h) { // return h(App) // }, render: h => h(App), }).$mount('#app');
三. Vue指令
1.v-vind
v-bind:屬性名 => 指令 => 讓標籤的屬性繫結一個Vue資料
v-bind:的簡寫是:(冒號)
指令的值可以是任意表達式.意即把表示式的返回值繫結到指定是屬性上.
v-bind繫結class有特殊寫法:
1:指令值繫結陣列.
2:指令值繫結物件.
如果class綁定了多個類.則如何新增一個類,刪除一個類?
不能用以下的方法實現了。
classList.add,
classList.remove.
假設繫結的是cn,則應該通過修改cn來新增或者刪除類.
<body>
<div id='app'>
<h3 :class='cn'>{{msg}}</h3>
<h3 :class='cnList'>{{msg}}</h3>
<h3 :class="['box', 'active', 'nav']">{{msg}}</h3>
<h3 :class="obj">{{msg}}</h3>
<h3 :class="{'box': true,'active': true,'nav': false}">{{msg}}</h3>
<h3 :class="{'box': true,'active': cnList.length === 3,'nav': false}">{{msg}}</h3>
</div>
<script src="js/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 'Vue！！！',
cn: 'box active nav',
cnList: ['box', 'active', 'nav'],
obj: {
'box': true,
'active': true,
'nav': false
}
}
})
</script>
</body>
繫結style屬性,還可以寫成物件的形式.
<body>
<div id='app'>
<div :style='sty'>999999</div>
<div :style='obj'>999999</div>
<div :style='{width: "100px", heigth: "100px", backgroundColor: "red"}'>999999</div>
<div :style='{width: "100px", height: "100px", backgroundColor: color}'>999999</div>
</div>
<script src="js/vue.js"></script>
<script>
// 繫結style屬性,還可以寫成物件的形式.
let vm = new Vue({
el: '#app',
data: {
color: 'red',
sty:'width: 100px; height: 100px; background-color: red',
obj: {
width: '100px',
height: '200px',
backgroundColor: 'red',
}
}
})
</script>
</body>
2.v-on
v-on:事件名 => 指令 => 用來給元素新增事件
v-on的簡寫 => @
v-on事件傳參,直接在指令後寫函式呼叫.
v-on使用事件物件.
1:沒引數 => 直接通過形參獲取.
2:有引數 => 需要手動傳入$event
事件控制代碼內的this預設永遠指向當前的vm例項.
- @click.stop => 修飾符.阻止冒泡
- @click.prevent => 修飾符.阻止預設事件
- @click.prevent.stop => 修飾符.阻止預設事件和冒泡
3.v-if
v-if => 條件渲染 => 顯示隱藏 => 指令值是布林值. true表示顯示,false表示隱藏
v-if 和 v-show功能一致.(區別要學到虛擬節點)
v-show 其實是通過display樣式來控制顯示隱藏的。
v-if 和 v-else-if 和 v-else 指令可以配合使用.
<body>
<div id='app'>
<button @click='fn'>按鈕</button>
<div v-if='flag'>111111111111111</div>
<div v-show='flag'>111111111111111</div>
<h3 v-if='1>2'>111</h3>
<h3 v-else-if='1<2'>222</h3>
<h3 v-else>333</h3>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
flag: true,
},
methods: {
fn() {
this.flag = !this.flag
}
}
})
</script>
</body>
4.v-for
列表渲染
記得v-for都要加key.
資料的更新和檢視的更新保持一致.(例如位置).需要加key
還得保證更新前後的key是不一樣的。
<body>
<div id='app'>
<ul v-for='val in list'>
<li v-for='item in val'>{{item}}</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
// 子v-for可以獲取父v-for的臨時變數。
// 兄弟元素無法共享v-for的臨時變數.
new Vue({
el: "#app",
data: {
list: {
arr1: [444, 555, 666],
arr2: [111, 222, 333]
}
}
});
</script>
</body>
特殊
<div id='app'>
// 顯示1，2，3
<ul>
<li v-for='item in 3'>{{item}}</li>
</ul>
// 顯示a,b,c,d
<ul>
<li v-for='item in "abcd"'>{{item}}</li>
</ul>
</div>
5.運算元組
<body>
<div id='app'>
<ul>
<button @click='fn'>按鈕</button>
<li v-for='(item, i) in arr'>
{{item}}
</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
// 用框架經常遇到的問題: 資料變了檢視不變.
new Vue({
el: '#app',
data: {
arr: [111,222,{name: '冪冪'}]
},
methods: {
fn() {
// 直接修改陣列元素,如果這個元素是基本型別.則檢視是不會改變的.
// this.arr[0] = Math.random();
// 修改應用型別,可以驅動檢視更新
// this.arr[2].name = '超越';
// 直接修改第三個陣列的元素變成一個新的物件,檢視不會改變.
// this.arr[2] = {name: '超越'};
// 直接修改length檢視也不會改變.
// this.arr.length = 0;
// push,pop,shift,unshift,splice,sort,reverse => 這7個方法修改陣列可以驅動檢視更新
this.arr.splice(0,1,Math.random());
// console.log(this.arr);
}
}
})
</script>
</body>
6.v-model
v-model => 只用在表單元素上 => 用於實現雙向繫結.
雙向: 資料變,檢視變,檢視變,資料也變.
v-model實際上是下面兩個操作的語法糖.
- :value='msg' => 資料變,檢視也跟著變
- @input='setMsg' => 檢視變,資料也跟著變.
<input type="text" :value='msg' @change='setMsg'>
- v-model.lazy => change事件觸發時才會修改vue資料.(輸入完成之後,再修改vue資料msg)
6.1 複選框
<body>
<div id='app'>
<h3>選擇你喜歡的水果</h3>
<hr>
<input type="checkbox" value='蘋果' v-model='favo'>蘋果
<input type="checkbox" value='香蕉' v-model='favo'>香蕉
<input type="checkbox" value='雪梨' v-model='favo'>雪梨
<hr>
你喜歡的水果:{{favo.join()}}
</div>
<script src="js/vue.js"></script>
<script>
// 繫結陣列後,複選框如果是打鉤的,則它的value會自動放入繫結的陣列.
// 繫結陣列後,複選框如果是不打鉤的,則它的value會自動從陣列內刪除.
new Vue({
el: '#app',
data: {
favo: ['香蕉', '雪梨']
}
})
</script>
</body>
<body>
<div id='app'>
<input type="checkbox" v-model='flag'>切換
<div v-if='flag'>111111111111111</div>
</div>
<script src="js/vue.js"></script>
<script>
// 如果複選框繫結的是一個布林值.則複選框打鉤,這個布林值會自動變成true,不打鉤則會預設變成false
new Vue({
el: '#app',
data: {
flag: false,
}
})
</script>
</body>
6.2單選框
<body>
<div id='app'>
<h3>選擇你的性別</h3>
<hr>
<input type="radio" value='男' v-model='sex'>男
<input type="radio" value='女' v-model='sex'>女
<hr>
你的性別是:{{sex}}
</div>
<script src="js/vue.js"></script>
<script>
// 多個單選框繫結同一個資料,則這些單選框就只有一個是可以打鉤的.(name的作用)
// 打鉤的選項卡,它的value就會變成當前繫結資料的值.
new Vue({
el: '#app',
data: {
sex: '女'
}
})
</script>
</body>
6.3下拉框和文字域
<body>
<div id='app'>
請選擇你的出生年份:
<select v-model='year'>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
</select>
<div>你的出生年份是:{{year}}</div>
<textarea v-model='msg' cols="30" rows="10"></textarea>
<div>{{msg}}</div>
</div>
<script src="js/vue.js"></script>
<script>
// v-model應該用在select標籤上
// 選中的option的內容會自動變成繫結的資料值
new Vue({
el: '#app',
data: {
year: '1999',
msg: 111
}
})
</script>
</body>
7.v-once
v-once => 檢視只更新一次,後續繫結的資料變化,不會更新當前的檢視
v-once沒有指令的值.
8.v-html，v-text
v-html => 可以用於實現插入一個標籤. => 它有安全問題.容易手動xss攻擊.=> 必須保證內容是安全的
xss => 腳步注入攻擊.
v-text => 根插值表示式的功能一模一樣
9.v-pre，v-cloak
v-pre => 讓插值表示式不會求值
v-cloak => 為了cdn引入Vue的使用者準備的.
四. API
1. $forceUpdate()
強制更新當前元件.(應急性api,不推薦濫用).
2. $children，$parent
$parent => 當前元件的父元件.(應急性api)
$children[0] => 當前父元件的子元件.(是一個數組)(應急api)
3. $refs
refs => 用來獲取檢視標籤的。
如果給元件添加了ref,則可以通過這個ref獲取到指定的元件.
$refs屬性只能在mounted中獲取.
五. 其他
1. v-if和v-show的區別
v-if => 根據初始條件決定是否把對應的標籤編譯到虛擬節點中.
v-show => 不管初始條件是什麼,都編譯標籤到虛擬節點中,渲染時,根據初始條件決定樣式display的值.
對於多次顯示隱藏的標籤,應該用v-show.
對於只有一次顯示隱藏的情況,就應該用v-if.
2. v-for和v-if的優先順序
v-for優先順序更高 => 不管有沒有虛擬節點,都會迴圈 => 效能不好.不推薦v-for和v-if一起使用.
可以通過計算屬性來過濾原始陣列,只留下應該渲染的元素.
<body>
<div id='app'>
<ul>
<li v-for='d in arr' v-if='d%2 === 0'>{{d}}</li>
</ul>
<ul>
<li v-for='d in arr.filter(item => item%2 === 0)'>{{d}}</li>
</ul>
<ul>
<li v-for='d in list'>{{d}}</li>
</ul>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
arr: [111, 222, 333, 444]
},
computed: {
list() {
return this.arr.filter(item => item%2 === 0)
}
}
})
</script>
</body>