vue3 基础-常用模板语法
一个 vue 的单文件 SAP ( single page web application ) 即在一个 .vue 为后缀的文件中, 会包含3个部分.
- 模板: html
- 逻辑: javascript
- 样式: css
这种同时存在, 然后组成一个小组件的方式其实, 其实非常符合编程思维的. 比原本拆分为 .html, .css, .js 这样的方式好维护很多. 本篇讲关于模板部分的一些 vue 的常用语法.
插值表达式 {{ }}
花括号里是可以放变量和 js 表达式的.
<!DOCTYPE html>
<html lang="en">
<head>
<title>常用模板语法</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: 'hello, world!'
}
},
template: `<div>{{message.toUpperCase()}}</div>`
})
app.mount('#root')
</script>
</body>
</html>
则页面会显示:
HELLO, WORLD!
v-html
告诉模板将以 html 的方式来展示数据, 举例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<title>常用模板语法</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: 'hello, world!'
}
},
// v-html: 以 html 的方式来展示数据
template: `<div v-html="message"></div>`
})
app.mount('#root')
</script>
</body>
</html>
则结果为: hello, world!
v-bind
用来绑定属性, 当然也可以简写为 ":"
<!DOCTYPE html>
<html lang="en">
<head>
<title>常用模板语法</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
disabled: false
}
},
template: `<input v-bind:disabled="disabled" />`
// template: `<input :disabled="disabled" />`
})
app.mount('#root')
</script>
</body>
</html>
值得注意的是这里的属性绑定可以简写为:
<input :disabled="disabled" />
另外在补充两个常用但一看就懂的 DOM 元素的 显示 / 隐藏 指令 v-show 和 v-if
- v-if : 当值为 true 的显示, 否则不显示, 本质是动态在 DOM 树内增删元素
- v-show: 当值为 true 的显示, 否则不显示, 本质是 display: none
<!DOCTYPE html>
<html lang="en">
<head>
<title>v-if 和 v-show</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: 'hello, world',
show: false
}
},
methods: {
handleClick () {
this.show = !this.show
}
},
// template: `<div v-if="show">{{message}}</div>`
template: `
<div v-show="show" @click=>{{message}}</div>
<button @click="handleClick">显示/隐藏</button>
`
})
app.mount('#root')
</script>
</body>
</html>
从真实的使用频率来看, 就那种频繁显示隐藏的建议用 v-show; 使用次数不多的用 v-if 这样可以减少增删 dom 的消耗.
v-on
这里最为常用的就是点击事件 v-on:click = 'xxx'.
<!DOCTYPE html>
<html lang="en">
<head>
<title>常用模板语法</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: 'hello, world'
}
},
methods: {
handleClick () {
alert('click')
}
},
template: `<div v-on:click="handleClick">{{message}}</div>`
// template: `<div @click="handleClick">{{message}}</div>`
})
app.mount('#root')
</script>
</body>
</html>
值得注意的是这里的 v-on:click 事件绑定可以简写为:
<div @click="handleClick">{{message}}</div>
动态属性和事件绑定 [ ]
即对 dom 元素的属性和事件名, 通过数据的方式进行动态的绑定, 栗子如下:
<!DOCTYPE html>
<html lang="en">
<head>
<title>动态属性和事件绑定</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: 'hello, world',
// event: 'click',
event: 'mouseenter',
name: 'title'
}
},
methods: {
handleClick () {
alert('click')
}
},
template: `
<div
@[event]="handleClick"
@[name]="message"
>
{{message}}
</div>
`
})
app.mount('#root')
</script>
</body>
</html>
阻止默认行为 @click.prevent
通常是用于表单的提交, 我们要设置默认不让其跳转 (要改为手动提交校验这样的逻辑):
<!DOCTYPE html>
<html lang="en">
<head>
<title>阻止默认行为</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: 'hello, world',
// event: 'click',
event: 'mouseenter',
name: 'title'
}
},
methods: {
handleClick () {
alert('click')
}
},
template: `
<form action="https://www.baidu.com"
@click.prevent="handleClick"
>
<button type="submit">提交</button>
{{message}}
</form>
`
})
app.mount('#root')
</script>
</body>
</html>
简单就到这里了, 这些常用的模板语法其实就那么几个, 用多了就熟悉了.
vue3 基础-常用模板语法的更多相关文章
- Vue常用模板语法
常用模板语法 本篇将在上一篇的基础上记录文本渲染.表达式.过滤器以及常用指令的简单用法. 一.文本渲染 Vue支持动态渲染文本,即在修改属性的同时,实时渲染文本内容.同时为了提高渲染效率,也支持只 ...
- Vue.js学习笔记（二） - 常用模板语法
本篇将在上一篇的基础上记录文本渲染.表达式.过滤器以及常用指令的简单用法. 一.文本渲染 Vue支持动态渲染文本,即在修改属性的同时,实时渲染文本内容.同时为了提高渲染效率,也支持只渲染一次,即第一次 ...
- .net 开源模板引擎jntemplate 教程：基础篇之语法
一.基本概念 上一篇我们简单的介绍了jntemplate并写了一个hello world(如果没有看过的,点击查看),本文将继续介绍jntemplate的模板语法. 我们在讲解语法前,首先要了解一下标 ...
- 12月14日内容总结——模板层之标签、自定义模板语法、母版（模版）的继承与导入、模型层前期准备知识点、ORM常用关键字
目录 一.模板层之标签 分支结构if for循环 with(定义变量名) 二.自定义过滤器.标签及inclusion_tag(了解) 三.母版(模板)的继承与导入(重要) 四.模型层之前期准备 模型层 ...
- 100多个基础常用JS函数和语法集合大全
网站特效离不开脚本,javascript是最常用的脚本语言,我们归纳一下常用的基础函数和语法: 1.输出语句:document.write(""); 2.JS中的注释为//3.传统 ...
- vue基础——模板语法
模板语法介绍 Vue.js使用了基于HTML的模板语法,允许开发者声明式地将dom绑定至底层Vue实例的数据.所有Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析. ...
- 基础常用JS函数和语法
100多个基础常用JS函数和语法集合大全 来源:http://www.cnblogs.com/hnyei/p/4605103.html 网站特效离不开脚本,javascript是最常用的脚本语言,我 ...
- golang 模板(template)的常用基本语法
1. 模板 在写动态页面的网站的时候,我们常常将不变的部分提出成为模板,可变部分通过后端程序的渲染来生成动态网页,golang提供了html/template包来支持模板渲染. 这篇文章不讨论gola ...
- vue基础---模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- Vue模板语法与常用指令
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数,结合相应系统,在应用状态改变时 ...
随机推荐
- PPT革命！DeepSeek+Kimi=N小时工作5分钟完成？
在之前的三篇文章中,笔者介绍了有关DeepSeek的基础操作,满足了不同类型的用户需求. 想利用大模型构建属于自己的智能知识库,无论你是想私有化部署,还是直接使用API调用,都可以在这三篇文章中找到答 ...
- Docker 安装详细步骤
一.安装前的准备 确认系统要求 不同的操作系统对 Docker 的支持有所不同,常见的如 Windows.MacOS 和各种 Linux 发行版. 启用虚拟化(如果需要) 对于某些系统,可能需要在 B ...
- Nginx 拒绝错误SNI请求以防止源站被扫描
Nginx 1.19.4 版本更新了一个新的配置,允许使用 ssl_reject_handshake 这个参数来拒绝错误 SNI 请求的握手,可以防止被类似Censys互联网扫码工具扫描出源站ip 在 ...
- 第二课 - 输入（按键）控制输出（LED）-设备树
在第一课中学习了如何安装NCS开发环境,以及如何新建一个工程,还有如何构建和下载到开发板.并运行了官方的LED闪烁例程. 设备树 我们继续跟着官方开发者学院的教程来学习第二课的课程.官方课程包含了以下 ...
- Redis主从、哨兵
之前安装了redis,但是单节点redis不可靠,现在搭建redis主从,提高可用性. 一.搭建一主二从 redis主从其实是读写分离,主节点写数据,从节点读数据. 1.准备三台redis机器.red ...
- 【CF VP记录】Codeforces Round 1008 (Div. 2)
比赛链接 本文原文发布于博客园,如您在其他平台刷到此文,请前往博客园获得更好的阅读体验. 跳转链接:https://www.cnblogs.com/TianTianChaoFangDe/p/18766 ...
- k8s dial tcp 127.0.0.1:6443: connect: connection refused排查流程及解决思路
前言 k8s 集群中,使用 kubelet 报错,如下: The connection to the server 127.0.0.1:6443 was refused - did you speci ...
- 神经网络与模式识别课程报告-卷积神经网络(CNN)算法的应用
======================================================================================= 完整的神经网络与模式识别 ...
- centos7 docker卸载老版本并升级到最新稳定版本
一.前言 docker的版本分为社区版docker-ce和企业版dokcer-ee社,区版是免费提供给个人开发者和小型团体使用的,企业版会提供额外的收费服务,比如经过官方测试认证过的基础设施.容器.插 ...
- SpringBoot + 布隆过滤器：亿级数据下的高效防护盾与缓存穿透实战指南
在当今高并发.海量数据的应用场景中,布隆过滤器凭借其极低的内存占用和极快的查询效率,成为解决缓存穿透.数据预判等难题的利器.本文深度解析布隆过滤器的核心原理与实战应用,手把手教你如何将这一数据守门员融 ...