VUE學習小結
構造VUE實例
new VUE({
el:‘選擇器‘,
data:{
k1:v1,
k2:v2,
...
},
methods:{
method1(){
...
},
method2(){
...
}
}
})
說明：
VUE構造函數的參數是一個json對象，它主要有3個鍵：
el表示數據在什麽元素內有效，它的值是一個選擇器，可以是id選擇器，也可以是類選擇器。
data顯示就是數據，是一個json格式，在html雙標簽內引用如：<h1>{{k1}}</h1>
methods通常定義響應事件的方法，作為html元素的屬性引用如：<button @click="method1">確定</button>，@click是v-on:click的縮寫。
v-bind
v-bind:class="{樣式名:data中布爾型的變量}"
如：v-bind:class="{active:isActive}
說明：active是css樣式名(.active)，isActive是data中的一個bool型變量，如果它的值為true，則采用.active樣式，否則就不采用。
擴展：
（1）v-bind:class="{ active: isActive, ‘text-danger‘: hasError }"
（2）v-bind:class="classObject" //classObject={ active: isActive, ‘text-danger‘: hasError }
v-bind:class="表達式"
如：v-bind:class="isRed?‘red‘:‘green‘"
說明：主要根據data中的isRed的值（true還是false）來選擇css樣式，true的話就采用‘red’，‘false’的話就采用‘green’。‘red‘和‘green‘是CSS類選擇器的名字，分別是“.red”和“.green”。
v-bind:style="{屬性1:值1,屬性2:值2}"
如：v-bind:style="{ color: activeColor, fontSize: fontSize + ‘px‘ }"
說明：值1activeColor和值2fontSize是Data中的鍵。
v-model
如：<input type="text" v-model="var1">
說明：表單控件的雙向綁定，內存變量var1的值可以改變控件的值（value），同時value也可改變內存變量var1的值。
VUE學習小結