vue,你所了解的基础语法

tech2024-07-02  64

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>

最新回复(0)