vue3语法模板template
一、双大括号
{{ }} 跟微信小程序一样 “Mustache”语法 数据绑定
组件名称为HelloWorld.vue
<h1>{{ msg }}</h1>
<h1>{{ msg1 }}</h1>
<script setup>
import { ref } from 'vue'
//间接赋值
defineProps({
msg: String,
})
//直接赋值
const msg1=ref("LLT")
</script>
使用间接的
<HelloWorld msg="Vite + Vue" />
二、文本：v-once
v-once 数据改变，插值内容不变化
<button type="button" @click="count++" v-once>count is {{ count }}</button>
三、原始HTML：v-html
v-html 输出html内容
<p>{{str}}</p>
<p v-html="str"></p>
四、Attribute：v-bind
v-bind 动态改变绑定属性
<p v-bind:id="id">v-bind绑定</p>
<button @click="changeColor">改变颜色</button>
<button @click="this.id=this.id=='id1'?'id2':'id1'">直接写方法</button>
五、javaScript表达式
只能表达是单个表达式，与微信小程序一样
<p>{{uname+1}}</p>
<p>{{uname.split('').reverse().join('')}}</p>
<p v-bind:id="'id'+1">v-bind绑定</p>
六、语法糖 中的 : 与 @
v-bind => :
v-on => @ 微信小程序 bindtap
<!--v-bind 语法糖 : -->
<p :id="id">v-bind语法糖:</p>
<!--v-on 用户监听Dom事件-->
<button v-on:click="changeColor">改变颜色</button>
<!--v-on 语法糖 @-->
<button @click="changeColor">改变颜色</button>
七、动态参数 属性与事件
<p v-bind:[attributeName]="id">动态属性</p>
<button @[mouseEvent]="attributeName='id'">class变id</button>
<button @click="mouseEvent='mouseover'">动态事件</button>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/107049.html
