【Vue3 从入门到实战 进阶式掌握完整知识体系】003-Vue语法基础：模板语法

最新推荐文章于 2023-07-04 15:14:36 发布
最新推荐文章于 2023-07-04 15:14:36 发布
阅读量511 收藏 2
点赞数 1
分类专栏： Vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29689343/article/details/118003640
版权

文章目录

3、常用模板语法

官方文档

时间：2021年06月15日 15时58分15秒

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层组件实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应性系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。

两种方式：

  • 开发者编写模板——Vue将模板编译成虚拟 DOM 渲染函数——Vue计算需要渲染的组件并进行DOM操作；
  • 开发者直接编写渲染（render）函数——Vue计算需要渲染的组件并进行DOM操作；

简单插值语法

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号——{{}}) 的文本插值

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>常用模板语法</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  Vue.createApp({
    data() {
      return {
        content: 'Hello World!'
      }
    },
    // {{content}}这是一个插值表达式，vue 会将 data 函数里面返回的 content 的值插入到 div 标签内
    template: `<div>{{content}}</div>`
  }).mount('#root');
</script>

</html>

运行结果

image-20210612134638804.png

插值语法内使用表达式

插值语法之内不仅可以写简单的文本，也可以写 js 表达式；

也可以将再 methods 中自定义的函数的返回值作为插入的值；

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>常用模板语法</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  Vue.createApp({
    data() {
      return {
        content: 'Hello World!',
        title: "标题"
      }
    },
    // 插值语法里面也可以写 js 表达式，vue 将表达式执行的结果插入到 div 标签之内
    template: `<div>{{Math.max(100,200) + content}}</div>`
  }).mount('#root');
</script>

</html>

运行结果

image-20210612135950862.png

插值语法中使用自定义函数

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>常用模板语法</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  Vue.createApp({
    data() {
      return {
        content: 'Hello World!'
      }
    },
    methods:{
      get(){
        return "测试内容";
      }
    },
    // 注意这里使用的自定义函数必须带上括号 `get()` ，否则插值的内容会是“function () { [native code] }”
    template: `<div>{{get()}}</div>`
  }).mount('#root');
</script>

</html>

运行结果

image-20210615154507722.png

使用v-html指令渲染html代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>常用模板语法</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  Vue.createApp({
    data() {
      return {
        content: '<strong>Hello World!</strong>'
      }
    },
    // 使用 v-html 指令渲染 html 代码，vue 会将 content 的内容作为 html 标签放入 div 标签进行渲染
    template: `<div v-html="content"></div>`
  }).mount('#root');
</script>

</html>

运行结果

image-20210612134904855.png

使用v-bind指令动态绑定属性值

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>常用模板语法</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  Vue.createApp({
    data() {
      return {
        content: 'Hello World!',
        title: '标题'
      }
    },
    template: `<div v-bind:title="title">{{content}}</div>`
  }).mount('#root');
</script>

</html>

运行结果

image-20210612135226997.png

使用v-once指令使得插值内容不再改变

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>常用模板语法</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        content: 'Hello World!'
      }
    },
    // 只渲染第一次的内容，后续的改变不再动态变化
    template: `<div v-once>{{content}}</div>`
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210612140538501.png

使用v-if指令控制标签的加载与否

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>常用模板语法</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        content: 'Hello World!',
        show: true
      }
    },
    // 直接控制是否渲染当前标签
    template: `<div v-if="show">{{content}}</div>`
  });

  const vm = app.mount('#root');
</script>

</html>

show为true运行结果

image-20210612140951183.png

show为false运行结果

image-20210612141049730.png

使用v-on指令进行事件绑定

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>常用模板语法</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        content: 'Hello World!'
      }
    },
    methods:{
      handleClick(){
        alert("点击了");
      }
    },
    // `v-on:事件名`
    template: `<div v-on:click="handleClick">{{content}}</div>`
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210612141342575.png

简写

v-on简写成@，v-bind简写成:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>常用模板语法</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        content: 'Hello World!',
        title: 'title'
      }
    },
    methods:{
      handleClick(){
        alert("点击了");
      }
    },
    // v-on -> @
    // v-bind -> :
    template: `<div @click="handleClick" :title="title">{{content}}</div>`
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210612141719896.png

动态绑定属性名

前面使用 v-bind 绑定额属性值，我们来动态绑定属性名

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>常用模板语法</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        content: 'Hello World!',
        name: 'title',
        title: '标题'
      }
    },
    methods:{
      handleClick(){
        alert("点击了");
      }
    },
    // 使用[]绑定属性名
    template: `<div @click="handleClick" :[name]="title">{{content}}</div>`
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210612143111695.png

