VUE学习小结

Posted 2021-01-03 beast-king

构造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的值。