先定義一個Vue的實例，后面的指令data都取值自這里

const vm = new Vue({
    el:'#app',
    data:{
        msg:'hello world',
        msg1:'<h1>hello world</h1>'
        imageSrc:'./logo.png',
        size:24,
        isShow:true,
        classA:{
            red:true,
            bd:false
        },
        divStyle1: "width: 100px; height: 100px; background-color: pink;",
        divStyle2: {width: "100px", height: "100px", backgroundColor: "pink"},
        divStyle3: {width: "50px", height: "50px", backgroundColor: "green"},
        items:['zs','ls','ww'],
        items1: [
            {id:1, name: 'zs', age: 18 },
            {id:2, name: 'ls', age: 24 },
            {id:3, name: 'ww', age: 30 }
          ]
    }
})

v-bind

在Vue中給標簽的屬性賦值數(shù)據(jù)的時候，不可以使用插值表達式，因此需要用到v-bind

<!-- 綁定一個屬性 -->
<img v-bind:src="imageSrc">
<!-- 縮寫 -->
<img :src="imageSrc">
<!-- class 綁定 -->
<!-- 可以給class屬性綁定一個對象，對象中的每個屬性名代表的就是對應的類名，屬性的值為布爾值，如果是true，就代表當前的元素擁有該類樣式，如果是false，就代表當前的元素沒有該類樣式 -->
<div id="box" :class="{red: true, db: true}"></div> <!-- 直接賦值 -->
<div id="box" :class="classA"></div>  <!-- 從Vue實例中取值-->
<div :class="[classA, { classB: true, classC: false }]">   <!-- 可以是一個數(shù)組-->
<!-- style 綁定 -->
<div :style="divStyle1"></div>
<div :style="[divStyle2, divStyle3]"></div>
<!-- 如果數(shù)組中直接寫類名需要用引號包裹，不然回去實例中找變量名 -->
<div :style="['red', 'db']"></div>

v-on

綁定事件監(jiān)聽器，事件類型由參數(shù)指定

<button v-on:click="btnClickHandler">點我呀！</button>
<div id="box" v-on:mouseenter="divMouseEnterHandler"></div>
<!-- v-on:事件名稱="事件處理函數(shù)的名稱"   事件處理函數(shù)是保存在methods屬性中！ -->

<!--事件注冊的簡寫形式：-->
<!-- @事件名稱="事件處理函數(shù)的名稱" -->
<button @click="btnClickHandler">點我呀！</button>
<div id="box" @mouseenter="divMouseEnterHandler"></div>
<!-- 事件注冊的時候，如果要給事件處理函數(shù)傳遞參數(shù)，那么我們直接給函數(shù)名稱后面加上小括號，將參數(shù)放進去即可！ -->
<button @click="btnClickHandler(100)">點我呀！</button>

<!--還可以使用箭頭函數(shù)的寫法-->
<!-- e.target對應的就是當前的文本框 -->
<input type="text" :value="name" @input="e => name = e.target.value">

調用的事件處理函數(shù)需要定義在Vue實例的methods中

const vm = new Vue({
    el: "#app",
    methods: {
        btnClickHandler(arg){
            // alert("點你咋地！！")
            alert(arg);
        },
        divMouseEnterHandler(){
            console.log("我進來了")
        }
    }
})

事件對象

• 如果在注冊事件的時候，直接賦值的是函數(shù)的名字，不帶小括號，那么vue會自動將事件對象傳遞給這個事件處理函數(shù)

<input type="text" @keyup="keyupHandler">
<!-- 可以如下調用事件對象,直接通過形參就可以使用了 -->
const vm = new Vue({
    el: "#app",
    methods: {
        keyupHandler(e){
            console.log(e)
        }
    }
})

• 如果在注冊時間的時候，使用的是帶有小括號的形式，則要獲取事件對象，需要手動的傳遞參數(shù)$event

<input type="text" @keyup="keyupHandler($event)"> 

事件修飾符

事件修飾符是可以連寫的，使用修飾符時，順序很重要；相應的代碼會以同樣的順序產生。因此，用 v-on:click.prevent.self 會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。

<!-- 
    使用方式 
    @事件名稱.修飾符名稱="事件處理函數(shù)"
-->
<div class="parent" @click="parentClickHandler">
    <div class="child" @click.stop="childClickHandler"></div>
</div>

常用的事件修飾符

• .stop - 調用 event.stopPropagation()。
• .prevent - 調用 event.preventDefault()。
• .capture - 添加事件偵聽器時使用 capture 模式。
• .self - 只當事件是從偵聽器綁定的元素本身觸發(fā)時才觸發(fā)回調。
• .once - 只觸發(fā)一次回調。

按鍵修飾符

<!-- 只有在 `key` 是 `Enter` 時調用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

• .enter
• .tab
• .delete (捕獲“刪除”和“退格”鍵)
• .esc
• .space
• .up
• .down
• .left
• .right
  通過全局config.keyCodes對象自定義按鍵修飾符別名

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

