1.文本插值
演示代码:
<template>
<div id="home">
{{ val }}
</div>
</template>
//js代码
<script setup>
let val="哈哈";
</script>
//css代码
<style scoped >
</style>
通过以上方式,{{ val }} 渲染成了哈哈
在{{}}中可以执行简单的表达式
{{ val+"嘿嘿" }}
渲染结果为 哈哈嘿嘿
注意,渲染的结果只能是文本,如果是标签代码并不会被浏览器解析,比如:
{{ "<p> 哈哈 <p/>" }}
会直接渲染为<p>哈哈<p/>
2.数据绑定
格式:
v-bind:属性="变量" //原型
:属性="变量" //简写
:属性="`字符${变量}`" //表达式
:属性="函数" //表达式
演示代码:
<template>
<div id="home">
<span v-bind:id="id1"></span> //原型
<span :id="id2"></span> //简写
<span :id="`myid${id3}`"></span> //表达式
<span :id="myid4"></span> //表达式
</div>
</template>
<script setup>
let id1="myid1";
let id2="myid2";
let id3="3";
function myid4() {
return "myid4";
}
</script>
<style scoped >
</style>
此时渲染后span标签的id数据为"myid1"
3.事件绑定
格式:
v-on:事件="函数" 原型
@事件="函数" 简写
@事件.监听器="函数" 带事件监听
演示代码:
<template>
<div id="home">
<a v-on:click="doSomething"> ... </a>
<a @click="doSomething"> ... </a>
//监听器,这个事件只能触发一次
<a @click.once="doSomething"> ... </a>
</div>
</template>
<script setup>
function doSomething() {
...
}
</script>
<style scoped >
</style>
监听器
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 在捕获模式添加事件监听器。
.self - 只有事件从元素本身发出才触发处理函数。
.{keyAlias} - 只在某些按键下触发处理函数。
.once - 最多触发一次处理函数。
.left - 只在鼠标左键事件触发处理函数。
.right - 只在鼠标右键事件触发处理函数。
.middle - 只在鼠标中键事件触发处理函数。
.passive - 通过 { passive: true } 附加一个 DOM 事件。
4.动态属性
格式:
:[变量/函数/表达式]="变量/函数/表达式"
使用灵活可以使用变量,函数,或者表达式返回
演示代码
<template>
<div id="home">
<a :[AttributeName]="AttributeVal"> ... </a>
<a @[eventName]="eventVal"> ... </a>
</div>
</template>
<script setup>
let AttributeName="id";
let eventName="click";
function AttributeVal() {
return "myid";
}
function eventVal() {
...
}
</script>
<style scoped >
</style>
5.其他
还有很多其他有意思的标签指令具体参考官网:内置指令 | Vue.js