一.Vue檢視

1.1 基本模板語法

插值

{{title}}
<p v-text="title"></p>
<p v-once> {{ title }} 不會改動這裡面的內容</p>


插入HTML
<div v-html="content">

繫結屬性

<img v-bind:src="imgSrc" v-bind:title="title" v-bind:alt="message">
簡寫
<img :src="imgSrc" :title="title" :alt="message">

檢視進行表示式運算

{{表示式運算}}
不建議這麼做

防止閃爍

CSS屬性:[v-cloak] {
            display: none !important;
        	}

<div id="app" class="v-cloak"></div>

指令列表

v-text		文字內容
v-html		在html種以什麼樣式顯示
v-on 		可以縮寫為@ 		繫結事件
v-bind		可以縮寫為:		繫結屬性
v-model		雙向資料鏈接
v-pre
v-cloak		防止閃爍
v-once		不會改變內容

#條件渲染
v-if		寫在元素中,值為true時表示有這個元素,
 
值為false時表示沒有這個元素,dom結構中也找不到
v-else-if
v-else		跟v-if組合寫在不同元素中使用,表示有他沒我,有我沒他

v-show		值為flase時,元素的display為none,在dom裡面還可以找到它,只是控制隱藏或顯示

#列表渲染
v-for

2.樣式繫結

class繫結

<p class="item" :class="{'current':'isCurrent',active:true,'li-item':true}">
    ......
</p>

<p :class="物件">
<p :class
 
="陣列">    
<p :class="{類名:true/false,類名:變數名}">    

style繫結

<p :style="{color:值...}">
<p :style="[{},{},{}...]">