【vue.js】文档解读【day 1】 | 模板语法2

在这里插入图片描述

如果阅读有疑问的话,欢迎评论或私信!!
本人会很热心的阐述自己的想法!谢谢!!!

文章目录

  • 模板语法
    • JavaScript表达式
      • 仅支持表达式
      • 调用函数?
      • 受限的全局访问
    • 指令
      • 参数
      • 动态参数
        • 动态参数中 值 的限制
        • 动态参数中 语法 的限制

模板语法

JavaScript表达式

除了前面的文本插值绑定attr属性外,我们还可以直接在Vue中输入JavaScript表达式。就像下面这样:

{{ message.split('').reverse().join('') }}

仅支持表达式

但是有一个很重要的点,就是并非所有语句都可以,官方文档中说明声明语句条件控制语句都不行,并且给了一个非常简单的测试方法:在{{}}中输入return + 你要使用的JavaScript表达式,如果没有报红(也就是合法)的情况下,你就可以使用。就像下面这样:

 <p>{{ return ok ? 'YES' : 'NO' }}</p>

该代码并没有报红,在删除return之后就可以运行!

JavaScript通常用于以下两种场景:

  • {{ }}中
  • v-attr属性的值中,例如::src=" ok ? 'YES' : 'NO'"

调用函数?

受限的全局访问

在上面讲到的JavaScript支持的表达式中,我们在访问变量时,能够访问的变量通常是有限的。官方文档中提供了能够访问到的全局对象列表,同时也提供了一个自行添加全局变量的方法:

main.js

//从vue中获取createApp方法
import { createApp } from "vue";
//引入组件
import App from "./App.vue";
//使用createApp方法创建vue实例
const app = createApp(App);
//在挂载前设置全局对象
app.config.globalProperties.myName = "Jing";
//将vue实例挂载在id=app的元素上。
app.mount("#app");

App.vue

<template><p>{{ myName  }}</p>
</template>

tips:注意扩展全局对象要在挂载前设置,否则会收到vue的提示,并且无法使用该全局对象。

runtime-core.esm-bundler.js:47 [Vue warn]: Property “myName” was accessed during render but is not defined on instance.
at

指令

通过上面的学习,我们知道了vue中v-bind、v-html的使用方法。除此之外,vue提供了许多v-前缀的内置指令,这些只是一些vue提供的API,我们要通过文档了解其中的原理,就一直继续学习吧!

一个指令的任务就是可以在表达式的值变化时可以响应式的更新dom。例如文档中v-if的例子:

<p v-if="seen">Now you see me</p>

这里的v-if会根据seen的值响应式更新这个p标签

参数

在前面使用v-bind时,我们设置了HTML标签中的src、disabled属性,该属性位于v-bind:的后面。这些属性其实就是v-bind的参数,回顾一下:

<template><img :src=imgSrc ><button :disabled = disableEmpty>123</button><p>{{ myName  }}</p>
</template><script>export default{data(){var imgSrc = "/src/components/icons/newImg.gif";var disableEmpty = "";return {imgSrc,disableEmpty}}}
</script>

另外一个例子就是v-on,这个指令的任务是监听DOM时间,然后做出一些事情:

  <p v-on:click="console.log(1)" >{{ myName }}</p>

点击这个p标签时控制台会输出1。该指令也有一个语法糖:使用@表示v-on指令

动态参数

在学习动态参数时,回想以下JavaScript中对象的属性名表示有两个方法:

  • 通过obj.attribute访问对象的属性
  • 通过obj[attribute]访问对象的属性

其中第二种可以动态的访问对象的属性,也就是attribute可以是变量名。

在vue中同样可以动态的绑定指令的参数,和JavaScript类似,需要使用[ ]格式,例如:

<img :[orderSrc]="imgSrc" /><script>
export default {data() {var orderSrc = "src"return {orderSrc};},
};
</script>

上述代码中,orderSrc是动态参数,在vue实例中动态设置为src。

同样的,你也可以对一个事件名称使用动态参数,就像这样:

 <p @[orderClick]="console.log(1)" >{{ myName }}</p><script>
export default {data() {var orderClick = "click"return {orderClick};},
};
</script>

在这个代码中,orderClick可以是click focus mouseover等事件名称,具体使用参照自己的项目随机应变!

动态参数中 值 的限制