动态绑定事件名

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>常用模板语法</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        content: 'Hello World!',
        name: 'title',
        title: '标题',
        event: 'click'
      }
    },
    methods:{
      handleClick(){
        alert("点击了");
      }
    },
    // 使用[]绑定时间名
    template: `<div @[event]="handleClick" :[name]="title">{{content}}</div>`
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210612143321516.png

阻止事件的默认行为

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>常用模板语法</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        
      }
    },
    methods:{
      handleClick(){
        alert("点击了");
      }
    },
    // 使用事件修饰符阻止事件的默认行为
    template: `
    <form action="https://www.baidu.com/" @click.prevent="handleClick" >
      <button type="submit">提交</button>
    </form>`
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210612143904356.png

訾博ZiBo
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Vue3 从入门到实战 进阶式掌握完整知识体系-探索组件的理念：组件间双向绑定高级内容（005）
weixin_42066070的博客
12-01 831
组件间双向绑定高级内容 不能写多个v-model但是可以写多个带属性的v-model:XXX <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid
【vue3|第15期】Vue3模板语法入门指南
最新发布
Commas的博客
07-04 1035
在 Vue 的世界里，模板语法是连接数据与视图的桥梁，它让数据驱动界面的概念变得生动而具体。接下来，就让我们一起深入了解 Vue3 的模板语法吧！
【Vue3 从入门到实战 进阶式掌握完整知识体系】021-Vue中的动画：组件和元素切换动画的实现
訾博（ZiBo）的博客
06-29 276
文章目录3、组件和元素切换动画的实现代码运行结果使得它们”出入有序“运行结果第一次渲染页面就有动画效果运行效果多个单组件动画切换运行结果 3、组件和元素切换动画的实现 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="
Vue3 从入门到实战 进阶式掌握完整知识体系
m0_73617968的博客
09-07 597
了解的都知道，我这么不思进取的人怎么可能突发奇想的去了解一个工作中没用过的类，不出意外的，还是在今天做 LeetCode 347. 前 K 个高频元素题的时候，尝试了几次都不知道怎么做，看评论区发现这道题实际上应该是使用 优先级队列 来做，我才知道有优先级队列这么个东西。优先级队列，依旧是 顾名思义，优先级队列会自动按照元素的权值排列，也就是说，优先级队列其实有反 先进先出规则，但是其对外接口依旧是从队头取元素，队尾添加元素，再无其他存取方式，看起来就是一个队列。优先级队列其实是一个 披着队列外皮的堆。
【Vue3 从入门到实战 进阶式掌握完整知识体系】010-探索组件的理念：组件概述
訾博（ZiBo）的博客
06-22 263
文章目录三、探索组件的理念1、组件概述组件图解简单使用运行结果复用组件运行结果组件可嵌套使用运行结果全局组件局部组件运行结果 三、探索组件的理念 1、组件概述 组件图解 组件的概念非常常见，类似于模块的概念 简单使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed
【Vue3 从入门到实战 进阶式掌握完整知识体系】002-Vue语法基础：Vue中的应用和组件的基本部分解析、生命周期
訾博（ZiBo）的博客
06-17 510
文章目录二、Vue语法基础1、Vue中的应用和组件的基本部分代码运行结果2、理解Vue的生命周期函数*生命周期图代码运行结果关于模板Vue3的生命周期函数图Vue3全部的生命周期钩子与Vue2比较 二、Vue语法基础 1、Vue中的应用和组件的基本部分 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatib
Vue3零基础学习指南之Vue基础（1）— 模板语法与指令
cchhllll的博客
02-24 2092
学习vue3第一期 — 模板语法
首个 Vue3.x教程_Vue3.x+Ts+Vuex+Antd Ui框架入门进阶视频教程(34讲)-大地老师
01-30
此教程包括：Vue3.x环境搭建、Vue/cli脚手架使用、Vite脚手架使用、Vue目录结构 核心文件分析、Vue模板语法、Vue事件、Vue表单、Vue双休数据绑定、Vue Dom操作以、JavaScript表达式 、条件判断、 计算属性、watch...
视频教程-Vue全家桶从基础入门到进阶项目实战第三篇中级进阶实战篇-Vue
weixin_34820706的博客
05-28 744
Vue全家桶从基础入门到进阶项目实战第三篇中级进阶实战篇 徐照兴，教研室主任...
vue学习（vue基础篇、vue进阶篇、Vue模块篇）.rar
07-30
本资源包含`vue基础篇`、`vue进阶篇`和`Vue模块篇`三个部分，旨在帮助开发者全面理解和掌握Vue.js。 在`vue基础篇`中，你将学习到Vue的基础概念和核心特性，包括： 1. **安装与设置**：如何通过CDN或npm引入Vue.js...
最容易上手的vue2.0实战入门教程（第1-2章）
06-19
在“最容易上手的vue2.0实战入门教程（第1-2章）”中，我们将会学习到Vue的基础知识和核心概念，这对于初学者来说是一份极好的学习资料。以下是一些关键知识点的详细解释： 1. **安装与设置**：首先，你需要了解...
Vue2+3入门到实战
Blue92120的博客
07-04 443
黑马前端老师介绍到：现在很多公司仍然在用Vue2，也在维护Vue2的老项目，当然Vue3也在快速发展，为了让大家清楚的知道前端需掌握的必备技能，播妞特地采访了一位从黑马毕业 5 年，并一直在前端领域“摸爬滚打”的学长。对于前端技术，他说得最多的便是：想在前端领域立足，一定要学好前端三剑客（HTML+CSS+Js），其次便是。教程包含Vue2.x + Vue3.x + 实战项目，以及最新Vue3语法，紧跟前端最新生态。教程包含 20+ 实战案例，2 大企业项目实战，通过综合实战，强化你真实企业开发能力。
【Vue3 从入门到实战 进阶式掌握完整知识体系】007-Vue语法基础：列表循环渲染
訾博（ZiBo）的博客
06-20 507
文章目录7、列表循环渲染使用v-for渲染数组运行结果使用v-for渲染对象运行结果使用key优化性能运行结果控制数组给对象添加属性运行结果循环n次运行结果指定某元素不显示运行结果存在问题解决问题：使用template运行结果 7、列表循环渲染 使用v-for渲染数组 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Com
【Vue3 从入门到实战 进阶式掌握完整知识体系】022-Vue中的动画：列表动画
訾博（ZiBo）的博客
06-29 145
文章目录4、列表动画代码运行结果让其他列表项“温柔地”后移运行结果 4、列表动画 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init
【Vue3 从入门到实战 进阶式掌握完整知识体系】025-Vue中的高级语法：自定义vue指令
訾博（ZiBo）的博客
06-30 301
文章目录2、自定义vue指令使用ref获焦点运行结果自定义指令实现获取焦点运行结果局部自定义指令运行结果说明带属性值的自定义指令运行结果修改数据并使数据生效运行结果简写自定义指令的属性运行结果优化上面的距离设置运行结果 2、自定义vue指令 使用ref获焦点 可以通过 ref 获得 DOM ，然后操作 DOM 实现获取焦点 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
【Vue3 从入门到实战 进阶式掌握完整知识体系】030-Composition API：Setup函数的使用
訾博（ZiBo）的博客
06-30 295
文章目录六、Composition API1、Setup函数的使用代码运行结果setup内部更多写法运行结果Composition API 和 Options API 中的同名属性运行结果参数props运行结果props是响应式的运行结果使用ES6解构props运行结果使从props解构后的属性再次变成响应式子组件改变父组件传递过来的数据：改副本运行结果子组件改变父组件传递过来的数据：对外触发事件运行结果 六、Composition API 组合 API ，即将数据和业务逻辑放在一起处理，而不是像vue2
【Vue3 从入门到实战 进阶式掌握完整知识体系】001-Vue语法初探
訾博（ZiBo）的博客
06-17 766
文章目录一、Vue语法初探1、第一个Vue程序hello world 代码运行结果我们在模板里面写一个变量运行结果使用mounted函数运行结果这告诉我们什么？2、反转字符串代码运行结果3、显示与隐藏代码显示状态隐藏状态4、了解循环和双向绑定代码运行结果往列表里面添加新的数据运行结果来点更有意思的运行结果5、组件概念初探先了解一下v-bind指令运行结果关于组件运行结果让组件灵活起来运行结果 一、Vue语法初探 1、第一个Vue程序 hello world 代码 <!DOCTYPE html>
【Vue3 从入门到实战 进阶式掌握完整知识体系】016-探索组件的理念：使用插槽和具名插槽解决组件内容传递问题
訾博（ZiBo）的博客
06-29 264
文章目录7、使用插槽和具名插槽解决组件内容传递问题通过插槽向子组件传标签运行结果除了标签还可以传递字符串、子组件运行结果一些说明slot插槽默认内容运行结果多个插槽运行结果插槽的简写运行结果作用域插槽运行结果作用域插槽解构写法运行结果 7、使用插槽和具名插槽解决组件内容传递问题 通过插槽向子组件传标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta htt
【Vue3 从入门到实战 进阶式掌握完整知识体系】005-Vue语法基础：样式绑定语法
訾博（ZiBo）的博客
06-19 355
文章目录5、样式绑定语法通过动态绑定 class 属性来控制样式的展示运行结果通过 class 对象来控制样式的展示运行结果通过 class 数组来控制样式的展示运行结果控制子组件样式的展示运行结果demo3问题解决运行结果动态绑定样式内容运行结果 5、样式绑定语法 通过动态绑定 class 属性来控制样式的展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值