VUE 基础(一)

(直接在vscode上运行就可以,建一个html文件)

1 el的使用

Vue会管理el选项命中的元素及其内部的后代元素 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>{{message}}<div id="app">{{message}}</div>//导入环境开发版本<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app=new Vue({el:"#app", //与id=app相对应data:{message:"黑啊吗"}})</script>
</body>
</html>

只在作用范围内有效果,外面的message不受影响 当然除了id选择器也可以选择使用其他选择器(建议使用id选择器)

注:不能使用在html和body上,不会产生任何效果

2 data:用于存储多种数据类型,用于调取

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">{{message}}<h2>{{school}}</h2>  //获取全部元素<h2>{{school.name}}</h2>  //获取部分元素<ul><li>{{campus}} </li> //获取数组<li>{{campus[0]}} </li>  //获取部分</ul></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{message:"黑啊吗",school:{name:"黑马",tel:"154545",},campus:["背景","图片"]}})</script>
</body>
</html>

3 v-text:设置标签的文本值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><h2 >深圳{{message+"!"}} </h2><h2 v-text="message+'!'"></h2><h2 v-text="message+info"></h2></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{message:"河面",info:"你好"}})</script>
</body>
</html>

使用数据格式是 v-text=" " 引号里面添加引用的数据的名称,如果直接使用v-text的话 标签的内容会全部被替换  所以常用第二种方法 +用来拼接前后的内容,同时也可以用+拼接数据

4 v-html:设置标签的innerHTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><p v-html="content"></p><p v-html="content1"></p></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{content:"黑马程序员",content1:"<a href=http://www.baidu.com>黑马程序员</a>"}})</script>
</body>
</html>

v-html与v-text:如果只是单纯文本框内容使用v-text 如果需要进行渲染则使用v-html

5 v-on:为元素绑定事件

   格式: v-on:事件名=”方法"(可以将v-on:变换成@)

   绑定的方法放在methods中

   具体事件的详细总结可以看:  Vue 中常用的事件总结( 事件的概念 +事件要素+事件修饰符)_vue 事件-CSDN博客

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><input type="button" value="v-on指令" @click="doIt">  //简写方式<input type="button" value="v-on指令" v-on:click="doIt">  //一般方式</div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app=new Vue({el:"#app",methods: {doIt:function(){alert("1111")}},})</script>
</body>
</html>

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

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

相关文章

第三部分 图论 - 第2章 最小生成树

定义 首先我们先了解下生成树的定义&#xff1a; 无向图中&#xff0c;一个连通图的最小连通子图称作该图的生成树&#xff08;不能带环&#xff0c;保持连通&#xff0c;但边要尽可能的少&#xff09;。 有n个顶点的连通图的生成树有n个顶点和n-1条边。 那么最小生成树和生成…

自动驾驶 机器人 slam 定位

自动驾驶机器人中的SLAM&#xff08;Simultaneous Localization and Mapping&#xff0c;同时定位与地图构建&#xff09;技术是一种关键技术&#xff0c;旨在使机器人在未知环境中自主导航。SLAM技术涉及机器人在移动过程中通过传感器&#xff08;如激光雷达、摄像头、IMU等&a…

决策树 和 集成学习、随机森林

决策树是非参数学习算法&#xff0c;可以解决分类问题&#xff0c;天然可以解决多分类问题&#xff08;不同于逻辑回归或者SVM&#xff0c;需要通过OVR&#xff0c;OVO的方法&#xff09;&#xff0c;也可以解决回归问题&#xff0c;甚至是多输出任务&#xff0c;并且决策树有非…

国内NAT服务器docker方式搭建rustdesk服务

前言 如果遇到10054,就不要设置id服务器!!! 由于遇到大带宽,但是又贵,所以就NAT的啦,但是只有ipv4共享和一个ipv6,带宽50MB(活动免费会升130MB~) https://bigchick.xyz/aff.php?aff322 月付-5 循环 &#xff1a;CM-CQ-Monthly-5 年付-60循环&#xff1a;CM-CQ-Annually-60官方…

数据结构第三讲:单链表的实现

数据结构第三讲&#xff1a;单链表的实现 1.什么是单链表2. 节点3.单链表的实现3.1节点的结构3.2打印单链表3.3申请一个新节点3.4单链表尾部插入3.5单链表头部插入3.6单链表的尾部删除3.7单链表头部删除3.8查找3.9在指定位置之前插入数据3.10在指定位置之后插入数据3.11删除pos…

爬虫基本库的使用之使用urllib

在Python的爬虫开发领域&#xff0c;urllib是一个非常重要的基础库。它提供了丰富的接口来发送HTTP请求并处理响应&#xff0c;非常适合初学者以及需要快速实现HTTP请求的开发者。本文将详细介绍如何使用urllib库进行基本的网络爬虫开发。 1、urllib库简介 urllib是Python标准…

安装依赖 npm install idealTree:lib: sill idealTree buildDeps 卡着不动

我一直怀疑是网络问题&#xff0c;因为等了很久也能安装成功&#xff0c;就是时间比较长&#xff0c;直到现在完全受不了了&#xff0c;决定好好整治下这个问题&#xff01; 1、执行命令 npm config get userconfig 查看配置文件所在位置&#xff0c;将其删除。 2、执行 n…

