vue，你所了解的基础语法

vue基础语法

1、data属性
v-cloak属性：可以解决差值表达式闪烁的问题：可以放任何位置
v-text属性：是没有闪烁问题：会覆盖原本里面的内容
v-html属性：可以识别HTML标签
v-bind属性：是Vue中提供绑定属性的指令

2、v-band: v-band可以写符合js的表达式：

3、methods属性
v-on属性：事件绑定机制
方法一：
方法二：<input type=“button” value=“点击” @mouseenter=“fn”>
4、事件访问修饰符
使用位置：<input type=“button” value=“点击” name="" id="" @click.访问修饰符=“btnHandler”>
　　　.stop：阻止冒泡行为
　　　.prevent：阻止默认行为
　　　.capture：事件捕获机制，从外往里执行
　　　.self：被修饰的元素只能通过自己来触发事件，只会阻止自己的冒泡行为，不会阻止别的元素
　　　.once：只触发一次事件函数

5、v-model： 双向数据绑定：（页面）（vue实例），任意一端数据发生变化时则另一端也改变

6、操作class属性
第一种使用

<h1 :class="['red','thin','italic']">这是一个很大很大的h1，大到你无法想象！！！</h1>

使用三元表达式

<h1 :class="['thin','italic',flag?'active':'']">这是一个很大很大的h1，大到你无法想象！！！</h1>

在数组中使用对象代替三元表达式，提高代码的可读性

<h1 :class="['thin','italic',{'active':flag}]">这是一个很大很大的h1，大到你无法想象！！！</h1>

直接使用对对象，对象的属性是类名，属性值是布尔类型的标识符，由于数对象可以带引号，也可以不带引号

<h1 :class="{active:true,red:false,thin:false}">这是一个很大很大的h1，大到你无法想象！！！</h1>

7、操作行内的style属性
第一种：<h1 :style="{color:'red','font-weight':200}">这是一个h1</h1>
第二种：<h1 :style="styleobj">这是一个h1</h1>
第三种：<h1 :style="[styleobj,styleobj2]">这是一个h1</h1>