vue学习笔记-数据及事件绑定-03

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