【vue3】02-vue的模板语法

文章目录

  • 模板语法
    • Mustache插值语法
    • 不常用基本指令（了解）
    • 常用指令：v-bind
      • v-bind绑定基本属性
      • v-bind绑定class
      • v-bind绑定style属性
      • v-bind绑定对象

模板语法

React的开发模式:

  • React使用的jsx，所以对应的代码都是编写的类似于js的一种语法;
  • 之后通过Babel将jsx编译成 React.createElement 函数调用;

Vue也支持jsx的开发模式(后续有时间也会讲到):

  • 但是大多数情况下，使用基于HTML的模板语法;
  • 在模板中，允许开发者以声明式的方式将DOM和底层组件实例的数据绑定在一起;
  • 在底层的实现中，Vue将模板编译成虚拟DOM渲染函数，这个我会在后续给大家讲到;

所以,对于学习Vue来说，学习模板语法是非常重要的。

Mustache插值语法

如果我们希望把数据显示到模板(template)中，使用最多的语法是“Mustache”语法(双大括号)的文本插值。

  • 并且我们前端提到过，data返回的对象是有添加到Vue的响应式系统中;
  • 当data中的数据发生改变时，对应的内容也会发生更新。
  • 当然，Mustache中不仅仅可以是data中的属性，也可以是一个JavaScript的表达式。

基本使用代码示例：

<body><div id="app"><!-- 1.基本使用 -->{{ message }}</div><!-- cdn引入vue --><script src=" https://unpkg.com/vue@next"></script><script>//使用vueconst app = Vue.createApp({data:function(){return{message:"hello vue！"}},methods:{}})//挂载app.mount("#app")</script>
</body>

js表达式使用代码示例：

<div id="app"><!-- 2.js表达式 --><h2>计数双倍:{{ counter * 2 }}</h2><h2>展示的信息:{{ info.split(" ") }}</h2>
</div><!-- 从本地引入Vue -->
<script src="../src/vue3.js"></script>
<script>const app = Vue.createApp({data() {return {message: "Hello Vue",counter: 1,info: "Hello Vue3"};},});app.mount("#app");
</script>

调用函数代码示例：

<div id="app"><!-- 调用函数 --><h2>{{formDate()}}</h2></div><script src=" https://unpkg.com/vue@next"></script><script>//使用vueconst app = Vue.createApp({data:function(){return{}},methods:{formDate(){return"2023-4-01"}}})//挂载app.mount("#app")</script>

运行效果：
在这里插入图片描述

注意：值得一提的是尽管mustache插值语法很灵活，但不能在其中定义语句，例如

<!-- 错误写法！ -->
<h2>{{ const name = "Hello Vue3" }}</h2>
<!-- 控制流的if语句也是不支持的 -->
<h2>{{ if (true) {return message} }}</h2>

不常用基本指令（了解）

1.v-once指令(了解)

v-once用于指定元素或者组件只渲染一次：
当数据发生变化时，元素或者组件以及其所有的子元素将视为静态内容并且跳过；
该指令可以用于性能优化；其实message的值是改变了的, 只是不会渲染

2.v-text指令(了解)

用于更新元素的 textContent :
因为有了Mustache插值语法且更灵活, 所以我们一般使用插值语法,
v-text基本不使用

3.v-html指令(了解)

默认情况下，如果我们展示的内容本身是 html 的，那么vue并不会对其进行特殊的解析。
v-html偶尔会用到, 某些特殊场景
如果我们希望这个内容被Vue可以解析出来，那么可以使用 v-html 来展示；

在这里插入图片描述
4.v-pre指令(了解)

v-pre用于跳过元素和它的子元素的编译过程，显示原始的Mustache标签：
跳过不需要编译的节点，加快编译的速度；