VS+opencv+环境配置

下载opencv库。 版本 - OpenCV 下载完了是一个exe文件&#xff0c;&#xff08;可以更换目录&#xff09;直接双击&#xff0c;也就是压缩。 vs配置&#xff1a; 调试-调试属性 点编辑&#xff0c;加入这两个&#xff0c;路径根据自己的opencv库 3、链接器 测试&#xff1a;…

在Postman中引用JS库

前言 在做接口测试时&#xff0c;出于安全因素&#xff0c;请求参数需要做加密或者加上签名才能正常请求&#xff0c;例如&#xff1a;根据填写的请求参数进行hash计算进行签名。postman作为主流的接口调试工具也是支持请求预处理的&#xff0c;即在请求前使用JavaScript脚本对…

windows SSH免密连接ubuntu

前提windows 和linux系统都安装了openssh服务 Linux&#xff08;安装OPENSSH服务&#xff09;&#xff1a;sudo apt-get install openssh-server Windows&#xff1a;自己百度吧 1.生成Windows公钥 Windows的CMD中执行&#xff1a;ssh-keygen -t rsa&#xff0c;执行过程中直接…

Linux编程:使用 strip 命令优化 ELF 文件大小

0. 概要 在软件开发过程中&#xff0c;经常需要处理各种各样的可执行文件和共享库。 为了提高系统的性能和减少磁盘占用空间&#xff0c;我们可能会对这些文件进行优化。其中之一就是使用 strip 命令来移除 ELF (Executable and Linkable Format) 文件中的非必要数据。 本文将…

Conda与Docker:打造无缝开发环境

Conda与Docker&#xff1a;打造无缝开发环境 在现代软件开发中&#xff0c;容器化技术已经成为一种趋势&#xff0c;它能够为应用提供一个一致的运行环境&#xff0c;无论在何处部署。Docker是实现容器化的首选工具之一。而Conda&#xff0c;作为Python和其他科学计算软件的包…

Redis:AOF持久化

1. 简介 以日志的形式来记录每个写操作&#xff0c;将redis执行的每个写操作记录下来&#xff08;读操作不记录&#xff09;&#xff0c;只需追加文件但不可以改写文件&#xff0c;redis启动之初会重新构建数据&#xff0c;即redis重启后会将日志中的所有写指令重新执行一遍以达…

扰动观测器DOB设计及其MATLAB/Simulink实现

扰动观测器(Disturbance Observer, DOB)是一种在控制系统中用于估计和补偿未知扰动的重要工具,以增强系统的鲁棒性和稳定性。其设计过程涉及系统建模、观测器结构设计以及控制律的调整。 扰动观测器设计原理 系统建模: 首先,需要建立被控对象的数学模型,明确系统的状态变…

APP重启 - C#小函数类推荐

此文记录的是一个应用程序重启的函数。 /***应用程序重启动Austin Liu 刘恒辉Project Manager and Software DesignerE-Mail: lzhdim163.comBlog: http://lzhdim.cnblogs.comDate: 2024-01-15 15:18:00使用方法&#xff1a;AppUtil.RestartApplication(Application.Executa…

2024第八届全国职工职业技能大赛“网络与信息安全管理员”赛项技术文件及任务书

2024第八届全国职工职业技能大赛“网络与信息安全管理员”赛项技术文件及任务书 一、赛项概述&#xff1a;二、竞赛形式&#xff1a;三、竞赛规则四、竞赛样题4.1、第一场4.1.2、实操闯关赛4.2、第二场4.3、第三场 需要培训可以私信博主 欢迎交流学习&#xff01; [X] &#x1…

【深入理解SpringCloud微服务】深入理解nacos

【深入理解SpringCloud微服务】深入理解nacos Nacos服务注册内存注册表内存注册表的更新通知客户端服务变更、服务同步、健康检查2.x版本nacos的变化 Nacos服务注册 spring-cloud-alibaba-nacos-discovery通过实现spring-cloud-commons规范定义的接口&#xff0c;完成nacos接入…

昇思25天学习打卡营第11天|xiaoyushao

今天分享ResNet50迁移学习。 在实际应用场景中&#xff0c;由于训练数据集不足&#xff0c;所以很少有人会从头开始训练整个网络。普遍的做法是&#xff0c;在一个非常大的基础数据集上训练得到一个预训练模型&#xff0c;然后使用该模型来初始化网络的权重参数或作为固定特征提…

IT服务运营过程中的资源要素管理(至简)

在IT服务运营管理过程中&#xff0c;所有资源要投入正式、连续、稳定运行&#xff0c;要保持规范化的管理和标准化的操作&#xff0c;具体包括工具管理、知识管理、服务台管理与评价、备件库管理等内容。 一、工具管理 1、工具的基本运营。见下表&#xff1a; 工具的基本运营…

论文阅读:Deep_Generic_Dynamic_Object_Detection_Based_on_Dynamic_Grid_Maps

目录 概要 Motivation 整体框架流程 技术细节 小结 不足 论文地址&#xff1a;Deep Generic Dynamic Object Detection Based on Dynamic Grid Maps | IEEE Conference Publication | IEEE Xplore 概要 该文章提出了一种基于动态网格图&#xff08;Dynamic Grid Maps&a…