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

const白發表於2019-04-04

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

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

前言：

這是一個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的點選事件");
      }
   },
...
複製程式碼

點選button後，”弟中弟“（第二層）div不會被觸發（跳過了冒泡），第一層div觸發冒泡機制

點選”弟中弟“（第二層）後，第一層div觸發冒泡機制

.once 點選事件將只會觸發一次

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

#v-model（點選檢視官方文件的完整介紹= =）

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-------

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

vue學習筆記【基礎篇一】
2017-08-28
Vue筆記
Vue-Router基礎學習筆記
2018-10-14
Vue筆記
Vue學習計劃基礎筆記(六) – 元件基礎
2018-07-18
Vue筆記元件
python基礎學習筆記(一)
2018-10-16
Python筆記
Vue.js 學習筆記之四：Vue 元件基礎
2020-10-12
Vue.js筆記元件
vue學習筆記一
2018-12-20
Vue筆記
[今日白學]元件的基礎的基礎的基礎
2019-04-01
元件
類的基礎學習筆記
2013-07-04
筆記
CSS 基礎學習筆記
2018-11-06
CSS筆記
node基礎學習筆記
2018-07-30
筆記
Web基礎學習筆記
2020-12-06
Web筆記
Redis基礎學習筆記
2017-03-23
Redis筆記
Shell 學習筆記基礎
2017-01-21
筆記
Oracle基礎學習筆記
2010-03-12
Oracle筆記
Java基礎學習筆記
2024-07-24
Java筆記
今日學習JVM筆記
2020-11-24
JVM筆記
安卓初學基礎學習筆記
2018-06-27
安卓筆記
MySQL學習筆記【基礎篇】
2020-08-17
MySql筆記
DI、IOC基礎學習筆記
2019-04-01
筆記
JavaScript學習筆記——基礎部分
2020-12-27
JavaScript筆記
彙編基礎學習筆記
2020-10-11
筆記
基礎知識學習筆記
2020-09-28
筆記
Python基礎學習筆記
2018-03-05
Python筆記
影象拼接基礎學習筆記
2016-11-02
筆記
JavaWeb基礎-學習筆記02
2024-10-03
JavaWeb筆記
Java基礎-學習筆記05
2024-07-21
Java筆記
Java基礎-學習筆記06
2024-07-22
Java筆記
Java基礎-學習筆記07
2024-07-23
Java筆記
Java基礎-學習筆記04
2024-07-16
Java筆記
Java基礎-學習筆記17
2024-09-09
Java筆記
Redux 基礎 - react 全家桶學習筆記（一）
2018-08-12
ReduxReact筆記
Node基礎知識點--學習筆記（一）
2015-04-18
筆記
vue學習筆記
2021-09-09
Vue筆記
Vue 學習筆記
2024-06-10
Vue筆記
Linux基礎學習-Docker學習筆記
2018-09-12
LinuxDocker筆記
RxJava 學習筆記 -- 基礎知識
2018-09-06
RxJava筆記
Java學習筆記01 - JavaSE基礎
2021-11-15
Java筆記
node 學習筆記基礎入門
2020-10-13
筆記

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

前言：

#v-for 迭代數字

相關文章