一、模板語法的插值操作(其他不常用指令)
-
v-html 往標簽內部插入html文本
-
v-text 往標簽內部插入普通文本(決議不了標簽)
-
v-pre 在界面上直接展示胡子語法
-
v-cloak 隱藏資料渲染到頁面之前，胡子語法在界面上的展示
<div id="app">
<!-- <p>{{str1}}</p> -->
<!-- v-html 讓瀏覽器認識str1中的html標簽 -->
<!-- <p v-html="str1"></p> -->
<!-- <p v-text="str1"></p> -->
<!-- v-pre 讓胡子語法不做決議 直接做{{}}這種格式 -->
<!-- <p v-pre>{{str1}}就是胡子語法的格式</p> -->
<!-- 由于網路延遲,最開始可能會讓用戶看到胡子語法的格式,但是我們不希望用戶看到
做法: 把胡子語法給隱藏起來 -->
<p v-cloak>{{str1}}</p>
</div>
<script>
setTimeout(function() {
new Vue({
el:"#app",
data:{
str1:"<span>這是span標簽</span>"
}
})
}, 1500)
</script>
二、v-for中的key屬性
<div id="app">
<button @click="add">按鈕</button>
<ul>
<!-- :key 的值就是瀏覽器判斷是否需要進行DOM的更新的依據，
如果這個依據在在操作前后沒有發生變化， 瀏覽器不會進行DOM更新
如果某些元素的這個依據發生改變，瀏覽器就會對其進行DOM更新
:key的作用： 減少了不必要的DOM操作，提高了更新效率
-->
<li v-for="i,key in list" :key="i.id">{{i.name}}</li>
</ul>
</div>
<script>
new Vue({
el:"#app",
data:{
list:[
{id:1,name:'html'},
{id:2,name:'css'},
{id:3,name:'javascript'},
{id:4,name:'JQuery'},
],
},
methods:{
add(){
this.list.unshift({id:5,name:'Vue'});
}
}
})
</script>
官方推薦我們使用v-for時，給對應的元素或組件添加一個key屬性，
為什么需要這個key屬性呢（了解）
? 1、這個其實和Vue的虛擬DOM的Diff演算法有關系，
當某一層有很多相同節點時，也就是串列節點時，我們插入一個新的節點到串列中
? 2、在B和C之間加一個F，Diff演算法默認執行起來時這樣的；即把C更新成F，D更新成C，E更新成D，最后再插入一個新的E，這樣的效率也太低了，
當我們使用key來為每一個節點做唯一標識：Diff演算法會以key作為標識來識別此節點，找到正確的位置區插入新的節點，所以key的作用是為了高效的更新虛擬DOM
這里需要注意:
1、key屬性是判斷需不需要更新DOM節點的依據，這個key的值的內容變了，則需要更新DOM(洗掉后重建DOM)，內容沒變則不需要操作到DOM節點
2、key的作用是為了高效的更新虛擬DOM
三、reduce方法的使用
利用reduce方法遍歷陣列的每一個元素，reduce()呼叫結果最后回傳一個最終值（最后一次return值），
var arr = [
{name: 'Vuejs入門', price: 99, count: 3},
{name: 'Vuejs底層', price: 89, count: 1},
{name: 'Vuejs從入門到放棄', price: 19, count: 5},
]
//陣列名.reduce(回呼函式，pre的初始值)
arr.reduce(function(pre, current){
// reduce這個方法被呼叫時，會遍歷arr這個陣列的每一個元素，每遍歷一個元素，就執行一次這里的代碼
// current表示當前正在遍歷的這個元素
// pre 是上一次的這個函式return的值
// 因為第一次遍歷沒有上一個return值，所以，交給了第二個引數，設定pre的初始值
console.log(pre, current)
return 10
},0)
//！！！并且reduce方法最侄訓回傳最后一次的return值
上面代碼的輸出結果：
0 {name: "Vuejs入門", price: 99, count: 3}
10 {name: "Vuejs底層", price: 89, count: 1}
10 {name: "Vuejs從入門到放棄", price: 19, count: 5}
理解了上面的案例之后，就可以提一個需求：計算上面購物車的總價（每一個 price*count 的和），
var arr = [
{name: 'Vuejs入門', price: 99, count: 3},
{name: 'Vuejs底層', price: 89, count: 1},
{name: 'Vuejs從入門到放棄', price: 19, count: 5},
]
let total = arr.reduce(function(pre, current) {
// 每一次回傳 上一次的價格+(這次的單價*這次的數量)
return pre + current.price * current.count
}, 0)
console.log(total);
備注：上面這個reduce()方法和Vue本身沒有關系，純粹是一個js陣列的方法，
四、(重點)Vue的計算屬性computed 的使用
<div id="app">
總價為: {{total}}
</div>
<script>
new Vue({
el:"#app",
data:{
arr:[
{name: 'Vuejs入門', price: 99, count: 3},
{name: 'Vuejs底層', price: 89, count: 1},
{name: 'Vuejs從入門到放棄', price: 19, count: 5},
],
},
computed:{
// total是屬性名,是我們自己寫的名字
// 計算屬性的函式中需要有回傳值,在頁面中{{total}}就是這個回傳值
total(){
let ret = this.arr.reduce(function(pre, current){
return pre + current.price * current.count
},0)
return ret
}
}
})
</script>
五、(重點)computed內部方法有快取的作用
以下代碼total呼叫了三遍，卻只執行了1遍，這是computed內部方法的快取起了作用
<div id="app">
{{total}}
{{total}}
{{total}}
{{getTotal()}}
{{getTotal()}}
{{getTotal()}}
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
arr: [
{name: 'Vuejs入門', price: 99, count: 3},
{name: 'Vuejs底層', price: 89, count: 1},
{name: 'Vuejs從入門到放棄', price: 19, count: 5},
]
},
methods:{
getTotal(){
console.log("getTotal")
var a = this.arr.reduce(function(pre, current){
// var total = 當前這次的 price*count + 上一次的total
var total = current.price*current.count + pre
return total
},0)
return a
}
},
computed:{
//computed里面的方法必須有回傳值！這個return值將來在視圖中被{{total}}參考
total(){
console.log("total")
var a = this.arr.reduce(function(pre, current){
// var total = 當前這次的 price*count + 上一次的total
var total = current.price*current.count + pre
return total
},0)
return a
}
}
})
</script>
六、computed內部方法的另一種寫法(get和 set)
....
computed:{
//computed里面的方法必須有回傳值！這個return值將來在視圖中被{{total}}參考
total:{
get(){
console.log("total_get")
var a = this.arr.reduce(function(pre, current){
// var total = 當前這次的 price*count + 上一次的total
var total = current.price*current.count + pre
return total
},0)
return a
},
set(){
console.log("total_set")
},
}
}
...
vm.total = 100 //觸發呼叫set方法
七、v-model的原理
v-model 本質上包含了兩個操作：
v-bind系結input元素的value屬性v-on指令系結input元素的input事件
即：:value=“txtVal” 和 @input=“handleInput”
<div id='app'>
<!-- <input type="text" v-model="txtVal" /> -->
<!-- @input是一個事件,表示這個input元素的值發生改變的時候
v-model的原理: 由:value標簽屬性和@input事件配合完成
:value屬性 值就是 默認值的屬性值
-->
<input type="text" :value="txtVal" @input="changeVal" />
<p>{{txtVal}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
txtVal: "默認值"
},
methods:{
changeVal(e) {
// console.log(e.target.value);
// 修改txtVal的值
// this.txtVal = 用戶輸入的內容
this.txtVal = e.target.value
}
}
})
</script>
即：
<input type="text" v-model="textVal"/>
<!-- 等同于 -->
<input type="text" v-bind:value="textVal" v-on:input="textVal = $event.target.value"/>
八、(重點)陣列常用的操作(方法)
8.1、常用方法使用
push pop unshift shift splice concat
var arr = [1, 2, 3]
let length = arr.push(4); // 給最后面添加元素,回傳陣列長度
let length = arr.unshift(5); // 給最前面添加元素,回傳陣列長度
let last = arr.pop(); // 洗掉最后一個元素, 回傳被洗掉的元素
let first = arr.shift() // 洗掉第一個元素, 回傳被洗掉的元素
// let ret = arr.splice(要操作的元素的下標, 要洗掉的個數, 要增加的元素)
let ret = arr.splice(2,1 ,7,8,9 ) // 回傳的是洗掉的元素組成的陣列
console.log(arr, ret)
let ret = arr.concat([7, 8, 9, 10])
console.log(arr,ret); // 回傳合并后的新陣列
console.log([...arr, ...[7,8,9,10]]);
8.2、filter、map
var arr = [1, 2, 3];
// filter
let newArr = arr.filter((item, index, self) => {
// 遍歷陣列中每一個元素,每遍歷一次元素就執行1遍
// item 就是當前遍歷到的元素
// return 過濾條件 (滿足我們需求的條件)
// index 表示當前遍歷到的這個元素的索引
// self 表示當前遍歷到的這個陣列arr
return item > 2
})
console.log(newArr);
// map
let newArr2 = arr.map(item => {
// 遍歷陣列中每一個元素,每遍歷一次元素就執行1遍
// item 就是當前遍歷到的元素
// return {id:item}
return item*2
})
console.log(newArr2);
8.3、陣列去重
<script>
var arr2 = [1, 2, 3, 1, 6, 2, 3]
//ES6
console.log([...new Set(arr2)]);
console.log(Array.from(new Set(arr2)));
// 古老方法
let newArr = [];
for (var i = 0; i < arr2.length; i++) {
if (newArr.indexOf(arr2[i]) == -1) {
newArr.push(arr2[i])
}
}
// filter方法
// 第1個元素-不重復元素 arr2.indexOf(1) 0 0
// 第2個元素-不重復元素 arr2.indexOf(2) 1 1
// 第3個元素-不重復元素 arr2.indexOf(3) 2 2
// 第4個元素-重復元素 arr2.indexOf(1) 0 3
// 第5個元素-不重復元素 arr2.indexOf(6) 4 4
let newArr2 = arr2.filter((item, index, self) => {
// return 滿足的條件 (不重復的資料的特點)
// console.log(self);
return self.indexOf(item) == index
})
console.log(newArr2);
</script>
九、(重點)Vue的過濾器和全域過濾器
9.1、過濾器的使用
Vue的過濾器用來對資料展示之前做一定的處理
<div id="app">
<!-- {{ 變數名 | 過濾器名 }} -->
<p>{{ num | formatNum }}</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
num:10
},
filters:{
formatNum(val){ // 這個形參接收 | 符號前面的變數資料
return val + 50 //return后面的值就是將來展示在頁面上的值(即過濾之后的值)
}
}
})
</script>
過濾一個時間戳：
<div id="app">
<!-- {{ 變數名 | 過濾器名 }} -->
<p>{{ timestamp | formatDate }}</p>
</div>
<script>
// var timestamp = new Date().getTime() // 獲取時間戳
// console.log("日期是：",timestamp)
var vm = new Vue({
el:"#app",
data:{
timestamp:new Date().getTime()
},
filters:{
formatDate(val){ // 這個形參接收 | 符號前面的變數資料
var now = new Date(val)
var year=now.getFullYear();
var month=now.getMonth()+1;
var date=now.getDate();
var hour=now.getHours();
var minute=now.getMinutes();
var second=now.getSeconds();
return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
}
}
})
</script>
9.2、全域過濾器
多個app共用的過濾器可以作為全域過濾器來書寫
<div id="app">
<!-- {{ 變數名 | 過濾器名 }} -->
<p>{{ timestamp | formatDate }}</p>
</div>
<div id="app2">
<!-- {{ 變數名 | 過濾器名 }} -->
<p>第二個： {{ timestamp | formatDate }}</p>
</div>
<script>
//全域過濾器
// Vue.filter("過濾器名字",(val)=>{})
Vue.filter("formatDate",(val)=>{
var now = new Date(val)
var year=now.getFullYear();
var month=now.getMonth()+1;
var date=now.getDate();
var hour=now.getHours();
var minute=now.getMinutes();
var second=now.getSeconds();
return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
})
var vm2 = new Vue({
el:"#app2",
data:{
timestamp:new Date().getTime()
}
})
// var timestamp = new Date().getTime() // 獲取時間戳
// console.log("日期是：",timestamp)
var vm = new Vue({
el:"#app",
data:{
timestamp:new Date().getTime()
},
// filters:{
// formatDate(val){ // 這個形參接收 | 符號前面的變數資料
// var now = new Date(val)
// var year=now.getFullYear();
// var month=now.getMonth()+1;
// var date=now.getDate();
// var hour=now.getHours();
// var minute=now.getMinutes();
// var second=now.getSeconds();
// return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
// }
// }
})
</script>
十、圖書購物車例子
<div id="app">
<table>
<thead>
<tr >
<th v-for="(title, tidx) in titles" :key="tidx">{{title}}</th>
</tr>
</thead>
<tbody>
<tr v-for="(book,bidx) in books" :key="book.name">
<td>{{bidx}}</td>
<td>{{book.name}}</td>
<td>{{book.price}}</td>
<td>{{book.date}}</td>
<td>
<button @click="sub(bidx)">-</button>
{{book.num}}
<button @click="add(bidx)">+</button>
</td>
<td>
<button @click="remove(bidx)">移除</button>
</td>
</tr>
</tbody>
</table>
<div>總價格:{{total}}</div>
</div>
<script>
new Vue({
el: '#app',
data: {
titles: ['編號', '書籍名稱', '出版日期', '價格', '數量', '操作'],
books: [
{
name: '演算法導論',
date: '2006-9',
price: 85,
num: 1
},
{
name: 'UNIX編程藝術',
date: '2006-2',
price: 59,
num: 1
},
{
name: 'Vue程式設計',
date: '2008-10',
price: 35,
num: 1
},
{
name: '頸椎康復',
date: '2006-3',
price: 129,
num: 1
},
]
},
// 定義方法的地方
methods: {
add(idx) {
console.log(idx)
this.books[idx].num++
},
sub(idx) {
if (this.books[idx].num) {
this.books[idx].num--
}
},
// 移除方法
remove(idx) {
// 修改 增加 洗掉(下標, 洗掉數量, .....增加的元素)
this.books.splice(idx, 1)
}
},
// 計算屬性
computed:{
total() {
return this.books.reduce((pre, current) => {
return pre + current.price * current.num
}, 0)//總價格
}
}
})
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/257417.html
標籤：其他
上一篇：自然語言處理系列二十四》詞性標注》詞性標注原理》感知器詞性標注
下一篇：BGP路由策略配置實體