动态参数中表达式的值只能是一个字符串,或者是null,当值为null时意味这在该DOM中移除监听事件。

动态参数中 语法 的限制

动态参数中的表达式有一些语法限制,比如空格和引号等符号都是不合法的,例如官方文档中的一段示例代码:

<a :['foo' + bar]="value"> ... </a>

该代码中存在引号,不会通过编译器编译,而如果我们项目中确实需要这样的代码,我们可以使用vue中的计算属性(computed)来替换复杂的表达式。计算属性在后面将会解释。

同时,需要注意的是,在前文vue起步中的DOM 中的根组件模板板块,我们知道一种不使用vue组件,而是使用HTML文件里的模板,忘记的话可以移步至vue起步博文中回顾。在这种情况下,我们要避免使用大写字母,因为浏览器会把他强制转换为小写,例如下面这个代码:

<a :[someAttr]="value"> ... </a>

该代码中someAttr会被转换为someattr,而如果我们的vue实例中没有someattr这个属性,那么这段代码将无法正常工作。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

面试题HTML+CSS+网络+浏览器篇

文章目录 Css预处理sass less是什么&#xff1f;为什么使用他们怎么转换 less 为 css&#xff1f;重绘和回流是什么http 是什么&#xff1f;有什么特点HTTP 协议和 HTTPS 区别什么是 CSRF 攻击HTML5 新增的内容有哪些Css3 新增的特性flex VS grid清除浮动的方式有哪些&#xff…

Yolov8改进交流

YOLO v8改进 YOLOv8的改进&#xff0c;我接触的主要分为网络改进和代码改进&#xff0c;网络改进就是以注意力、主干为主&#xff0c;代码改进就是类似于Iou&#xff0c;类别权重等修改。 以下是yolov8的原始模型。 # Ultralytics YOLO &#x1f680;, AGPL-3.0 license # YO…

Tensorflow2.0+部署(tensorflow/serving)过程备忘记录Windows

Tensorflow2.0部署&#xff08;tensorflow/serving&#xff09;过程备忘记录 部署思路&#xff1a;采用Tensorflow自带的serving进模型部署&#xff0c;采用容器docker 1.首先安装docker 下载地址&#xff08;下载windows版本&#xff09;&#xff1a;https://desktop.docke…

[译]BNF 表示法:深入了解 Python 的语法

[译]BNF 表示法&#xff1a;深入了解 Python 的语法 原文&#xff1a;《BNF Notation: Dive Deeper Into Python’s Grammar》 https://realpython.com/python-bnf-notation/ 在阅读Python文档的时候&#xff0c;你可能已经遇到过BNF(Backus–Naur form)表示法&#xff1a; 下…

自动化测试摸索:python+selenium+pytest(持续更新.....)

一、环境搭建 1、python 安装 下载链接&#xff1a;Python Releases for Windows | Python.org 自己选择合适的版本下载 当下载完毕时&#xff0c;找到该安装程序&#xff1a;python-3.12.2-amd64.exe文件&#xff0c;双击启动安装向导。 为了防止C:盘文件因系统故障或者无…

鸿蒙 Stage模型-AbilityStage、Context、Want

前提&#xff1a;基于官网3.1/4.0文档。参考官网文档 基于Android开发体系来进行比较和思考。&#xff08;或有偏颇&#xff0c;自行斟酌&#xff09; 一、 AbilityStage 1.概念 AbilityStage是一个Module级别的组件容器&#xff0c;应用的HAP在首次加载时会创建一个AbilitySt…

融资项目——nacos注册中心

1.在分布式微服务架构中&#xff0c;注册中心是核心的基础服务之一。 2.服务治理的实现主要依靠的就是注册中心&#xff0c;用来进行服务的发现与注册。 一、服务注册 就是将提供某个服务的模块信息(通常是这个服务的ip和端口)注册到注册中心上去。例如B服务在某些服务器上线…

租房招聘平台新篇章:Java+SpringBoot技术革新

✍✍计算机毕业编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java、…

k8s-prometheus应用监控 23

使用prometheus监控&#xff0c;结合prometheus传递的指标&#xff0c;从而实现业务监控的自动化弹缩。 注&#xff1a;部署集群需要消耗较大的内存&#xff0c;需要提前扩容各节点的内存量至少达到4g 部署一个用于被监控的应用 上传所需镜像 修改yaml文件 部署完成 没有就绪是…

