2.1、模版语法
2.1.1、插值语法
1、代码示例
<body><!-- 准备容器 --><div id="app"><!-- 在data中声明的 --><!--1、 data中声明的变量 --><h1>{{msg}}</h1><h1>{{sayHello()}}</h1><!-- 不在data中的变量不可以 --><!-- <h1>{{i}}</h1> --><!-- <h1>{{sum()}}</h1> --><!-- 2、常量 --><h1>{{100}}</h1><h1>{{'hello vue!'}}</h1><h1>{{3.14}}</h1><!--3、 javascript表达式 --><h1>{{1 + 1}}</h1><h1>{{msg + 1}}</h1><h1>{{'msg' + 1}}</h1><h1>{{gender ? '男' : '女'}}</h1><h1>{{number + 1}}</h1><h1>{{msg.split('').reverse().join('')}}</h1><!-- 错误的：不是表达式，这是语句。 --><!-- <h1>{{var i = 100}}</h1> --><!-- 4、在白名单里面的 --><h1>{{Date}}</h1><h1>{{Date.now()}}</h1><h1>{{Math}}</h1><h1>{{Math.ceil(3.14)}}</h1></div><!-- vue程序 --><script>// 用户自定义的一个全局变量var i = 100;// 用户自定义的一个全局函数function sum() {console.log("sum.....");}new Vue({el: "#app",data: {number: 1,gender: true,msg: "abcdef", // msg是在data中声明的变量sayHello: function () {console.log("hello vue!");},},});</script></body>2、代码总结
{{可以写什么}}
- data中声明的变量，函数，数组，等都可以
- 常量
- 只要是合法的javascript表达式都可以，注意js语句不行，赋值语句，if，for等
- 模版表达式都被放在沙盒中，只能访问全局变量的一个白名单，如：Math和Date
'Infinity,undefined,NaN,isFinite,isNaN,'
'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,'
'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,'
'require'
2.1.2、指令语法
1. 什么是指令？有什么作用？
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
2. Vue框架中的所有指令的名字都以“v-”开始。
3. 插值是写在标签体当中的，那么指令写在哪里呢？
Vue框架中所有的指令都是以HTML标签的属性形式存在的，
例如：<span 指令是写在这里的>{{这里是插值语法的位置}}</span>
注意：虽然指令是写在标签的属性位置上，但是这个指令浏览器是无法直接看懂的。是需要先让Vue框架进行编译的，编译之后的内容浏览器是可以看懂的。
4. 指令的语法规则：
完整的语法格式：
<HTML标签 v-指令名:参数="javascript表达式"></HTML标签>
javascript表达式：
之前在插值语法中{{这里可以写什么}}，那么指令中的表达式就可以写什么，当然{{}}不需要写
不是所有的指令都有参数和表达式：
有的指令，不需要参数，也不需要表达式，例如：v-once
有的指令，不需要参数，但是需要表达式，例如：v-if="表达式"
有的指令，既需要参数，又需要表达式，例如：v-bind:参数="表达式"
5. v-once 指令
作用：只渲染元素一次。随后的重新渲染，元素及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
6. v-if="表达式" 指令
作用：表达式的执行结果需要是一个布尔类型的数据：true或者false
true：这个指令所在的标签，会被渲染到浏览器当中。
false：这个指令所在的标签，不会被渲染到浏览器当中。
<body><!-- 准备一个容器 --><div id="app"><h1>{{msg}}</h1><!-- 只会渲染一次，msg更改数据，也不会再次渲染 --><h1 v-once>{{msg}}</h1><h1 v-if="a > b">v-if测试：你看我出不出现</h1></div><!-- vue程序 --><script>new Vue({el: "#app",data: {msg: "Hello Vue!",a: 10,b: 11,},});</script></body>2.1.3、v-bind指令详解
1. 这个指令是干啥的？
它可以让HTML标签的某个属性的值产生动态的效果。
2. v-bind指令的语法格式：
<HTML标签 v-bind:参数="表达式"></HTML标签>
3. v-bind指令的编译原理？
编译前：
<HTML标签 v-bind:参数="表达式"></HTML标签>
编译后：
<HTML标签 参数="表达式的执行结果"></HTML标签>
注意两项：
第一：在编译的时候v-bind后面的“参数名”会被编译为HTML标签的“属性名”
第二：表达式会关联data，当data发生改变之后，表达式的执行结果就会发生变化。所以，连带的就会产生动态效果。
4. v-bind因为很常用，所以Vue框架对该指令提供了一种简写方式：
只是针对v-bind提供了以下简写方式：
<img :src="imgPath">
5. 什么时候使用插值语法？什么时候使用指令？
凡是标签体当中的内容要想动态，需要使用插值语法。
只要向让HTML标签的属性动态，需要使用指令语法。
<body><!-- 准备一个容器 --><div id="app"><!-- 注意：以下代码中 msg 是变量名。 --><!-- 注意：原则上v-bind指令后面的这个参数名可以随便写。 --><!-- 虽然可以随便写，但大部分情况下，这个参数名还是需要写成该HTML标签支持的属性名。这样才会有意义。 --><span v-bind:xyz="msg"></span><!-- 这个表达式带有单引号，这个'msg'就不是变量了，是常量。 --><span v-bind:xyz="'msg'"></span><!-- v-bind实战 --><img src="../img/1.jpg" /> <br /><img v-bind:src="imgPath" /> <br /><!-- v-bind简写形式 --><img :src="imgPath" /> <br /><!-- 这是一个普通的文本框 --><input type="text" name="username" value="zhangsan" /> <br /><!-- 以下文本框可以让value这个数据变成动态的：这个就是典型的动态数据绑定。 --><input type="text" name="username" :value="username" /> <br /><!-- 使用v-bind也可以让超链接的地址动态 --><a href="https://www.baidu.com">百度1</a> <br /><a :href="url">百度2</a> <br /><!-- 不能采用以下写法，会报错--><!-- <a href="{{url}}">百度3</a> --></div><!-- vue程序 --><script>new Vue({el: "#app",data: {msg: "Hello Vue!",imgPath: "../img/1.jpg",username: "章三",url: "https://www.baidu.com",},});</script></body>2.1.4、 v-model详解
1. v-bind和v-model这两个指令都可以完成数据绑定。
2. v-bind是单向数据绑定。
data ===> 视图
3. v-model是双向数据绑定。
data <===> 视图
4. v-bind可以使用在任何HTML标签当中。
v-model只能使用在表单类元素上，例如：input标签、select标签、textarea标签。
为什么v-model的使用会有这个限制呢？
因为表单类的元素才能给用户提供交互输入的界面。v-model指令通常也是用在value属性上面的。
5. v-bind和v-model都有简写方式：
v-bind简写方式：
v-bind:参数="表达式" 简写为 :参数="表达式"
v-model简写方式：
v-model:value="表达式" 简写为 v-model="表达式"
<body><!-- 准备一个容器 --><div id="app"><!-- 完整写法 -->v-bind指令：<input type="text" v-bind:value="name1" /><br />v-model指令：<input type="text" v-model:value="name2" /><br /><!-- 报错了，v-model不能使用在这种元素上。 --><!-- <a v-model:href="url">百度</a> --><!-- 简写 -->v-bind指令：<input type="text" :value="name1" /><br />v-model指令：<input type="text" v-model="name2" /><br /><!-- 联动改变 -->v-bind消息1：<input type="text" :value="msg" /><br />v-model消息2：<input type="text" v-model="msg" /><br /></div><!-- vue程序 --><script>new Vue({el: "#app",data: {name1: "zhangsan",name2: "wangwu",url: "https://www.baidu.com",msg: "Hello Vue!",},});</script></body>2.15、用户片段
安装插件：JavaScript (ES6) code snippets
为JavaScript、TypeScript、HTML、React和Vue提供了ES6的语法支持。
第一步：
第二步：
第三步：配置片段
html.json中设置html环境下的代码片段
// 配置信息
"Print to console": {// 给片段设置的简写"prefix": "log",// 配置片段"body": [// ,分割开每行代码 $1 鼠标聚焦的地方 "console.log('$1');","$2"],// 片段描述信息（可删除）"description": "Log output to console"
}具体配置如下：
{"h5 template": {"prefix": "vv", // 对应的是使用这个模板的快捷键"body": ["<!DOCTYPE html>","<html lang=\"en\">","<head>","\t<meta charset=\"UTF-8\">","\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">","\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">","\t<title>Document</title>","\t<script src='https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js'></script>","</head>\n","<body>","\t<div id =\"root\"> </div>\n","\t<script>","\tVue.config.productionTip = false//阻止vue 在启动时生成生产提示","\t var vm = new Vue({","\t\tel: '#root',","\t\tdata() {return{}},","\t\tmethods: {}","\t });","\t</script>","</body>\n","</html>"],"description": "vue学习模版" // 模板的描述}
}在javascript.json 中配置js的片段
// 配置信息"create vue instance": {// 给片段设置的简写"prefix": "v1",// 配置片段"body": ["\t var vm = new Vue({","\t\tel: '#root',","\t\tdata: {'$1'},","\t });",],// 片段描述信息（可删除）"description": "vm"},相关文章：
2.1、模版语法
2.1.1、插值语法 1、代码示例 <body><!-- 准备容器 --><div id"app"><!-- 在data中声明的 --><!--1、 data中声明的变量 --><h1>{{msg}}</h1><h1>{{sayHello()}}</h1><!-- 不在data中的变量不可以 -->…...
最小二乘法拟合出二阶响应面近似模型
背景：根据样本试验数据拟合出二阶响应面近似模型（正交二次型），并使用决定系数R和调整的决定系数R_adj来判断二阶响应面模型的拟合精度。 1、样本数据（来源：硕士论文《航空发动机用W形金属密封环密封性能分析…...
【汽车】-- 常见的汽车悬挂系统
汽车悬挂系统是车辆的重要组成部分，其主要功能是连接车轮和车身，减缓路面颠簸对车身的影响，提高行驶的平顺性、舒适性和操控性。以下是常见的汽车悬挂系统类型及其特点： 1. 独立悬挂系统 每个车轮可以独立上下运动，不…...
VMware Workstation Pro 17 下载 以及 安装 Ubuntu 20.04.6 Ubuntu 启用 root 登录
1、个人免费版本 VMware Workstation Pro 17 下载链接怎么找？直接咕咕 VMware 找到如下链接。链接如下：Workstation 和 Fusion 对个人使用完全免费，企业许可转向订阅 - VMware 中文博客 点进去链接之后你会看到如下，注意安装之后仍…...
记录ubuntu22.04重启以后无法获取IP地址的问题处理方案
现象描述：我的虚拟机网络设置为桥接模式，输入ifconfig只显示127.0.0.1，不能连上外网。，且无法上网，用ifconfig只有如下显示： 1、sudo -i切换为root用户 2、输入dhclient -v 再输入ifconfig就可以看到多了…...
linux 删除系统特殊的的用户帐号
禁止所有默认的被操作系统本身启动的且不需要的帐号，当你第一次装上系统时就应该做此检查，Linux提供了各种帐号,你可能不需要，如果你不需要这个帐号,就移走它，你有的帐号越多,就越容易受到攻击。 1.为删除你系统上的用户,用下面的…...
core Webapi jwt 认证
core cookie 验证 Web API Jwt 》》》》用户信息 namespace WebAPI001.Coms {public class Account{public string UserName { get; set; }public string UserPassword { get; set; }public string UserRole { get; set; }} }》》》获取jwt类 using Microsoft.AspNetCore.Mvc…...
【Redis】Redis基础——Redis的安装及启动
一、初识Redis 1. 认识NoSQL 数据结构：对于SQL来说，表是有结构的，如字段约束、字段存储大小等。 关联性：SQL 的关联性体现在两张表之间可以通过外键，将两张表的数据关联查询出完整的数据。 查询方式： 2.…...
Oracle Recovery Tools工具一键解决ORA-00376 ORA-01110故障（文件offline）---惜分飞
客户在win上面迁移数据文件,由于原库非归档,结果导致有两个文件scn不一致,无法打开库,结果他们选择offline文件,然后打开数据库 Wed Dec 04 14:06:04 2024 alter database open Errors in file d:\app\administrator\diag\rdbms\orcl\orcl\trace\orcl_ora_6056.trc: ORA-01113:…...
常用环境部署(二十四)——Docker部署开源物联网平台Thingsboard
1、Docker和Docker-compose安装 参考网址如下： CENTOS8.0安装DOCKER&DOCKER-COMPOSE以及常见报错解决_centos8安装docker-compose-CSDN博客 2、 Thingsboard安装 （1）在/home目录下创建docker-compose.yml文件 vim /home/docker-com…...
SqlServer Doris Flink SQL 类型映射关系
SqlServer 对应 Flink SQL 数据类型映射关系 SQL Server TypeFlink SQL Typechar(n)CHAR(n)varchar(n)VARCHAR(n)nvarchar(n)VARCHAR(n)nchar(n)VARCHAR(n)textSTRINGntextSTRINGxmlSTRINGdecimal(p, s)DECIMAL(p, s)moneyDECIMAL(p, s)smallmoneyDECIMAL(p, s)numericNUMERIC…...
Java 中的方法重写
在 Java 中，方法重写（Method Overriding）是面向对象编程的一个重要概念，它指的是子类中存在一个与父类中相同名称、相同参数列表和相同返回类型的方法。方法重写使得子类可以提供特定的实现，从而覆盖（或改变…...
v-for遍历多个el-popover；el-popover通过visible控制显隐；点击其他隐藏el-popover
场景：el-popover通过visible控制显隐；同时el-popover是遍历生成的多个。 原文档的使用visible后就不能点击其他地方使其隐藏;同时解决实现点击其他区域隐藏 <template><div><template v-for="(item,index) in arr" :key="index"><…...
从 Excel 文件中读取数据生成 SQL 语句[快捷main方法]
从 Excel 文件中读取数据生成 SQL 语句的实现 在日常工作中，我们经常需要从 Excel 文件中提取数据，并将其转换为 SQL 插入语句，以便于将数据导入到数据库中。在这篇文章中，我将展示如何使用 Java 来实现这一需求。 项目需求 我…...
从0到1实现项目Docker编排部署
在深入讨论 Docker 编排之前，首先让我们了解一下 Docker 技术本身。Docker 是一个开源平台，旨在帮助开发者自动化应用程序的部署、扩展和管理。自 2013 年推出以来，Docker 迅速发展成为现代软件开发和运维领域不可或缺的重要工具。 Docker 采…...
Vue框架入门
Author：Dawn_T17?? 目录 什么是框架 一.Vue 的使用方向 二.Vue 框架的使用场景 （TIP）MVVM思想 三.Vue入门案例 TIP：插值表达式 四.Vue-指令? （1）v-bind 和 v-model? ? （2&#x…...
vue入门实战（二）父子组件显示，参数传递
经过上次的写法，我们已经写出每个list项，现在要在每个父组件下面加入自己的子项 一、新建子组件： smallItem.vue： <script> export default{props:[text,id,status] //父组件传来的参数 } </script> <template>…...
【Linux】Ubuntu：安装系统后配置
hostname：更改主机名 打开终端。 使用hostnamectl命令更改主机名。 sudo hostnamectl set-hostname 新的主机名你可以使用hostnamectl 命令来验证更改是否成功： hostnamectlChrome：更换默认浏览器 以下是从 Ubuntu 中移除预装的 Snap 版 Fi…...
springboot-查看版本和版本所需JDK
文章目录 访问spring管网查看springboot 项目查看当前版本查看版本所需JDK 访问spring管网 https://spring.io/ 查看springboot 项目 查看当前版本 点击调整到参考文档中去… 查看版本所需JDK...
fuxa搭建与使用（web组态）
1. 安装Node.js -> npm安装 参考网址：https://blog.csdn.net/WHF__/article/details/129362462 一、安装运行 C:WINDOWSsystem32>node -v v20.17.0 C:WINDOWSsystem32>npm -v 10.8.2 二、环境配置 在安装路径（D:Program_Files odejs&#x…...
Python｜GIF 解析与构建（5）：手搓截屏和帧率控制
目录 Python｜GIF 解析与构建（5）：手搓截屏和帧率控制 一、引言 二、技术实现：手搓截屏模块 2.1 核心原理 2.2 代码解析：ScreenshotData类 2.2.1 截图函数：capture_screen 三、技术实现&…...
基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销，平衡网络负载，延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 （FL） 支持跨分布式客户端进行协作模型训练，而无需共享原始数据，这使其成为在互联和自动驾驶汽车 （CAV） 等领域保护隐私的机器学习的一种很有前途的方法。然而，最近的研究表明&…...
UE5 学习系列（三）创建和移动物体
这篇博客是该系列的第三篇，是在之前两篇博客的基础上展开，主要介绍如何在操作界面中创建和拖动物体，这篇博客跟随的视频链接如下： B 站视频：s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用
1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...
Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...
【Go语言基础【13】】函数、闭包、方法
文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数（函数作为参数、返回值） 三、匿名函数与闭包1. 匿名函数（Lambda函…...
如何更改默认 Crontab 编辑器 ？
在 Linux 领域中，crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用，用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益，允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...
【Linux】Linux安装并配置RabbitMQ
目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的，需要先安…...
React父子组件通信：Props怎么用？如何从父组件向子组件传递数据？
系列回顾： 在上一篇《React核心概念：State是什么？》中，我们学习了如何使用useState让一个组件拥有自己的内部数据（State），并通过一个计数器案例，实现了组件的自我更新。这很棒&#…...