vue3语法模板template

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>