VUE3之模板语法
1. 概述
老话说的好：干一行，爱一行，踏实工作才是真正快乐的源泉。
言归正传，今天继续聊VUE3的话题，今天聊聊模板语法。
闲话不多说，直接上代码。
2.template 语法
2.1 与数据绑定
脚本' src='./vue。全球。js /脚本
/head
身体
分区/部门
/body
脚本
const app=Vue.createApp({ //创建一个某视频剪辑软件应用实例
数据(){ 0
返回{
消息："你好"
}
},
模板： 'div{{message}}/div' //插值表达式
});
//vm就是某视频剪辑软件应用的根组件
const VM=app。挂载(' # MyDiv ')；//绑定身份证明(识别)为myDiv的元素
模板中使用{{message}}，则VUE会使用数据中的消息的值去替换模板中{ {消息}}的值。
但如果数据中的消息含有标签，则会直接显示出来，而不是当标签来用。
2.2 数据中含有标签
脚本' src='./vue。全球。js /脚本
/head
身体
分区/部门
/body
脚本
const app=Vue.createApp({ //创建一个某视频剪辑软件应用实例
数据(){ 0
返回{
消息：“H3你好/H3”
}
},
模板：“div v-html=”消息/div '
});
//vm就是某视频剪辑软件应用的根组件
const VM=app。挂载(' # MyDiv ')；//绑定身份证明(识别)为myDiv的元素
模板中使用' v-html='消息'的写法，就可以将数据中消息中的标签识别出来
2.3 数据与 title 属性绑定
脚本' src='./vue。全球。js /脚本
/head
身体
分区/部门
/body
脚本
const app=Vue.createApp({ //创建一个某视频剪辑软件应用实例
数据(){ 0
返回{
消息： '你好，
标题： '我标题'
}
},
模板： ' div v-bind : title=' title " { message } }/div '
});
//vm就是某视频剪辑软件应用的根组件
const VM=app。挂载(' # MyDiv ')；//绑定身份证明(识别)为myDiv的元素
使用v-bind:title='title '将数据中的标题变量与模板中的标题属性绑定
2.4 数据控制 input 元素是否禁止编辑
脚本' src='./vue。全球。js /脚本
/head
身体
分区/部门
/body
脚本
const app=Vue.createApp({ //创建一个某视频剪辑软件应用实例
数据(){ 0
返回{
myDisabled : true
}
},
模板： '输入v-bind :禁用=“我的禁用”
});
//vm就是某视频剪辑软件应用的根组件
const vm
= app.mount('#myDiv'); // 绑定id为 myDiv 的元素
v-bind:disabled = "myDisabled"，数据绑定 disabled 属性
2.5 只取第一次的数据
script src="../vue.global.js"/script
/head
body
div /div
/body
script
const app = Vue.createApp({ // 创建一个vue应用实例
data() {
return {
message : "hello"
}
},
template : "div v-once{{message}}/div"
});
// 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 /div
/body
script
const app = Vue.createApp({ // 创建一个vue应用实例
data() {
return {
message : "hello",
show : true
}
},
template : 'div v-if="show"{{message}}/div'
});
// 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 /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 : 'div @click="myClick"{{message}}/div'
将 v-on:click 改为 @click
2.9 数据与title属性绑定简便写法
template : 'div :title="title"{{message}}/div'
将 v-bind:title 改为 :title 即可
2.10 动态属性
script src="../vue.global.js"/script
/head
body
div /div
/body
script
const app = Vue.createApp({ // 创建一个vue应用实例
data() {
return {
message : "hello",
attribute: "title",
title : "myTitle"
}
},
template : 'div :[attribute]="title"{{message}}/div'
});
// vm 就是vue应用的根组件
const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
:[attribute]="title"，属性也与数据关联
2.11 动态事件
script src="../vue.global.js"/script
/head
body
div /div
/body
script
const app = Vue.createApp({ // 创建一个vue应用实例
data() {
return {
message : "hello",
event: "click"
}
},
methods: {
myClick() {
alert('点击我了')
}
},
template : 'div @[event]="myClick"{{message}}/div'
});
// 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 /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 /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，欢迎大家关注
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/147921.html