VUE3 之 template 语法
1. 概述
老话说的好：干一行，爱一行，踏实工作才是真正快乐的源泉。
言归正传，今天继续聊 VUE3 的话题，今天聊聊 template 语法。
闲话不多说，直接上代码。
2. template 语法
2.1 与数据绑定
<script src="../vue.global.js">script> head> <body> <div id="myDiv">div> body> <script> const app = Vue.createApp({ // 创建一个vue应用实例 data() { return { message : "hello" } }, template : "{{message}}" // 插值表达式 }); // vm 就是vue应用的根组件 const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
template 中使用 {{message}} ，则 VUE 会使用 data 中的 message 的值去替换 template 中 {{message}} 的值。
但如果 data 中的 message 含有标签，则会直接显示出来，而不是当标签来用。
2.2 数据中含有标签
<script src="../vue.global.js">script> head> <body> <div id="myDiv">div> body> <script> const app = Vue.createApp({ // 创建一个vue应用实例 data() { return {message : "
hello
"} }, template : '' }); // vm 就是vue应用的根组件 const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
template 中使用 v-html="message" 的写法，就可以将 data 中 message 中的标签识别出来
2.3 数据与 title 属性绑定
<script src="../vue.global.js">script> head> <body> <div id="myDiv">div> body> <script> const app = Vue.createApp({ // 创建一个vue应用实例 data() { return { message : "hello",title : "myTitle"
}
},
template : '}); // vm 就是vue应用的根组件 const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
使用 v-bind:title="title" 将 data 中的 title 变量 与 template 中的 title 属性绑定
2.4 数据控制 input 元素是否禁止编辑
<script src="../vue.global.js">script> head> <body> <div id="myDiv">div> body> <script> const app = Vue.createApp({ // 创建一个vue应用实例 data() { return { myDisabled : true } }, template : '' }); // vm 就是vue应用的根组件 const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
v-bind:disabled = "myDisabled"，数据绑定 disabled 属性
2.5 只取第一次的数据
<script src="../vue.global.js">script> head> <body> <div id="myDiv">div> body> <script> const app = Vue.createApp({ // 创建一个vue应用实例 data() { return { message : "hello" } }, template : "{{message}}" }); // vm 就是vue应用的根组件 const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素 vm.$data.message = "hello world";
使用 v-once 修饰后，message 只取 data 中 message 的第一次赋值，这里显示 hello，而不是 hello world
2.6 数据控制元素是否显示
<script src="../vue.global.js">script> head> <body> <div id="myDiv">div> body> <script> const app = Vue.createApp({ // 创建一个vue应用实例 data() { return { message : "hello", show : true } }, template : '{{message}}' }); // vm 就是vue应用的根组件 const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
使用 v-if="show"，绑定 data 中的 show 变量，true 显示，false 不显示。
2.7 为元素添加事件
<script src="../vue.global.js">script> head> <body> <div id="myDiv">div> body> <script> const app = Vue.createApp({ // 创建一个vue应用实例 data() { return { message : "hello" } }, methods: { myClick() { alert('点击我了') } }, template : '<div v-on:click="myClick">{{message}}</div>' }); // vm 就是vue应用的根组件 const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
使用 v-on:click="myClick"，将 methods 中的 myClick 方法绑定为点击事件。
2.8 为元素添加事件简便写法
template : '
将 v-on:click 改为 @click
2.9 数据与title属性绑定简便写法
template : '将 v-bind:title 改为 :title 即可
2.10 动态属性
<script src="../vue.global.js">script> head> <body> <div id="myDiv">div> body> <script> const app = Vue.createApp({ // 创建一个vue应用实例 data() { return { message : "hello", attribute: "title", title : "myTitle" } }, template : '{{message}}' }); // vm 就是vue应用的根组件 const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
:[attribute]="title"，属性也与数据关联
2.11 动态事件
<script src="../vue.global.js">script> head> <body> <div id="myDiv">div> body> <script> const app = Vue.createApp({ // 创建一个vue应用实例 data() { return { message : "hello", event: "click" } }, methods: { myClick() { alert('点击我了') } }, template : '{{message}}' }); // vm 就是vue应用的根组件 const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
@[event]="myClick"，具体绑定哪个事件，由 data 中的 event 数据决定
2.12 阻止form表单submit
<script src="../vue.global.js">script> head> <body> <div id="myDiv">div> body> <script> const app = Vue.createApp({ // 创建一个vue应用实例 data() { return { } }, methods: { submitClick(e) { e.preventDefault(); alert('点击我了') } }, template : ` <form action="https://www.zhuifengren.cn" @click="submitClick"> <button type="submit">提交</button> </form> ` }); // vm 就是vue应用的根组件 const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
在方法中使用 e.preventDefault(); 代码阻止 submit 提交。
2.13 阻止form表单submit 的另一种方式
<script src="../vue.global.js">script> head> <body> <div id="myDiv">div> body> <script> const app = Vue.createApp({ // 创建一个vue应用实例 data() { return { } }, methods: { myClick() { alert('点击我了') } }, template : ` <form action="https://www.zhuifengren.cn" @click.prevent="myClick"> <button type="submit">提交</button> </form> ` }); // vm 就是vue应用的根组件 const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
@click.prevent 也可阻止submit
3. 综述
今天聊了一下 VUE3 的 template 语法，希望可以对大家的工作有所帮助
欢迎帮忙点赞、评论、转发、加关注 ：）
关注追风人聊Java，每天更新Java干货。
4. 个人公众号
追风人聊Java，欢迎大家关注