v-model

在表單控件或者組件上創(chuàng)建雙向綁定，你可以用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會根據(jù)控件類型自動選取正確的方法來更新元素

<!-- 當修改了input框中的數(shù)據(jù)，響應的Vue實例data中的對應數(shù)據(jù)也會修改 -->
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
<input type="checkbox" id="checkbox" v-model="checked">

v-model 在內部為不同的輸入元素使用不同的屬性并拋出不同的事件：

• text 和 textarea 元素使用 value 屬性和 input 事件；
• checkbox 和 radio 使用 checked 屬性和 change 事件；
• select 字段將 value 作為 prop 并將 change 作為事件。

v-for

基于源數(shù)據(jù)多次渲染元素或模板塊，可以實現(xiàn)數(shù)組/對象/字符串/數(shù)字/Iterable的遍歷

<div v-for="item in items">
  {{ item }}
</div>
<!-- item表示每一項 index表示對應的索引下標-->
<div v-for="(item, index) in items">{{item}} - {{index}}</div>
<!-- val表示對象的屬性值 key表示對象的屬性名 -->
<div v-for="(val, key) in object"></div>
<!-- 還可以如下使用，去獲取每一項的id然后綁定給標簽屬性-->
<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>
<!-- 遍歷一個數(shù)字 -->
<div v-for='item in 5'>
    {{item}}
</div>
<!-- 遍歷一個字符串-->
<div v-for='item in "hello"'>
    {{item}}
</div>

v-for使用最好與key配合使用：

• 加了key屬性之后可以提升列表的渲染性能
• 加了key屬性之后可以避免數(shù)據(jù)混亂（只適用于不依賴子組件狀態(tài)或臨時 DOM 狀態(tài) (例如：表單輸入值) 的列表渲染輸出）

v-show

根據(jù)表達式之真假值，切換元素的 display CSS 屬性。

<!--  isShow=true 元素顯示 isShow=false 標簽增加display：none 不顯示--> 
<div id="box" v-show="isShow">hello world</div>  

v-if

根據(jù)表達式的值的真假條件渲染元素。在切換時元素及它的數(shù)據(jù)綁定 / 組件被銷毀并重建，即為false是刪除標簽和標簽數(shù)據(jù)，為true時重新創(chuàng)建標簽和綁定數(shù)據(jù)

<!--  isShow=true 元素顯示 isShow=false 標簽被移除不顯示--> 
<div id="box" v-if="isShow">hello world</div> 

v-show 和 v-if 比較

• v-show如果條件是false，里面的所有的vue相關的指令照常進行解析和渲染了
• v-if如果條件是false，里面的所有的vue相關的指令都不會進行解析和渲染了
• v-show指令接受一個數(shù)據(jù)，如果數(shù)據(jù)是true則元素展示，否則元素隱藏
• v-if也能控制展示和隱藏，但是，他是直接將元素從頁面dom樹種移除掉了
• v-show 用于簡單的頁面中的元素展示和隱藏切換比較頻繁的場景！
• v-if用于只判斷一次的場景，因為這個可以用來提高性能，比如管理員擁有的權限，如果是管理員，就展示，如果不是管理員就不展示，就用v-if

v-cloak

這個指令保持在元素上直到關聯(lián)實例結束編譯。和 CSS 規(guī)則如 [v-cloak] { display: none }一起用時，這個指令可以隱藏未編譯的 Mustache 標簽直到實例準備完畢。

<div v-cloak>
  {{ message }}
</div>

<!-- css -->
[v-cloak] {
  display: none;
}

v-text

更新元素的 內容

<span v-text="msg"></span>  
<!-- 等價于-->
<span>hello world</span>

v-text指令和之前的插值表達式很像，但是兩者有區(qū)別

• 插值表達式會存在插值閃爍問題，而v-text不會有
• 插值表達式值替換{{Mustache }}的內容，而v-text 會替換標簽原本的內容

v-html

更新元素的 innerHTML

<div v-html='msg1'></div>
<!-- 等價于 -->
<div>
    <h1>
        hello world
    </h1>
</div>

v-pre

跳過這個元素和它的子元素的編譯過程。可以用來顯示原始 Mustache 標簽。跳過大量沒有指令的節(jié)點會加快編譯

<!-- 這樣使用，則div及子元素都不會經過Vue的編譯 -->
<!-- 可以提升性能-->
<div v-pre>
    <p>111</p>
    <p>111</p>
    <p>111</p>
</div>

v-once

只渲染元素和組件一次。隨后的重新渲染，元素/組件及其所有的子節(jié)點將被視為靜態(tài)內容并跳過。這可以用于優(yōu)化更新性能。

<!-- 都只會在第一次渲染的時候賦值，改變了值后，界面不會重新渲染-->
<!-- 單個元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>