Vue筆記（一）——Vue指令&模板

前言

用於記錄我的學習vue筆記

Vue-MVVM模式

• M: model,稱之爲數據模型，在前端爲對象的形式表現

let data = {msg:'我就是一個數據模型'}

• V：View，視圖，也就是HTML

<div id="app">
    <span>我是視圖</span>
</div>

• VM: ViewModel,就是鏈接數據和視圖的橋樑，當Model發送改變時，ViewModel便將數據映射到視圖。

數據驅動模式和MVVM的關係：MVVM是數據驅動模式的一種實現，Vue是MVVM的一種實現

模板語法

模塊語法已成爲前端在數據驅動模式上View層最好的實現

插值

• 使用{{}}來綁定數據
• {{}}--能夠進行js表達式的運算

<div id="app">
    <!-- {{name}}值爲fhj -->
    <h1>{{name}}</h1>
</div>

let vm = new Vue({
    el:'#app',
    data:{
        name:'fhj'
    }
});

指令縮寫

• v-bind

<!-- 完整寫法 -->
<img v-bind:src="..."></img>
<!-- 縮寫 -->
<img :src=".."></img>

• v-on

<!-- 完整寫法 -->
<button v-on:click="btn"></button>
<!-- 縮寫 -->
<button @click="btn"></button>

指令

指令（directive），即原生的自定義屬性，在vue中是以 v- 爲前綴的自定義屬性

• v-text

<span v-text="msg"></span>
<!-- 效果等同於 {{msg}} -->
<!-- v-text的權重高於{{}} -->

• v-html

<div v-html="addHtml"></div>
let vm = new Vue({
    data:{
        addHtml:'<a>fhj</a>'
    }
});

• v-show

<!-- isshow的值會直接影響 div 在視圖中是否顯示，即 block 或 none -->
<div v-show="isshow"></div>

• v-if

<!-- status的值會直接影響 div 在視圖中是否存在 -->
<div v-if="status"></div>

• v-else-if
• v-else
• v-for

<!--
    data = 3 || [] || string || {}
    div 會循環data.length 次
    value 的值爲變量的值
    index 的值爲下標||對象||屬性名
-->
<div v-for="(value,index) in data">
    <span>{{value}}</span>
    <span>{{index}}</span>    
</div>

• v-model

<!-- 僅限於表單元素，雙向綁定 -->
<input type="text" v-model = "msg"/>

• v-pre

<!-- 指定某個vue指令不編譯，當字符串輸出 -->
<span v-pre>{{msg}}</span> // {{msg}}

• v-once

<!-- 內容只解釋一次，當改變mess時不會再次映射到 span -->
<span v-once>{{msg}}</span>