Vue2.Hello World
步骤:
- 准备容器
- 引包(开发版本/生产版本)
- 创建实例
new Vue()
- 添加配置项
el
指定挂载点data
提供数据
准备容器
就是新建一个div标签
引包
vue2版本中文文档:https://v2.cn.vuejs.org/v2/guide/
尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它,跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件,然后通过如下方式引入 Vue:
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
或者:
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
我目前也是初学者,所以我导入开发环境版本。
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
创建实例
先实现一个最基本的helloworld。
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">{{ message }}
</div>
<script>const app=new Vue({//通过el配置选择器,指定vue管理的是哪个盒子el:'#app',//通过data提供数据data:{message:'hello world'}})
</script>
我写的div标签是在两个js脚本之间。
实际上,div只要放在最后一个会修改它的script
脚本之前就可以。
插值表达式
作用:利用表达式进行插值,渲染到页面中
表达式:可以被求值的代码
语法:{{表达式}}
支持的是表达式,不是语句,比如if
和for
。
不能在标签属性中使用插值表达式。
VSCode分栏显示
这需要安装扩展Live Preview
。
直接在扩展商店搜索即可。
使用的数据需要存在
如果使用了不存在数据,会报未定义的错误。
响应式数据
响应式:数据改变,视图会自动更新。
data中的数据会被添加到实例上:
访问数据,通过:实例名.属性名
修改数据,通过:实例名.属性名=新值
通过控制台命令修改
app.message
'hello world'
app.message="HelloWorld"
'HelloWorld'
截图
Vue调试插件
这个软件可以直接在edge加载项中搜索。
如果是chrome,应用商店也有。
添加之后可以直接在Vue栏修改数据。
Vue指令
更多指令详见文档:https://v2.cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4
v-html
插值表达式不能用在标签属性中,意味着标签属性和类型不能修改。
如果想要修改。可以用vue指令实现这个需求。
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">{{ message }}<div v-html="msg"></div>
</div><script>const app = new Vue({//通过el配置选择器,指定vue管理的是哪个盒子el: '#app',//通过data提供数据data: {message: 'hello world',msg: "<h1>Hello World</h1>"}})
</script>
需要注意,<div v-html="msg"></div>
标签需要在<div id="app">
标签之内才能被选择。
可见,v-html
指令的作用就是把data
中msg
指向的字符串,按html
富文本解释一下。
v-show/v-if
v-show
:
- 作用:控制元素显示隐藏
- 通过
css
的display:none
来控制显示隐藏。
v-if
:
- 作用:控制元素显示隐藏(条件渲染)
- 控制元素的创建和移除。
表达式值为false时,v-show
标签仍然存在,css属性为style="display: none;"
。
v-if
标签已经从源代码中被移除。
相关文章:
Vue2.Hello World
步骤: 准备容器引包(开发版本/生产版本)创建实例new Vue()添加配置项 el指定挂载点data提供数据 准备容器 就是新建一个div标签 引包 vue2版本中文文档:https://v2.cn.vuejs.org/v2/guide/ 尝试 Vue.js 最简单的方法是使用 …...
【单片机项目实战】温度控制系统
本项目的主要作用是实现温度调控,通过设定一个预定的温度值,实现实时检测外界温度,当外界温度小于预定值时,电机正转,实现降温效果;当外界温度大于预定值时,电机反转,实现升温效果&a…...
SpringMVC-视图
SpringMVC中的视图实现了View接口,作用是渲染数据,将Model中的数据展示给用户。render是渲染方法,可以看到渲染的视图是一个View类型的对象。 SpringMVC视图的种类有很多,默认有转发视图和重定向视图。 如果配置了Thymeleaf视图解…...
【React系列】Hook(一)基本使用
本文来自#React系列教程:https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNA&actiongetalbum&album_id1566025152667107329) 一. 认识hook 1.1. 为什么需要hook Hook 是 React 16.8 的新增特性,它可以让我们在不编写class的情况下…...
算法训练营Day28
#Java #贪心 开源学习资料 Feeling and experiences: 这周来到了贪心算法,简要概述: 贪心算法是一种在每个步骤中都采取最优解(即,在当前看来最好的解)的算法设计策略。它通常用于求解优化问题。这种方…...
鸿蒙OS应用开发之日期选择
前面学习了时间选择组件,实现了时间的选择,这样非常方便用户进行时间的输入,通过手动就可以输入时间,比直接文本输入要省不少时间,特别对于手机这样单手操作的设备,更加重要了。因此,日期的输入工作也不能落后,本文将要学习日期选择组件,这样就可以实现日期通过手上下…...
Mysql 查看表注释或字段注释
查看所有表的注释 SELECT table_name 表名, table_comment 表说明 FROM information_schema.TABLES WHERE table_schema ‘数据库名’ ORDER BY table_name 查询所有表及字段的注释 SELECT a.table_name 表名, a.table_comment 表说明, b.COLUMN_NAME 字段名, b.column_commen…...
MySQL InnoDB引擎
1、逻辑存储结构 2、架构 a. 内存结构 Change Buffer的意义是什么? 与聚集索引不同,二级索引通常是非唯一的,并且以相对随机的顺序插入二级索引。同样,删除和更新可能会影响索引树中不相邻的二级索引页,如果每一次都操作磁盘&am…...
C++完成Query执行sql语句的接口封装和测试
1、在LXMysql.h 创建Query执行函数 //封装 执行sql语句 if sqllen 0 strlen获取字符长度bool Query(const char*sql,unsigned long sqllen0); 2、在LXMysql.cpp编写函数 bool LXMysql::Query(const char* sql, unsigned long sqllen){if (!mysql)//如果mysql没有初始化好{c…...
C:宏:编程风格:井号与define之间的空格
在这一篇中有提到,井号与define之间空格,可能导致搜索上的一些问题。 https://mzhan017.blog.csdn.net/article/details/135289451 今天看到有专门做这个空格的修改: https://sourceware.org/git/?pglibc.git;acommitdiff;hfcf70d4114db9ff…...
django websocket
目录 核心代码 consumers.py from channels.generic.websocket import WebsocketConsumer from channels.exceptions import StopConsumer import datetime import time from asgiref.sync import async_to_sync class ChatConsumer(WebsocketConsumer):def websocket_conne…...
HackTheBox - Medium - Linux - Bagel
Bagel 今天我开始了《Red Team Development and Operations A Practical Guide》的学习,保持学习,后面差不多到时机后就学CRTOⅡ Bagel 是一款中等难度的 Linux 机器,其特点是电子商店容易受到路径遍历攻击,通过该攻击可以获取应…...
Capsolver:解决Web爬虫中CAPTCHA挑战的最优解决方案
Web爬虫已经成为从各种在线来源提取和分析数据的不可或缺的技术。然而,在Web爬取过程中,经常会遇到的一个共同挑战是CAPTCHA。CAPTCHA(完全自动化的公共图灵测试,用于区分计算机和人类)是一种安全措施,旨在…...
大数据系列之:读取parquet文件统计数据量
大数据系列之:读取parquet文件统计数据量 一、Spark读取parquet文件统计数据量二、parquet-tools统计parquet文件数据量三、实际应用案例 一、Spark读取parquet文件统计数据量 首先,创建一个 SparkSession 对象: val spark SparkSession.b…...
力扣题:字符串变换-1.5
力扣题-1.5 [力扣刷题攻略] Re:从零开始的力扣刷题生活 力扣题1:482. 密钥格式化 解题思想:首先先将破折号去除,并将所有字母转换为大写,然后计算第一组的长度,进行结果字符串的拼接,如果第一组的长度为0,则需要删除开头的’-符号 class S…...
el-autocomplete远程搜索使用及el-upload上传多个文件流给后端,详情接口返回的是文件地址,前端将文件地址转成文件流,回传文件流给后端
最近遇到一个项目,里面有2个需求我觉得挺常见的,第一个需求是一个表单里,当用户在输入名称后,前端调接口发请求获取到关联名称的企业名称,并展示,然后当用户选中企业后,前端调接口获取选中企业的具体信息,并填充到表单里;第二个需求是,表单里有个上传图片的功能,前端…...
2024年度 ROTS - 实时操作系统 Top 15
RTOS(实时操作系统)。 这里说的 RTOS 并非新星球大战电影中的机器人,而是物联网设备、航空系统、空中交通管制等背后的无声协调者,就在地球上。 RTOS,或称实时操作系统,设计它们是为了更好的管理资源&…...
苹果怎么同步备忘录?教程来了,干货满满!
在苹果设备中,备忘录是一款非常实用的应用程序,可用于记录日常生活中的各种事项。然而,还有一些小伙伴不知道苹果怎么同步备忘录,这可能会成为他们的一个困扰。别着急!本文将详细介绍同步苹果手机备忘录的方法…...
Nginx(十八) 性能调优之 - 哪些层面可以进行优化
Nginx三大优势,动静分离、反向代理、负载均衡 1、线程 worker 2、http/tcp tcp_nopush tcp_nodelay 3、Buffer 调整请求体缓存区大小、将请求体缓存到一个缓冲区,降低CPU负载 4、连接队列 5、超时时间 6、静态文件缓存 open_file_cache 7、gzip压…...
OpenStack云计算(三)neutron
neutron 介绍: Neutron 概述传统的网络管理方式很大程度上依赖于管理员手工配置和维护各种网络硬件设备;而云环境下的网络已经变得非常复杂,特别是在多户场景里,用户随时都可能需要创建、修改和删除网络,网络的连通性和隔离不已经太可能通过手工配置来保证了。 如…...
Linux期末复习笔记
一、管理文件系统 1、文件系统类型 ext2:早期Linux中常用的文件类型。ext3:ext2的升级版,带日志功能。RAMFS:内存文件系统,速度很快。NFS:网络文件系统,由SUM发明,主要用于远程文件…...
PHP实现多继承
php支持多继承吗 不可以,只支持单继承。 可以使用 interface 或 trait 实现 。 实现方法 https://www.php.cn/faq/430197.html https://blog.58heshihu.com/index.php/archives/2288/...
pulsar原来是这样操作topic的
本篇主要讲述pulsar topic部分,主要从设计以及源码的视角进行讲述。在pulsar中,一个Topic的新建、扩容以及删除操作都是由Broker来处理的,而Topic相关的数据是存储在zookeeper上的。本篇文章模拟一个高效的学习流程进行展开 介绍使用方式(To…...
日常工作 经验总结
1,在使用vue2开发项目时,快捷有效的组件化component 若有参数传递时,可以通过这样传递 在component中: 2,上拉加载,下拉刷新 若是使用局部进行上拉加载 下拉刷新 且需要用到scroll-view时 那么需要切记scroll-view在内被mescroll-uni包裹。若场景有限 对于无数据显示…...
【Proteus仿真】【Arduino单片机】水箱液位监控系统
文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真Arduino单片机控制器,使用LCD1602液晶、按键、蜂鸣器、液位传感器、ADC转换器、水泵等。 主要功能: 系统运行后,LCD1602显示当前水位、上下限阈…...
【已解决】若依系统前端打包后,部署在nginx上,点击菜单错误:@/views/system/role/index
上面错误,是因为/views/system/role/index动态路由按需加载时候,错误导致。 解决办法: 如果您的前端项目访问时候,需要带有项目名称的话,参考凯哥上一篇文章:【已解决】若依前后端分离版本࿰…...
Java中compareTo方法使用
compareTo方法 1. compareTo方法参数2. compareTo方法返回值3. String类型使用CompareTo方法进行比较 compareTo 是实例方法,只能对象调用。所以不能比较基本类型 1. compareTo方法参数 public int compareTo(参数类型 值) {... }参数类型可以是一个 Byte, Double…...
【霹雳吧啦】手把手带你入门语义分割の番外11:U2-Net 源码讲解(PyTorch)—— 代码的使用
目录 前言 Preparation 一、U2-Net 网络结构图 二、U2-Net 网络源代码 1、train.py (1)parse_args 参数 (2)SODPresetTrain 类 (3)SODPresetEval 类 (4)main 函数 &#x…...
威尔仕2023年的统计数据
威尔仕健身房更新了2023年的统计数据,大家可以猜一猜我是哪一个称号?虽然小伙伴们的健身时长各有不同,有时候在课程中我也会分享自己健身的案例,看似一个简单的增强环路,旁边会有很多的调节环路来限制增强环路的增长&a…...
Spring——Spring基于注解的IOC配置
基于注解的IOC配置 学习基于注解的IOC配置,大家脑海里首先得有一个认知,即注解配置和xml配置要实现的功能都是一样的,都是要降低程序间的耦合。只是配置的形式不一样。 1.创建工程 1.1 pom.xml <?xml version"1.0" encoding…...
网站建设费用包括哪些方面/舆情监测软件免费版
图片的属性complete可以检查一个图片是否完全加载成功了,图片加载会有一个事件img.onload发生(它只代表图片已经开始加载了,不代表是否加载成功)。...
手机自己做网站吗/查网站权重
Python 3.x与Python 2.x之间存在着较多的语法细节差异。今天在看Python核心编程的时候,说到了自定义迭代器对象。于是动手将源码打了一遍,原书代码如下: class AnyIter(object):def __init__(self, data, safeFalse):""" The …...
企业网站找私人做什/百度快照优化排名
博客:http://www.jcodecraeer.com/plus/view.php?aid3828转载于:https://blog.51cto.com/7183397/1851017...
济南做网站比较好的公司知道吗/安卓优化大师旧版本下载
测评传送门 题意: 给你n片雪花,每片雪花有六个角,每个角的形状以一个数字表示(≤1e7),让你判断是否存在有两片雪花一模一样 判等当且仅当: 从任意一个角顺时针或逆时针数字完全相符 若有&#x…...
策划公司电话/免费关键词优化工具
目录 介绍 结点高度 结点平衡因子 AVL 树旋转 右旋 左旋 先左后右 先右后左 旋转的选择 插入结点 删除结点 查找结点 AVL 树典型应用 介绍 在进行多次插入与删除操作后,二叉搜索树可能会退化为链表此时所有操作的时间复杂度都会由 𝑂(log &…...
帮人做兼职的网站吗/北京建站
排序和搜索是数据结构和算法学习中的两个最基本的操作。关于排序,我在上一篇已经做了比较详细的介绍,请参考 http://www.cnblogs.com/chenxizhang/archive/2009/04/22/1441209.html 这一篇我们来关注一下搜索。我们同样把目光放在Array这个最基础的数据类…...