[今日白記]Vue基礎的學習筆記（一）

#不知道寫點啥，那就開❀❀吧#

本文章僅用作於個人學習筆記（我又來了！）複製程式碼

前言：

這是一個Vue指令非常，特別，極其?和基礎的筆記。文中錯誤可能較多.ps：點選副標題可檢視對應的官方文件。

#v-cloak

• 用於解決頁面載入時vue標籤或指令出現閃爍的問題。如載入時出現{{item.id}}。
• v-cloak可直接在el掛載的標籤上新增，如新增後不起作用，可能是v-cloak的display:none層級更高的覆蓋掉了。加個!important提高一下層級。

html
<div id="app" v-cloak>
    {{item.id}}
</div>

css
[v-cloak] {
    display: none!important;
}複製程式碼

#v-text

• v-text用於操作純文字，它會替代顯示對應data物件上的值（也就是說裡面的內容會被覆蓋成data物件上的值），簡寫為{{text}}
• v-text是單向資料繫結，data物件的值變化時頁面就會更新，反之不會。

<!-- 這裡的"啦啦啦啦"會被msg的值覆蓋掉 -->
<p v-text="msg">啦啦啦啦</p>
<p>{{msg}}</p>複製程式碼

#v-html

• v-html輸出的是html，不同於v-text的輸出純文字（裡面的內容也是會被覆蓋_(√ ζ ε:)_ 
  ）。

<div v-html='msg2'>我不要被覆蓋/(ㄒoㄒ)/</div>

...
   data(){
      msg2: "<h1>v-html:來了來了(◔◡◔)</h1>"
   }
...複製程式碼

#v-bind

• v-bind是用於繫結HTML屬性的指令。v-bind:要繫結的屬性 , 縮寫為：要繫結的屬性。
• v-bind中可以寫合法的表示式。

<h2 :title=" msg3 + '表示式' ">v-bind:title</h2>

...
   data(){
      msg3: "我是一個合法的"
   }
...
複製程式碼

#v-on

• v-on用於繫結一個事件監聽器。v-on:事件 , 縮寫為：@事件。
• 可以在子元件上監聽自定義事件（ 上一章有(●'◡'●) ）。

<button @click="show">v-on</button>

...
   data(){
      msg: "hello Vue"
   },
   methods: {
      show() {
         alert(this.msg);
      }
   }
...
複製程式碼

#事件修飾符

• .stop   阻止事件的冒泡行為

<div class="inner" @click="divHandler">我是外層div
   <button @click="btnHandler">我是內部button</button>
</div>

...
   data(){},
   methods: {
      divHandler() {
         console.log("觸發了外層div的點選事件");
      },
      btnHandler() {
         console.log("觸發了button的點選事件");
      }
   },
...複製程式碼

因為button是被外層div.ineer包裹的，所以觸發button的click事件時，接下來就會觸發外層div的click事件。

點選button後

給button的click事件新增.stop修飾符即可阻止預設的冒泡機制

<div class="inner" @click="divHandler">我是外層div
   <button @click.stop="btnHandler">我是內部button</button>
</div>複製程式碼

點選button後

• .prevent   阻止預設事件的發生

<div class="div">
   <a href="https://www.baidu.com/" @click.prevent="linkHandler">跳轉到百度</a>
</div>

...
   data(){},
   methods: {
      linkHandler() {
         console.log("阻止了a標籤href屬性的跳轉");
      }
   },
...
複製程式碼

• .capture   實現捕獲觸發事件的機制

新增了.capture 修飾符的，先執行父級的函式，再執行子級的觸發函式。如果都新增了，執行最外層父級的函式（人類的本質是...）

<div id="app">
   <div class="inner" @click="divHandler">我是"弟弟"（第一）層div
      <div class="sm-inner" @click.capture="smDivHandler">我是"弟中弟"（第二）層div
         <button @click="btnHandler">我是內部button</button>
      </div>
   </div>
</div>

...
   data(){},
   methods: {
      divHandler() {
         console.log("觸發了第一層div的點選事件")
      },
      btnHandler() {
         console.log("觸發了button的點選事件")
      },
      smDivHandler() {
         console.log("觸發了第二層div的點選事件");
      }
   },
...複製程式碼

點選button後

• .self   實現作用在元素自身時才會觸發處理函式（.stop為阻止冒泡事件， .self是跳過了冒泡和捕捉事件）

<!-- 附官方文件說明： --> 
<!-- 只當在 event.target 是當前元素自身時觸發處理函式 --> 
<!-- 即事件不是從內部元素觸發的 -->

<div id="app">
   <div class="inner" @click="divHandler">我是"弟弟"（第一）層div
      <div class="sm-inner" @click.self="smDivHandler">我是"弟中弟"（第二）層div
         <button @click="btnHandler">我是內部button</button>
      </div>
   </div>
</div>

...
   data(){},
   methods: {
      divHandler() {
         console.log("觸發了第一層div的點選事件")
      },
      btnHandler() {
         console.log("觸發了button的點選事件")
      },
      smDivHandler() {
         console.log("觸發了第二層div的點選事件");
      }
   },
...
複製程式碼

<a v-on:click.once="doThis"></a>複製程式碼

• v-model可以實現表單元素（ <input> , <textarea> , <select> ）和 Model中資料的雙向資料繫結。也就是說，我們在<input type="text">中輸入什麼資料，對應的view中就會更新成什麼資料？

<div id="app">
   <input v-model="data2" type="text" />
   <p>{{data2}}</p>
</div>

...
   data: {
      data2: ""
   }
...
複製程式碼

• .lazy

當給v-model加上修飾符 .lazy時，input框的值改變時並不會使p標籤中的內容改變。轉為當input失去焦點時才會更新p的內容，這就相當於雙向資料繫結失去作用了。