不常用指令代码示例：

    <div id="app"><!-- 1.v-once --><h2 v-once>{{ message }}</h2><button @click="change">改变messge</button><hr><!-- 2.v-text --><h3>{{ message2 }}</h2><!-- 等价于 --><h3 v-text="message2"></h2><hr><!--3.v-html  --><h3>{{ content }}</h3><!-- 如果我们希望这个内容被Vue可以解析出来，那么可以使用 v-html 来展示； --><!-- <h3 v-html>{{content2}}</h3> --></div><!-- 从本地引入Vue --><script src="../Vue3.js"></script><script>const app = Vue.createApp({data() {return {message: "Hello Vue",message2:"xxx",content: `<span style="color: red; font-size: 30px">Hello Vue</span>`,content2: `<span style="color: red; font-size: 30px">Hello Vue</span>`,};},methods: {// 疯狂点击仍不会改变，因为v-once只渲染一次change() {this.message = "我被改变了";},}});app.mount("#app");</script>

运行效果：
在这里插入图片描述

常用指令：v-bind

在这里插入图片描述

v-bind绑定基本属性

  • 绑定如图片的链接src、网站的链接href等，基本用法如下：

< img v-bind:src=“链接” alt=“” />

  • v-bind有一个对应的语法糖: :代替v-bind，也就是简写方式。
  • 如果想要动态绑定，只需要在data中定义变量，再将链接写在变量值，绑定变量即可，操作如下：
<div id="app"><img v-bind:src="链接" alt="" /><!-- 将data中的imgUrl动态插入到img的src属性中 --><!-- 1.完整的写法 --><img v-bind:src="imgUrl" alt="" /><!-- 2.语法糖的写法 --><img :src="imgUrl" alt="" /></div><!-- 从本地引入Vue -->
<script src="../js/vue.js"></script>
<script>const app = Vue.createApp({data() {return {imgUrl:"https://hiimg.cqqnb.net/csimage/202303/14/1678777144575.jpg",};},});app.mount("#app");
</script>

v-bind绑定class

1.基本绑定class，和绑定基本属性一样
2.动态绑定class：开发中，很多元素class都是动态绑定的
动态绑定的两种方法：

  • 对象语法
  • 数字语法

对象语法：

1.对象语法基本用法示例：

:class="{ active:true/false }；为true时就绑定了active类

再将true/false替换成data中的一个变量即变成了动态绑定（提示：动态绑定的class和普通绑定的class是可以同时并列使用的）

    <div id="app"><!-- 对象语法的基本使用{key：value},value为true时添加activ属性 --><button :class="{ active:isActive }" @click="changeColor">我是按钮</button></div><script>const app = Vue.createApp({data() {return {isActive:false,}},})app.mount('#app')</script>

做个小案例：

  • 需求：点击按钮变成红色，再点击取消红色，如此反复
  • 分析：active里设置字体为红色；为按钮绑定点击事件；点击动态绑定active

案例代码：

    <script src="../Vue3.js"></script><div id="app"><!-- 对象语法的基本使用{key：value},value为true时添加activ属性 --><button :class="{ active:isActive }" @click="changeColor">我是按钮</button></div><script>const app = Vue.createApp({data() {return {isActive:false,}},methods:{changeColor(){this.isActive = !this.isActive}}})app.mount('#app')</script>

2.对象语法多个键值对绑定

如果想同时绑定多个键值对，使用逗号分隔符分开即可，代码示例如下

      <!-- 1.对象语法的基本使用{key：value},value为true时添加activ属性 --><!-- <button :class="{ active:isActive }" @click="changeColor">我是按钮</button> --><!-- 2.对象语法的多个键值对 --><button :class="{ active:isActive,okk:true,nono:false }" @click="changeColor">我是按钮</button><!-- 上方成功添加okk和动态添加删除active属性 -->

当然了，如果这样写的话从格式上来说并不美观，可以选择将对象抽取成方法

<!-- 3.将对象抽取成方法 --><<button :class="getDynamicClasses() " @click="changeColor">我是按钮</button> <script>const app = Vue.createApp({methods:{// 下方为将对象语法抽取成键值对的操作getDynamicClasses:function(){return{active:this.isActive,okk:true,nono:false }}}})app.mount('#app')</script>

数组语法（了解）：

使用的较少，了解即可，用法如下就不过多解释了：

	<div id="app"><h2 :class="['abc', 'cba']">HELLO array</h2><h2 :class="['abc',className]"></h2></div><script>const app = Vue.createApp({data() {return {classes: "abc nba cba",className:"sevgilid"}}app.mount('#app')</script>

v-bind绑定style属性

  • 使用v-bind:style来绑定一些CSS内联样式
  • 在style后面跟上一个对象类型配合在data中定义的变量数据动态绑定style属性
  • data中配合动态绑定的变量数据名可以用驼峰式命名或短横线分隔命名 (如果是短线分割，需要用引号括起来)

用法示例：

    <div id="app"><!-- 1.普通的html写法 --><h2 style="color: red;;font-size: 25px;">哈哈哈</h2><!-- 2.style的某些值，来自data中 --><!-- 2.1动态绑定style，在后面跟上 对象类型 --><h2 :style="{ color:fontColor, 'font-size':'30px'}">嘎嘎嘎嘎嘎</h2><!-- 用驼峰，否则需要引号来识别短杠 --><h2 :style="{ color:fontColor, fontSize:'30px'}">嘎嘎嘎嘎嘎</h2></div><script>const app = Vue.createApp({data() {return {fontColor:"blue"}}})app.mount('#app')</script>

v-bind绑定对象

如果想将一个对象中的所有属性都绑定到一个元素上，怎么办呢？（如下）

  <h2 :name="name" :age="age" height="height">嘎嘎嘎嘎嘎</h2>

除了挨个绑定，更好的就是直接绑定一个对象(后面组件传参的时候非常适用)

代码示例：

  <div id="app"><h2 :name="name" :age="age" height="height">嘎嘎嘎嘎嘎</h2><!-- v-bind直接绑定一个对象:给组件传递参数 --><h2 v-bind="infos">时光如梭</h2></div><script>const app = Vue.createApp({data() {return {infos:{name:'sevgilid', age:18,height:1.88},name:'sevgilid',age:18,height:1.88}}})app.mount('#app')</script>

查看全文

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.dgrt.cn/a/2175267.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章：

在这里插入图片描述

【vue3】02-vue的模板语法

文章目录模板语法Mustache插值语法不常用基本指令（了解）常用指令：v-bindv-bind绑定基本属性v-bind绑定classv-bind绑定style属性v-bind绑定对象模板语法
React的开发模式:
React使用的jsx，所以对应的代码都是编写的类似于js的一……

编程日记2023/4/3 23:06:03

深度分析蔚来的短期、长期投资价值

来源：猛兽财经 作者：猛兽财经 尽管蔚来（NIO）在中国拥有主场优势，但其2022年第四季度业绩还是“令人非常失望”，收入和盈利均不及预期。它的竞争对手小鹏汽车（XPEV）也遇到了类似的问……

编程日记2023/4/3 23:05:52

Ipmi 之Boot Option

IPMI BOOt OPTION 简介 最近在调试ipmi 相关的boot option功能，大体的功能已经可以支持了。但是还离商业正是版本的功能还差很远。这里之前不了解是怎么个实现原理，现在清楚了，所以还是记下来吧。这个功能主要实现的就是bios和bmc可以联动的管……

编程日记2023/4/3 23:05:27

简述vue生命周期，以及每个周期做的事情？

思路：定义-> 各个阶段->阐述整体流程->结合实际
定义： 在vue组件实例被创建后，会经历一系列初始化过程，例：数据观测，模板编译，挂载实例到dom上，以及数据变化时&#xff0c……

编程日记2023/4/3 23:05:17

Servlet服务器（上篇）

今日内容
一、Servlet 二、HTTP 三、HttpServlet
零、 复习昨日 见晨考 一、Servlet
1.1 介绍 javaweb开发,就是需要服务器接收前端发送的请求,以及请求中的数据,经过处理(jdbc操作),然后向浏览器做出响应. 我们要想在服务器中写java代码来接收请求,做出响应,我们的java代码……

编程日记2023/4/3 23:05:09

Java核心技术知识点笔记—泛型程序设计（二）

1、泛型方法：
（1）定义：泛型方法的定义方式，将类型变量放在修饰符的后面，返回类型的前面。
public class TestGenericC {public <T> void test(T t) {System.out.print(t);}
}
如上，在一……

编程日记2023/4/3 23:04:55

GekkoFS – A temporary distributed file system for HPC applications

GekkoFS – A temporary distributed file system for HPC applications
Abstract—We present GekkoFS, a temporary, highly-scalable burst buffer file system which has been specifically optimized for new access patterns of data-intensive High-Performance Comput……

编程日记2023/4/3 23:04:41

Java处理JSON

Java处理json有很多种方法，在这里总结一下。
1 Jackson
Spring MVC 默认采用Jackson解析Json，出于最小依赖的考虑，也许Json解析第一选择就应该是Jackson。
1.1 引入的包
Jackson核心模块由三部分组成：jackson-core、jackson-a……

编程日记2023/4/3 23:04:32

设计模式(三十一)—-综合应用-自定义Spring框架-自定义Spring IOC-定义解析器、IOC容器相关类

3 定义解析器相关类
3.1 BeanDefinitionReader接口
BeanDefinitionReader是用来解析配置文件并在注册表中注册bean的信息。定义了两个规范： 获取注册表的功能，让外界可以通过该对象获取注册表对象。 加载配置文件，并注册bean数据。
/*** ……

编程日记2023/4/3 23:04:21

解密Android系统架构，让你的应用程序更高效

简介
Android应用程序通常包含多个组件，例如Activities，Services，Broadcast Receivers和Content Providers，这些组件共同构成了Android的四大组件架构。此外，Android还使用了一些其他的架构，例如MVP&#……

编程日记2023/4/3 23:04:10

学会这些终端快捷键，让你在Linux上的操作快100倍

🪶 简述 Linux命令行的许多快捷键与GNU/Emacs编辑器非常像，因此我十分建议可以学习学习emacs编辑器，来了解或发现更多的命令行快捷键。 点此访问emacs官网 点此访问emacs中国（论坛） 简述一下Emacs:Emacs’一切皆快捷键……

编程日记2023/4/16 14:54:43

手把手教你Temporal Fusion Transformer——Pytorch实战

建立了一个关于能源需求预测的端到端项目： 如何为 TFT 格式准备我们的数据。 如何构建、训练和评估 TFT 模型。 如何获取对验证数据和样本外预测的预测。 如何使用built-in model的可解释注意力机制计算特征重要性、季节性模式和极端事件鲁棒性。
什么是Temporal F……

编程日记2023/4/16 14:54:30

【Java开发】设计模式 12：解释器模式

1 解释器模式介绍
解释器模式是一种行为型设计模式，它提供了一种方法来解释语言、表达式或符号。
在该模式中，定义了一个表达式接口，并实现了对应的表达式类，这些类可以解释不同的符号组成的表达式，从而实现对语言的……

编程日记2023/4/16 14:54:05

反序列化渗透与攻防(五)之shiro反序列化漏洞

Shiro反序列化漏洞
Shiro介绍
Apache Shiro是一款开源安全框架，提供身份验证、授权、密码学和会话管理。Shiro框架直观、易用，同时也能提供健壮的安全性
Apache Shiro 1.2.4及以前版本中，加密的用户信息序列化后存储在名为remember-me的Cookie中。攻击者可以使用Shiro的默……

编程日记2023/4/16 14:52:13

vue2+vue3

vue2vue3尚硅谷vue2vue2 课程简介【02:24】vue2 Vue简介【17:59】vue2 Vue官网使用指南【14:07】vue2 搭建Vue开发环境【13:54】vue2 Hello小案例【22:25】了解： 不常用常用：id 更常用 简单class差值总结vue 实例vue 模板 ： 先 取 &#xff0……

编程日记2023/4/16 14:52:00

【hello Linux】环境变量

目录 1. 环境变量的概念 2. 常见的环境变量 3. 查看环境变量 4. 和环境变量相关的命令 5. 环境变量的组织方式 6. 通过代码获取环境变量 7. 通过系统调用获取环境变量 Linux🌷 在开始今天的内容之前，先来看一幅图片吧！ 不知道你们是否和我一……

编程日记2023/4/16 14:51:36

【Linux基础】常用命令整理

ls命令
-a选项，可以展示隐藏的文件和文件夹-l选项，以列表形式展示内容-h，需要和-l搭配使用，可以展示文件的大小单位ls -lah等同于la -a -l -h
cd命令（change directory）
语法：cd [Linux路径]……

编程日记2023/4/16 14:51:26

客快物流大数据项目（一百一十二）：初识Spring Cloud

文章目录
初识Spring Cloud
一、Spring Cloud简介
二、SpringCloud 基础架构图…

编程日记2023/4/16 14:51:11

C和C++中的struct有什么区别

区别一： C语言中： Struct是用户自定义数据类型（UDT）。 C语言中： Struct是抽象数据类型（ADT），支持成员函数的定义。
区别二：
C中的struct是没有权限设置的&#xff0c……

编程日记2023/4/16 14:50:59

docker的数据卷详解

数据卷 数据卷是宿主机中的一个目录或文件，当容器目录和数据卷目录绑定后，对方修改会立即同步
一个数据卷可以同时被多个容器同时挂载，一个容器也可以被挂载多个数据卷
数据卷作用：容器数据持久化 /外部机器和容器间接通信 /容器……

编程日记2023/4/16 14:50:50

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注