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 : "<div>{{message}}</div>" // 插值表达式 }); // 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 {
}
}, template : '<div v-html="message"></div>'
}); // 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",
}
},
});
// 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 : '<input v-bind:disabled = "myDisabled">'
}); // 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 : "<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 id="myDiv"></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 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 : '<div @click="myClick">{{message}}</div>'
将 v-on:click 改为 @click
2.9 数据与title属性绑定简便写法
将 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 : '<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 id="myDiv"></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 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，欢迎大家关注
VUE3 之 template 语法的更多相关文章
- Vue3中setup语法糖学习
目录 1,前言 2,基本语法 2,响应式 3,组件使用 3.1,动态组件 3.2,递归组件 4,自定义指令 5,props 5.1,TypeScript支持 6,emit 6.1,TypeScript ...
- C++(VS2015)模板显式特化之template语法深入理解
首先说下遇到的情况: 这里在vc++6.0上建立了一个自定义模板类,再去覆盖这个类,分别使用部分覆盖,整体覆盖 但在vs2015上去整体覆盖类会报错. 错误如下: 错误原因:个人感觉是新版本的vs更接 ...
- 基于SqlSugar的开发框架循序渐进介绍（11）-- 使用TypeScript和Vue3的Setup语法糖编写页面和组件的总结
随着Vue3和TypeScript的大浪潮不断袭来,越来越多的Vue项目采用了TypeScript的语法来编写代码,而Vue3的JS中的Setup语法糖也越来越广泛的使用,给我们这些以前用弱类型的JS ...
- Django Template语法中 OneToOne、ForeignKey 外键查询
主表的Models的结构 class A(models.Model): username = models.CharField(max_length=32, verbose_name='用户名称') ...
- Vue3 Composition API写烦了，试试新语法糖吧—setup script
前言 Vue3发布近一年了,相信大家对Vue3的新特性,新语法都很熟悉了.那么在使用Composition API的过程中,有没有觉得整个过程比较繁琐.比如你的模板里用到了大量的state和方法的时候 ...
- vue3 学习笔记(九)——script setup 语法糖用了才知道有多爽
刚开始使用 script setup 语法糖的时候,编辑器会提示这是一个实验属性,要使用的话,需要固定 vue 版本. 在 6 月底,该提案被正式定稿,在 v3.1.3 的版本上,继续使用但仍会有实验 ...
- 通过10个实例小练习，快速熟练 Vue3.0 核心新特性
Vue3.0 发 beta 版都有一段时间了,正式版也不远了,所以真的要学习一下 Vue3.0 的语法了. GitHub 博客地址: https://github.com/biaochenxuying ...
- vue3 script setup 定稿
vue script setup 已经官宣定稿.本文主要翻译了来自 0040-script-setup 的内容. 摘要 在单文件组件(SFC)中引入一个新的 <script> 类型 set ...
- Vue3 中有哪些值得深究的知识点？
众所周知,前端技术一直更新很快,这不 vue3 也问世这么久了,今天就来给大家分享下vue3中值得注意的知识点.喜欢的话建议收藏,点个关注! 1.createApp vue2 和 vue3 在创建实例 ...
随机推荐
- 菜鸡的Java笔记 第八 - java 面向对象
面向对象的特点以及开发过程. java中最大的特点是其支持面向对象编程设计思想.在面向对象之前广泛流传的是面向过程的编程思想,例如:C语言的开发就属于面向过程 如果要想更简单的去理解面向过 ...
- [luogu5344]逛森林
由于没有删边操作,可以先建出整棵森林,之后再用并查集判断是否连通,若连通必然与最后的森林相同 但如果用树链剖分+线段树的形式来优化建图,更具体如下: 建立两颗线段树,左边从儿子连向父亲,右边从父亲连向 ...
- [luogu3334]抛硬币
(数据范围的公式渲染有一些问题,大概是$a\le b\le 100$) 同洛谷4548,推导过程省略,直接给出答案-- 令$p_{H}=\frac{b}{a}$,$p_{T}=\frac{b}{b-a ...
- Apache Kafka分布式流处理平台及大厂面试宝典v3.0.0
概述 **本人博客网站 **IT小神 www.itxiaoshen.com 定义 Apache Kafka官网地址 http://kafka.apache.org/ 最新版本为 3.0.0 Apach ...
- 如何查看dpdk版本
服务器上曾经装过很多版本的dpdk,此时如果编译某个程序出现奇怪错误的时候不由得会怀疑是不是dpdk版本的问题= = 令人吃惊的是,网上搜了一圈居然没有一个简单直接的方法能够直接使用,于是自己实验了一 ...
- python网络自动化运维之telnetlib实验（EVE-NG+pycharm）
运行环境: 物理机:win10 1903 网络设备:EVE-NG模拟器上运行思科三层路由器 网络设备OS版本:cisco ios(versions 15.6) python环境:pycharm 3.3 ...
- DVWA总结
Brute Force,即暴力(破解),是指黑客利用密码字典,使用穷举法猜解出用户口令,是现在最为广泛使用的攻击手法之一,如2014年轰动全国的12306"撞库"事件,实质就是暴力 ...
- 【POJ2018】【实数域上的二分】【dp】
传送门:http://poj.org/problem?id=2018: 大概题意是求一个正整数数列 A 的平均数最大 长度不小于 L 的子段 我们可以二分答案 判定是否有一个长度不小于L的子段 平均数 ...
- Go 命令类型和未命名类型
Go 命令类型和未命名类型 例子 package main import "fmt" // 使用type声明的是命令类型 // type new_type old_type typ ...
- 【数据处理】python将GO注释结果整理为WEGO文件
通常,比对NR库后为m8格式,通过NR和GO数据库对应关系文件,写代码整理为Gene-->GO文件,如下: 这里是一对一的关系,要转换为WEGO格式文件,即一对多关系,如下: 用python脚本 ...