• .trim

如果要自動過濾使用者輸入的首尾空白字元，可以給 v-model 新增 trim 修飾符。

#v-for 迴圈陣列

• v-for 指令根據一組陣列的選項列表進行渲染。
• v-for 指令需要使用 item in items 形式的特殊語法，items 是源資料陣列並且 item 是陣列元素迭代的別名。
• v-for還支援一個可選的第二個引數為當前項的索引。

<div id="app">
   <ul>
      <li v-for="(item,index) in list">
         姓名:{{item.name}} --- 學號:{{item.number}} --- 索引值是:{{index}}
      </li>
   </ul>
</div>

...
   data: {
      list: [
         { number: 201801, name: "張三" },
         { number: 201819, name: "李四" },
         { number: 201829, name: "CC" },
      ]
   }
...
複製程式碼

#v-for 迴圈物件

• 你也可以用 v-for 通過一個物件的屬性來迭代。
• 提供的第一個引數仍是陣列元素迭代的別名，第二個引數為鍵值（key），第三個引數為索引。

陣列下是沒有鍵值的，所以第二個引數是索引。物件中有鍵值，鍵值在第二個引數的位置，索引則在第三個引數的位置。

<div id="app">
   <ul>
      <li v-for="(item,key,index) in list2">
         值是:{{item}} --- 鍵是:{{key}} --- 索引值是:{{index}}
      </li>
   </ul>
</div>

...
   data: {
      list2: {
         id: 0,
         name: "張三",
         profession: "student"
      }
   }
...複製程式碼

#v-for   迭代數字

• in 後面除了可以放陣列，物件，還可以放數字。
• 值 item 是從1開始的。
  

  <div id="app">
     <ul>
        <li v-for="item in 7">這是第 {{item}} 次迴圈</li>
     </ul>
  </div>
  
  ...
     data: {}
  ...複製程式碼

#v-for中的key鍵值

• 為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key 屬性。理想的 key 值是每項都有的唯一 id。
• key屬性的型別只能是 string 或 number 型別（使用物件或者陣列之類的非原始型別值作為v-for的key並沒有作用）。
• key必須使用 v-bind 屬性繫結的形式指定key的值。

舉個?的? (⊙~⊙餓了)：

<div id="app">
   <div>
      id:<input v-model="id" type="text">
      content:<input v-model="content" type="text">
      <button @click="handleSubmit">新增</button>
   </div>
   <p v-for="item in list">
      <input type="checkbox">
      {item.id}} --- {{item.content}}
   </p>
</div>

...
   data: {
      id: "",
      content: "",
      list: [
         { id: 0, content: "便籤一" },
         { id: 1, content: "便籤二" },
         { id: 2, content: "便籤三" },
         {id: 3, content: "便籤四" },
      ]
   },
   methods: {
      handleSubmit() {
         // unshift() 方法可向陣列的開頭新增一個或更多元素，並返回新的長度。
         this.list.unshift({ id: this.id, content: this.content })
      }
   },
...複製程式碼

但我們選中 “1---便籤二”的checkbox時，往列表再新增一條新的資料時：

可以看到，checkbox選中的不是 之前選中的 “1---便籤二（新增新資料前索引為1）”，而是名為“0---便籤一（新增新資料後索引為1）”的checkbox。

現在我們給每次迴圈指定一個key，key為迴圈裡的唯一屬性id。

<p v-for="item in list" :key="item.id">
   <input type="checkbox">
   {{item.id}} --- {{item.content}}
</p>複製程式碼

再次選中“1---便籤二”的checkbox並往列表新增一條新資料

問題解決了！ (◔◡◔)

#v-show

• 根據表示式之真假值，切換元素的 display CSS 屬性。
• 當條件變化時該指令觸發過渡效果。
• 有較高的初始渲染效能。
• 如果元素可能永遠不會顯示出來，則推薦使用v-if（比如懸浮的關於框？不懂瞎扯的）。

<div id="app">
   <button @click="flag=!flag">切換顯示隱藏</button>
   <h1 v-show="flag">這是一條v-show控制的元素</h1>
</div>

...
   data: {
      flag: false
   }
...複製程式碼

#v-if

• 根據表示式的值的真假條件渲染元素。在切換時元素及它的資料繫結 / 元件被銷燬並重建。
• 有較高的切換效能
• 如果一個元素需要頻繁的切換，最好不要用v-if

也就是說v-if每次都會重新刪除或建立元素，當一個元素需要頻繁的切換時，因為每次的重新刪除和建立元素，會產生較高的切換效能。

<div id="app">
   <button @click="flag=!flag">切換顯示隱藏</button>
   <h1 v-if="flag">這是一條v-if控制的元素</h1>
</div>

...
   data: {
      flag: false
   }
...複製程式碼

Class 與 Style 繫結（詳細還是看官方文件吧= =）

這裡只記一個用得比較多？的例子

• 繫結 HTML Class

<style>
   .activeClass {
      color: red;
   }
</style>

<div id="app">
   <p :class=" [currentData==0 ? 'activeClass' : '']">item1</p>
   <p :class=" [currentData==1 ? 'activeClass' : '']">item2</p>
   <p :class=" [currentData==2 ? 'activeClass' : '']">item3</p>
</div>

...
   data: {
      currentData: 1
   }
...
複製程式碼

• 繫結內聯樣式
  

<div id="app">
   <div v-bind:style="styleObject">繫結內聯樣式</div>
</div>

...
   data: {
      styleObject: {
         color: 'red',
         fontSize: '13px'
      }
   }
...複製程式碼

-------END-------

放張從 @我笑酸齋 裡偷來的圖(●'◡'●)