Linux检查软件信息及Linux清理日志等功能

提示:工具下载链接在文章最后 目录 一.ywtool check命令1.1 ywtool check -I1.2 ywtool check all1.3 ywtool check io1.4 ywtool check elk1.5 ywtool check php1.6 ywtool check mysql1.7 ywtool check nginx1.8 ywtool check system1.9 ywtool check docker_nbip [容器名称]…

MyCAT集群——MyCAT2如何配置读写分离

先搭载MySQL一主两从 192.168.20.110MyCAT192.168.20.111Master192.168.20.112slave1192.168.20.113slave2 配置就不写了&#xff0c;比较基础&#xff0c;写一下步骤 1.进入mysql配置文件或者其子配置文件&#xff0c;添加server_id,开启gtidgtid_modeON,enforce-gtid-cons…

STM32:CAN功能板设计和调试

0前言 本文主要目的是&#xff0c;总结去年设计stm32-CAN板子过程中遇到的问题&#xff0c;分为keil嵌入式软件和嘉立创EDA设计两个部分。 1 STM32F1 CAN功能 keil expected a “}“ 问题在于&#xff0c;PCB使用芯片为stm32f103c8t6&#xff0c;下载程序时选择device默认此…

项目部署发布

目录 上传数据库 修改代码中的数据源配置 修改配置文件中的日志级别和日志目录 打包程序 ​编辑​编辑 上传程序 查看进程是否在运行 以及端口 云服务器开放端口(项目所需要的端口) 上传数据库 通过xshell控制服务器 创建目录 mkdir bit_forum 然后进入该目录 查看路…

012 Linux_线程控制

前言 本文将会向你介绍线程控制&#xff08;创建&#xff08;请见上文&#xff09;&#xff0c;终止&#xff0c;等待&#xff0c;分离&#xff09; 线程控制 线程终止 pthread_t pthread_self(void); 获取线程自身的ID 如果需要只终止某个线程而不终止整个进程,可以有三种…

【C语言】Leetcode 206.反转链表

博主主页&#xff1a;17_Kevin-CSDN博客 收录专栏&#xff1a;《Leetcode》 题目 解决思路 思路一&#xff1a;翻转链表 struct ListNode* reverseList(struct ListNode* head) {if(head NULL){return NULL;}struct ListNode* n1 NULL,*n2 head,*n3 n2 -> next;while(…

线上问题——学习记录幂等判断失效问题分析

一、业务流程 上图是对save和saveScore两个接口的流程抽象&#xff0c;save是上传答题数据&#xff0c;saveScore则是上传答题分数&#xff0c;为保证幂等和防止并发调用&#xff0c;这两个接口都加了分布式锁&#xff08;还是两层哦&#xff09;。第一层使用的是不同的锁&…

【笔记】Android 漫游定制SPN定制有关字段

一、SPN模块简介 【笔记】SPN和PLMN 运营商网络名称显示 Android U 配置 WiFiCalling 场景下PLMN/SPN 显示的代码逻辑介绍 【笔记】Android Telephony 漫游SPN显示定制&#xff08;Roaming Alpha Tag&#xff09; 二、相关配置字段 non_roaming_operator_string_array 是否…

共筑前端学习之路:欢迎加入我们的前端组件学习交流群

共筑前端学习之路&#xff1a;欢迎加入我们的前端组件学习交流群 随着信息技术的飞速发展&#xff0c;前端开发作为构建数字化世界的重要一环&#xff0c;越来越受到广大开发者的关注和重视。为了更好地服务于前端开发者&#xff0c;尤其是那些对前端组件充满热情的粉丝&#x…

【Leetcode每日一题】 前缀和 - 除自身以外数组的乘积(难度⭐⭐)(26)

1. 题目解析 题目链接&#xff1a;238. 除自身以外数组的乘积 这个问题的理解其实相当简单&#xff0c;只需看一下示例&#xff0c;基本就能明白其含义了。 核心在于计算题目所给数组除本身外其他元素的积的数组返回即可。 2. 算法原理 为了计算每个位置i的最终结果ret[i]&…

基于java springboot+redis网上水果超市商城设计和实现以及文档

基于java springbootredis网上水果超市商城设计和实现以及文档 博主介绍&#xff1a;多年java开发经验&#xff0c;专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞 收藏 ⭐留…