Vue系列之入门篇
前言:
目录
一,关于Vue的简介
1.什么是Vue?
2.使用Vue框架的好处?
3. 库和框架的区别:
4. MVVM的介绍
5.Vue的入门案例
二,Vue的生命周期
一,关于Vue的简介
1.什么是Vue?
Vue是一个构建用户界面(UI)的渐进式JavaScript框架
2.使用Vue框架的好处?
简单易学:Vue的API设计简洁,易于理解和上手。它采用了模板语法,使得开发者可以更加直观地描述页面的结构和逻辑。
组件化开发:Vue将页面拆分为独立的组件,每个组件都有自己的状态和行为,方便组织和复用代码。组件化开发可以提高开发效率,同时也使得代码更加可维护和可测试。
响应式数据绑定:Vue使用双向绑定的方式来处理数据和视图之间的同步,只需简单地绑定数据到视图,当数据发生变化时,视图会自动更新。这大大减少了手动处理DOM的工作量,提高了开发效率。
轻量高效:Vue的体积小,加载速度快,同时也具有出色的性能,能够高效地处理大规模的应用程序。
生态丰富:Vue拥有庞大的社区和生态系统,有大量的第三方插件和组件可以使用。这些插件和组件可以帮助开发者快速构建复杂的功能,节省开发时间。
总而言之,Vue框架具有简单易学、组件化开发、响应式数据绑定、轻量高效和丰富的生态等优点,使得它成为一种非常流行的前端框架。
3. 库和框架的区别:
2.1 库(Library),本质上是一些函数的集合。每次调用函数,实现一个特定的功能,接着把控制权交给使用者
代表:jQuery
jQuery这个库的核心:DOM操作,即:封装DOM操作,简化DOM操作
2.2 框架(Framework),是一套完整的解决方案,使用框架的时候,需要把你的代码放到框架合适的地方,框架会在合适的时机调用你的代码
代表:vue
框架规定了自己的编程方式,是一套完整的解决方案
使用框架的时候,由框架控制一切,我们只需要按照规则写代码
框架的侵入性很高(从头到尾)
4. MVVM的介绍
MVVM是Model-View-ViewModel的缩写。是一种软件架构设计模式。它是一种简化用户界面的事件驱动编程方式,它是不允许数据和视图直接通信的,只能通过ViewModel来通信 ,一种更好的UI模式解决方案,MVVM通过数据双向绑定让数据自动地双向同步
相比较于mvc更加便捷。 在MVVM模式中,Model是数据层,用于存储数据和对数据进行增删改查;View是视图层,也就是UI界面,用于将数据模型转化成UI展现出来;ViewModel是一个同步View和Model的对象,它负责处理用户的交互事件,以及将用户的操作传递给Model进行相应的处理,最后将处理结果返回给View进行展示
5.Vue的入门案例
5.1基本使用:通过vue的方式显示到浏览器:
第一步:使用开发工具Hbuilderx
下载地址:
HBuilderX-高效极客技巧 (dcloud.io)
第二步:正常创建html项目
第三步:导入vue的在线资源:
这里导入的是以vue.js后缀的,高级版本的资源可能没有。
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.js"></script>
这个网站不仅仅有vue的在线资源,还有jQuery,bootstrap...
vue (v3.3.4) - Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务https://www.bootcdn.cn/vue/
第四步:这一步就是开始写代码了。
案例一,入门使用vue的语法写一个显示到浏览器
<!DOCTYPE html> <html><head><meta charset="utf-8"><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.js"></script><title></title></head><style type="text/css">#app{background-image: -webkit-linear-gradient(0deg,yellow,red 10%,green);-webkit-background-clip: text;color: transparent;}</style><body><!-- vue管理的边界,只有一个节点==》一个div--><div id="app">{{msg}}</div><!-- 类似我们学过的jQuery方式,但vue比jQuery方便 --><script type="text/javascript">new Vue({el:"#app",//类似id选择器找到vue的divdata(){return {msg:'输入内容,vue会显示!'}//json数据}})</script></body></html>
效果:
案例二:实现点击显示
<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><title></title></head><style type="text/css">#app{background-image: -webkit-linear-gradient(0deg,yellow,red 10%,green);-webkit-background-clip: text;color: transparent;}</style><body><!-- vue管理的边界,只有一个节点==》一个div--><div id="app">{{msg}}<span id="show"></span><input id="tancontent" type="text" /><button type="button" onclick="tan()">点击弹出</button></div><!-- 类似我们学过的jQuery方式,但vue比jQuery方便 --><script type="text/javascript">new Vue({el:"#app",//类似id选择器找到vue的divdata(){return {msg:'输入内容,vue会显示!'}//json数据}})function tan(){var tancontent = $("#tancontent").val();//获取id为tancontent文本$("#show").text(tancontent);//为id为show赋值}</script></body></html>
案例三:实现输入显示
<!DOCTYPE html> <html><head><meta charset="utf-8"><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><title></title></head><style type="text/css">#app{background-image: -webkit-linear-gradient(0deg,yellow,red 10%,green);-webkit-background-clip: text;color: transparent;}</style><body><!-- vue管理的边界,只有一个节点==》一个div--><div id="app">{{msg}}<input v-model="msg"><span id="show"></span><input id="tancontent" type="text" /><!-- <button type="button" onclick="tan()">点击弹出</button> --></div><!-- 类似我们学过的jQuery方式,但vue比jQuery方便 --><script type="text/javascript">new Vue({el:"#app",//类似id选择器找到vue的divdata(){return {msg:'输入内容,vue会显示!'}//json数据}})function tan(){var tancontent = $("#tancontent").val();//获取id为tancontent文本$("#show").text(tancontent);//为id为show赋值}</script></body></html>
案例四:实现弹窗效果
<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><title></title></head><style type="text/css">#app{background-image: -webkit-linear-gradient(0deg,yellow,red 10%,green);-webkit-background-clip: text;color: transparent;}</style><body><!-- vue管理的边界,只有一个节点==》一个div--><div id="app">{{msg}}<!-- <input v-model="msg"> --><span id="show"></span><input id="tancontent" type="text" /><button v-on:click="tan()">点击弹出</button></div><!-- 类似我们学过的jQuery方式,但vue比jQuery方便 --><script type="text/javascript">new Vue({el:"#app",//类似id选择器找到vue的divdata(){return {msg:'输入内容,vue会显示!'};//json数据},methods:{tan(){alert(this.msg);}}})</script></body></html>
以上使用到vue中有的:v-model
在Vue中,v-model是一个指令用于在表单控件元素上创建双向数据绑定。
二,Vue的生命周期
Vue组件具有生命周期钩子函数,它们允许开发者在不同阶段插入自定义代码。以下是Vue的生命周期及其用途:
beforeCreate:在实例刚创建之前被调用。在这个阶段,组件的数据和方法都还未初始化。
created:在实例创建后立即被调用。可以在这个阶段进行一些初始的数据处理、异步请求等操作,但尚未进行DOM渲染。
beforeMount:在挂载开始之前被调用。此时,组件的模板已经编译完成,但尚未渲染到页面。
mounted:在挂载完成后被调用。此时,组件已经被渲染到页面中,并且可以操作DOM。
beforeUpdate:在组件更新之前被调用,即在数据发生改变时。可以在此阶段进行一些准备工作。
updated:在组件更新完成后被调用。此时组件的数据已经被更新,DOM也已重新渲染。
beforeDestroy:在组件销毁之前被调用。可以在此阶段进行一些清理工作,如清除计时器、取消订阅等。
destroyed:在组件销毁后被调用。此时,组件已经被销毁,数据和方法都不可用。
三,总结:
对于初学的程序员要注意的点:
理解核心概念:在开始学习Vue之前,确保你对Vue的核心概念有一个清晰的理解,例如组件、模板、指令、数据绑定等。这将为你打下坚实的基础,帮助你更好地理解和运用Vue的各种功能。
实践驱动学习:Vue是一门实践性很强的技术,只有通过实际的练习来加深理解和熟练运用。尝试使用Vue构建一些简单的项目或小组件,通过实际的实践来巩固所学的知识。
深入学习官方文档:Vue官方提供了详细的文档,是学习Vue的重要资源。仔细阅读并理解文档中的示例代码和解释,可以帮助你更好地理解Vue的工作原理和用法。
学习Vue的生态系统:Vue有一个庞大的社区和生态系统,里面有许多有用的第三方库、插件和组件,可以帮助你更高效地开发。花时间了解并学习这些工具和库的使用,将会对你的学习和开发产生积极的影响。
参与社区交流:加入Vue的社区,参与讨论、提问和回答问题。与其他开发者交流经验和思路,会使你快速成长,并且获取宝贵的帮助和支持。
不断扩展学习:Vue是一个不断发展和更新的技术,保持对新特性和最佳实践的关注是很重要的。持续学习和不断扩展你的Vue知识,将使你在实际开发中更加得心应手。
相关文章:
Vue系列之入门篇
前言: 目录 一,关于Vue的简介 1.什么是Vue? 2.使用Vue框架的好处? 3. 库和框架的区别: 4. MVVM的介绍 5.Vue的入门案例 二,Vue的生命周期 一,关于Vue的简介 1.什么是Vue? Vu…...
【遥感卫星数据】Landsat数据Collection1和Collection2区别
文章目录 1 总体介绍2 Landsat Collection 13 Landsat Collection 23.1 Collection 2 Level-1产品3.2 Collection 2 Level-2产品参考资料1 总体介绍 Landsat卫星的产品数据每经过几年就会有一次改进,主要改进几何校正精度和辐射纠正精度。而且NASA/USGS每次更新产品都会把存档…...
socket() failed (24: Too many open files) while connecting to upstream, client
一、这个错误通常是因为文件句柄数目超过系统限制导致的。要解决这个问题,您可以尝试以下几个步骤: 调整系统文件句柄限制:您可以通过修改/etc/security/limits.conf文件中的nofile参数来增加系统文件句柄的最大数目。将nofile的值增加到更高…...
认识单链表
-之前我们学过储存数据的一种表——顺序表,那么为什么还有链表呢 首先我们回顾一下顺序表 顺序表是物理地址连续的一段内存空间(数组),我们通过动态内存开辟的, 那么: 顺序表也有自己的一些优点,…...
pytest(二)框架实现一些前后置(固件,夹具)的处理,常用三种
为什么需要这些功能? 比如:web自动化执行用例前是否需要打开浏览器?执行用例后需要关闭浏览器? 示例代码: import pytest class Testcase:#这是每条测试用例执行前的初始化函数def setup(self):print("\n我是每…...
【计算机网络 - 自顶向下方法】计算机网络和因特网
目录 1. What is the Internet? 1.1 因特网的具体构成 1.2 因特网的功能 2. Network core 2.1 基本介绍 2.2 分组交换 2.2.1 序列化时延 2.2.2 排队延迟和丢包 2.2.3 分组交换的优缺点 2.3 电路交换 2.3.1 基本概念 2.3.2 电路交换网络中的复用 2.3.3 电路交换文件…...
【Java 基础篇】Java Condition 接口详解
Java 提供了一种更灵活和高级的线程协作机制,通过 Condition 接口的使用,你可以更精细地控制线程的等待和唤醒,实现更复杂的线程同步和通信。本文将详细介绍 Java 的 Condition 接口,包括它的基本概念、常见用法以及注意事项。 什…...
.360勒索病毒和.halo勒索病毒数据恢复|金蝶、用友、ERP等数据恢复
导言: 随着数字化时代的持续发展,网络安全威胁也变得前所未有地复杂和难以应对。在这个充满挑战的网络环境中,勒索病毒已经成为了一种极为危险和破坏性的威胁。最近引起广泛关注的是.360勒索病毒,一种可怕的恶意软件,…...
计算机毕业设计 基于SpringBoot餐厅点餐系统的设计与实现 Java实战项目 附源码+文档+视频讲解
博主介绍:✌从事软件开发10年之余,专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ 🍅文末获取源码联系🍅 👇🏻 精…...
天空飞鸟 数据集
今天要介绍的数据集则是天空飞鸟 数据集: 数据集名称:天空飞鸟 数据集 数据集格式:Pascal VOC格式(不包含分割路径的txt文件和yolo格式的txt文件,仅仅包含jpg图片和对应的xml) 图片数量(jpg文件个数):以文件包含图片…...
集成学习-树模型
可以分为三部分学习树模型: 基本树(包括 ID3、C4.5、CART).Random Forest、Adaboost、GBDTXgboost 和 LightGBM。基本树 选择特征的准则 ID3:信息增益max C4.5:信息增益比max CART:基尼指数min 优缺点 ID3 核心思想是奥卡姆剃刀(决策树小优于大) 缺点: ID3 没…...
代码随想录算法训练营第一天(C)| 704. 二分查找 27. 移除元素
文章目录 前言一、704. 二分查找二、27. 移除元素三、34. 在排序数组中查找元素的第一个和最后一个位置总结 前言 这次是C; 代码随想录算法训练营第一天| 704. 二分查找、27. 移除元素_愚者__的博客-CSDN博客 (java) 一、704. 二分查找 的优…...
重构优化第三方查询接口返回大数据量的分页问题
# 问题描述 用户线上查询其上网流量详单数据加载慢,且有时候数据没有响应全~ 1、经排除是调用第三方数据量达10w条响应会超时,数据没正常返回 2、现有线上缓存分页也是加载慢数据不能正常展示 3、第三方接口返回类似报文jsonj&#…...
Cento7 Docker安装Zabbix,定制自定义模板
1.先安装docker环境 yum -y install yum-utils device-mapper-persistent-data lvm2#导入docker安装库 yum-config-manager \--add-repo \https://download.docker.com/linux/centos/docker-ce.repo #按指定版本安装好docker yum install docker-ce-20.10.5 docker-ce-cli-20…...
网络防御--防火墙
拓扑 Cloud 1 作为电脑与ENSP的桥梁 防火墙配置 登录防火墙 配置IP地址及安全区域 添加地址对象 配置策略 1、内网可以访问服务器 结果 2、内网可以访问公网 结果 配置NAT策略 结果...
淘宝商品详情数据采集
淘宝商品详情数据采集的方法如下: 确定采集目标:明确要采集的商品信息,如商品标题、价格、销量、评论、图片等。选择采集工具:可以选择Scrapy框架、Java的WebMagic框架等。编写爬虫程序:进入目标文件夹,输…...
mac安装virtualenv和virtualenvwrapper
1.安装(推荐用sudo安装,直接pip3安装会有坑) sudo pip3 install virtualenv sudo pip3 install virtualenvwrapper 2.查看python virtualenvwrapper.sh 位置 # 查看python默认解释器 which python3 # 查看virtualenvwrapper.sh which virtualenvwrapper.sh 3.打…...
利用PCA科学确定各个指标的权重系数
背景参考: 1、提取主成分 对样本进行PCA分析,查看不同变量贡献率,确定主要的指标。我们可以通过下列代码获取需要的所有数据: import numpy as np from sklearn.decomposition import PCA# 创建一个数据 np.random.seed(0) data = np.random.random((100,5)) y = np.ra…...
代码随想录 -- day55 --392.判断子序列 、115.不同的子序列
392.判断子序列 dp[i][j] 表示以下标i-1为结尾的字符串s,和以下标j-1为结尾的字符串t,相同子序列的长度为dp[i][j]。 if (s[i - 1] t[j - 1]) t中找到了一个字符在s中也出现了if (s[i - 1] ! t[j - 1]) 相当于t要删除元素,继续匹配 if (s…...
mysql5升级到mysql8的血泪教训
核心问题1:下载中断这个包就会有问题,下载中断的话一定要重新下载 核心问题2:低版本向高版本迁移 无法整库备份 只能单库备份 1.数据备份 我这里备份了全库,所以后面数据没恢复回来,把DDL语句拆出来了单独建表 mysqldump -u root -p --al…...
Unity 开发人员转CGE(castle Game engine)城堡游戏引擎指导手册
Unity 开发人员的城堡游戏引擎概述 一、简介2. Unity相当于什么GameObject?3. 如何设计一个由多种资产、生物等组成的关卡?4. 在哪里放置特定角色的代码(例如生物、物品)?Unity 中“向 GameObject 添加 MonoBehaviour”…...
卷运维不如卷网络安全
最近发现很多从事运维的选择了辞职,重新规划自己的职业发展方向。运维工程师这个岗位在IT行业里面确实是处于最底层的,不管什么环节出现问题,基本都是运维背锅。背锅也就罢了,薪资水平也比不上别的岗位。 一般运维的薪资水平大多数…...
Digger PRO - Voxel enhanced terrains
资源链接在文末 Digger PRO 是一个简单但强大的工具,可以直接从 Unity 编辑器或游戏中创建天然洞穴和悬岩。会让你感觉自己手中握有一个体素地形,且毫无瑕疵。它实际上保持着最新、最快且可靠的 Unity 地形系统,并在你需要的地方无缝创建洞穴/悬岩峭壁网格。Digger 内…...
文字处理工具 word 2019 mac中文版改进功能
Microsoft Word 2019 是微软公司的文字处理软件,是 office 2019 套件中的一部分。它是一个功能强大、易于使用的工具,可以帮助用户创建各种类型的文档,包括信函、简历、报告、手册等。 Word 2019 提供了许多功能和改进,包括更好的…...
LeetCode 54. 螺旋矩阵
题目链接 力扣(LeetCode)官网 - 全球极客挚爱的技术成长平台 题目解析 1、求出当前矩阵左上角的元素和右下角的元素。 2、根据这两个元素来确定我们需要遍历的具体位置。 3、当遍历完一圈的时候更新左上角元素和右下角元素。 细节: 当遍历最…...
每天几道Java面试题:集合(第四天)
目录 第四幕 、第一场)大厦楼下门口第二场)大门口 友情提醒 背面试题很枯燥,加入一些戏剧场景故事人物来加深记忆。PS:点击文章目录可直接跳转到文章指定位置。 第四幕 、 第一场)大厦楼下门口 【面试者老王,门卫甲…...
【论文解读】Faster sorting algorithm
一、简要介绍 基本的算法,如排序或哈希,在任何一天都被使用数万亿次。随着对计算需求的增长,这些算法的性能变得至关重要。尽管在过去的2年中已经取得了显著的进展,但进一步改进这些现有的算法路线的有效性对人类科学家和计算方法…...
latexocr安装过程中遇到的问题解决办法
环境要求:需要Python版本3.7,并安装相应依赖文件 具体的详细安装步骤可见我上次写的博文:Mathpix替代者|科研人必备公式识别插件|latexocr安装教程 ‘latexocr‘ 不是内部或外部命令,也不是可运行的程序或批处理文件的相关解决办…...
如何判断linux 文件(或lib)是由uclibc还是glibc编译出来的?
工作中使用的编译环境有2套编译器,一个是glibc,一个是uclibc。 有些项目使用的glibc编译的lib,和使用uclibc编译的工程,在一起就会出现reference的编译错误如下: 那和如何来判断一个文件是由哪个编译器编译的呢&#…...
WorkPlus | 好用、专业、安全的局域网即时通讯及协同办公平台
自国家于2022年发布的《关于加强数字政府建设的指导意见》以来,我国数字政府建设已经迈入了一个全新的里程碑,迎来了全面改革和深化升级的全新阶段。 WorkPlus作为自主可控、可信安全、专属定制的数字化平台,扮演着政务机关、政府单位以及各…...
佛山响应式网站建设/知乎推广合作
mybatis缓存:在内存中临时存储数据,速度快,可以减少数据库的访问次数 经常需要查询,不经常修改的数据,不是特别重要的数据都适合于存储到缓存中 一级缓存 默认开启,是SqlSession的缓存,SqlSe…...
赣州专业做网站/网站推广排名优化
问题设置:我有一个不平衡的数据集,其中98%的数据属于A类,2%属于B类.我训练了一个DecisionTreeClassifier(来自sklearn),class_weights设置为与以下设置平衡:dtc_settings {criterion: entropy,min_samples_split: 100,min_sample…...
怎么做网站下单/深圳百度推广seo公司
IE的时候图片在右边显示,而FF的时候图片在文字下面显示,现在如何做,才能让2个浏览器下都文字下方显示啊?QQ5650387 <html> <head><meta http-equiv"Content-Type" content"text/html; charsetut…...
谷歌浏览器wordpress证书不安全/合肥网络推广公司
除了USB方式连接Android终端设备,还有一种方法是通过adb connect命令利用TCP/IP协议来连接。毕竟,PC端的USB口也是有限的。Step1:设置手机和PC在同一网络下,即连接同一WIFI;用USB连接手机;在终端输入&#…...
腾讯邮箱网页版/seo技术服务外包
51%的企业在过去12月内发生过数据泄漏面对日益复杂的安全环境,多样化的攻击手段,传统的防护已经失效,你的安全团队是否做好了准备? 深井式的管理架构,各自封闭的信息系统,无迹可寻的内部泄漏,防…...
开发商交房必备条件/深圳优化seo
插在电脑上实验时若出现 ATCREG? CREG: 0,2 可能是usb口供电不足所致,换至主机箱后面usb口后问题解决,返回值CREG: 0,1转载于:https://www.cnblogs.com/prayer521/p/6690257.html...