Vue.js学习笔记(第一天) vue简介 vue入门 vue模板

文章目录

  • vue简介
  • vue入门
  • vue模板

vue简介

vue目前的地位:相较于另一款前端框架 React 和更早的前端框架 Angularvue 属于后起之秀,但是具有非常完善的生态,成为了前端开发工程师的必备技能。

vue的官方定义:一套用于构建用户界面的渐进式JavaScript框架。

  • 如何理解构建用户界面:将已经掌握的数据通过某种可视化的方式呈现给用户。
  • 如何理解渐进式vue 可以自底向上逐层应用。对于简单应用,只需要引用一个轻量小巧(压缩之后只有100多Kb)的核心库即可;对于复杂应用,可以引入各式各样的插件。

vue的发展历程

  • 2013年,受到Angular框架的启发,Google的员工尤雨溪开发出了一款轻量级框架Seed,同年将其更名为vue,版本号为0.6.0。
  • 2014年,vue正式对外发布,版本号为0.8.0,PHP领域的大牛Taylor otwell在推特上说自己正在学习vue.js,使得vue开始变得知名。
  • 2015年,vue正式发布版本1.0.0,代号新世纪福音战士。
  • 2016年,vue正式发布版本2.0.0,代号攻壳机动队。
  • 2020年,vue正式发布版本3.0.0,代号海贼王。

vue的学习者为什么被建议同时学习vue2和vue3vue2 是一个经典的版本,目前公司的实际开发过程中用vue2的仍然有很多;但是,vue3 一定是未来的趋势,因此也值得学习。

vue的特点

  • 组件化模式
    • 基本概念:组件化是指对于网页中的每一部分,vue都将其视为一个组件,使用一个后缀名为 .vue 的文件表示,而该文件中包含该部分的HTML代码、CSS代码和JavaScript代码。
    • 使用优点:修改一个组件并不会影响网页中的其他组件,让代码更好维护;并且组件可以被复用,提高了代码的复用率。
  • 声明式编码
    • 基本概念: 和命令式编码相对应。声明式编码是指只需要指定实现的结果,而不需要详细制订中间的过程;而命令时编码需要详细指定中间的过程。
    • 使用优点:声明式编码方式让编码人员无需直接操作DOM,提高了开发效率。
  • 虚拟DOM和Diff算法
    • 基本概念:在vue中进行界面更新时,vue会创建一个新的虚拟DOM来表示新的页面的状态,而不是直接操作实际的DOM。Diff算法会找出界面更新前后两个虚拟DOM之间的差异,判定最少需要改变的地方,然后才去实际更新DOM。
    • 使用优点:避免了直接操作实际DOM的耗时的过程,因为如果实际操作DOM每次改变都会引起浏览器的重新渲染,而虚拟DOM和Diff算法可以减少浏览器的渲染次数,提高性能。

vue中的一些重要概念

  • vue-cli:专门用于工程化开发。
  • vue-router:用于在vue中实现前端路由。
  • vuex:用于保存复杂应用中的数据。
  • element-ui:一个美观的UI组件库。

vue的官网:cn.vuejs.org。官网中包含:官方教程、API(相当于用于查阅的字典)、风格指南、示例、Cookbook(一些编码技巧)、生态系统、Awesome vue(一些推荐的第三方库)。在官网上也可以下载vue的源代码文件。

CDN的概念:在JavaScript中,在导入外部的js脚本时,需要在HTML的 <script> 标签中指定 src 属性。如果这个属性的值被设置为本地的一个路径,则表示导入本地的js文件;另外,这个属性的值也可以设置为一个http开头或https开头的URL,表示网络上的js文件。而CDN就是用于加速网络js文件的导入的。另外,CDN也会减轻服务器的负担。

vue的两种版本:vue有开发版本和生产版本两个版本,其中开发版本(vue.js)包含完整的警告和调试模式,但是体积较大;生产版本(vue.min.js)删除了警告并且进行了压缩,使得其体积较小。

vue开发者工具:可以在浏览器中安装vue开发者工具插件(支持Chrome浏览器、Firefox浏览器等)。

如何关闭vue在启动时生成的生产提示:可以编写JS代码实现,代码为:Vue.config.productionTip = false

vue入门

如何使用Vue:想要使用vue,就必须创建一个 Vue 实例,并传入一个配置对象,就像下面这样:

new Vue(配置对象)

注意事项:创建 Vue 实例时不需要使用变量进行承接。

配置对象的内容设置:对象有下面的属性可以设置:

  • el:通常为一个CSS元素选择器的字符串,用于指定 Vue 对象关联的容器(例如一个div)。这个被关联的容器中的代码被称为Vue模板。
    • vue实例绑定元素的另一种方法:可以先创建一个vue实例,然后通过vue实例的 $mount 方法来绑定元素,该方法中传入的参数是需要的CSS选择器。一般情况下,这种方法和直接使用 el 属性可以互换。
  • data:一个对象,表示需要写入容器中的数据,例如 {name: hanmo};相应的,在容器中需要使用该数据值的地方,使用两对大括号进行表示,对于本例则为 {{name}}。另外,Vue模板的双大括号中还可以写入JavaScript表达式。
    • vue实例绑定数据的另一种方法:使用函数式进行绑定。将 data 设置为一个函数,该函数返回一个对象,表示data对象的值。虽然这种方法更加麻烦,但是在之后学习到组件时,data 必须使用函数式,否则会发生报错。

Vue实例和容器之间的对应关系:两者之间是一一对应的关系,一个实例只能用于构建一个实例;一个实例只能有一个 Vue 实例对应。但是,一个 Vue 实例可以被拆分为多个组件。

vue模板

vue模板语法:vue模板的语法主要分为插值和指令两种。

  • 插值语法:这种语法用于将变量的值嵌入到模板中。例如,如果在Vue实例的 data 属性中定义了 **name**变量并赋值为 jack,那么在vue模板中可以通过 {{ name }} 来显示这个值。
  • 指令语法:当需要动态地给标签的属性赋值时,可以使用指令语法。将标签的属性前加上 v-bind: 前缀,后跟一个字符串。这个字符串会被解析为一个JavaScript表达式,并在执行后将属性值设置为该表达式的结果。此外,v-bind: 可以被简写为 :

简而言之,vue模板的插值语法用于动态地插入标签内容,而指令语法则用于动态地设置标签的属性。

数据绑定关系

  • 单双向数据绑定:通过 v-bind: 可以实现单向的数据绑定,即当vue实例中的对象属性值发生变化时,vue模板中显示的值也随之发生变化,但是反过来不成立。如果需要双向绑定,则需要将 v-bind: 修改为 v-model:
  • 双向绑定语法的元素限定:但是需要注意的是,能够进行双向数据绑定的元素只能是表单类元素(输入类元素)。
  • 双向绑定语法的简写:由于 v-model: 默认绑定的就是 value 属性,因此在绑定元素的 value 属性时可以简写为 v-model

注意事项:由vue管理的函数,一定不要写成箭头函数,因为一旦写了箭头函数,this 所指向的就不再是vue实例了。

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

高转化的Facebook广告文案的秘诀

Facebook 广告文案是制作有效 Facebook 广告的关键方面。它侧重于伴随广告视觉元素的文本内容。今天我们的博客将深入探讨成功的 Facebook 广告文案的秘密&#xff01; 一、广告文案怎么写&#xff1f; 正文&#xff1a;这是帖子的正文&#xff0c;出现在您姓名的正下方。它可…

算法基础学习Day2(双指针)

文章目录 1.题目2.题目解答1.快乐数题目及题目解析算法学习代码提交 2.题目2题目及题目解析算法学习代码提交 1.题目 202. 快乐数 - 力扣&#xff08;LeetCode&#xff09;11. 盛最多水的容器 - 力扣&#xff08;LeetCode&#xff09; 2.题目解答 1.快乐数 题目及题目解析 …

Web3与人工智能的跨界融合:数据隐私与去中心化的新机遇

随着Web3和人工智能&#xff08;AI&#xff09;技术的不断发展&#xff0c;两者的结合正在成为未来互联网的重要趋势。Web3代表着去中心化的未来&#xff0c;AI则提供了强大的智能化能力。当这两者结合时&#xff0c;不仅为数据隐私保护提供了新的解决方案&#xff0c;还推动了…

DevOps系统设计和技术选型

命名是一件痛苦的事情&#xff0c;除非你不想要一个好名字。 我正在做的这个管理系统叫什么合适&#xff0c;或者是什么类型的系统&#xff0c;想去想来不知所措&#xff0c;后来想想这么小的东西纠结什么&#xff0c;先从小的细节一点点来&#xff0c;能用就行&#xff0c;就用…

2024年华中杯数学建模A题太阳能路灯光伏板的朝向设计问题解题全过程文档及程序

2024年华中杯数学建模 A题 太阳能路灯光伏板的朝向设计问题 原题再现 太阳能路灯由太阳能电池板组件部分&#xff08;包括支架&#xff09;、LED灯头、控制箱&#xff08;包含控制器、蓄电池&#xff09;、市电辅助器和灯杆几部分构成。太阳能电池板通过支架固定在灯杆上端。…

sheng的学习笔记-AI-序列模型(Sequence Models),RNN,GRU,LSTM

Ai目录&#xff1a;sheng的学习笔记-AI目录-CSDN博客 基础知识 定义&#xff1a; 序列模型是输入输出均为序列数据的模型&#xff0c;它能够将输入序列数据转换为目标序列数据。常见的序列模型类型包括一对一、一对多、多对一、部分多对多和完全多对多。 重要的是需要有顺序…

《网络安全》相关知识点总结

第一章 安全现状及趋势 第二章 网络安全概述 2.1 信息保障阶段 信息保障技术框架IATF&#xff1a; 由美国国家安全局制定&#xff0c;提出“纵深防御策略” DiD&#xff08;Defense-in-Depth Strategy&#xff09; 在信息保障的概念下&#xff0c;信息安全保障的PDRR模型的内涵…

DApp浏览器能否集成在自己开发的DApp里?

答案是肯定的。在技术层面&#xff0c;DApp浏览器可以完全集成到你自己开发的DApp中&#xff0c;从而提供一个一体化的用户体验。本文将详细分析如何实现这一目标&#xff0c;以及其中的技术实现、优势和需要注意的问题。 一、什么是DApp浏览器&#xff1f; DApp浏览器是一种支…

MySQL--用户权限

1.使用root用户登录MySQL客户端&#xff0c;创建一个名为userl的用户&#xff0c;初始密码为123456;创建一个名为user2的用户&#xff0c;无初始密码。然后&#xff0c;分别使用uesr1、user2登录MySQL 客户端。 创建两个用户 使用user1登录 使用user2登录 2.使用root用户登录&a…

星海智算:skl-videolingo-2.0(AI视频翻译)使用教程

&#xff08;一&#xff09;项目介绍 VideoLingo是一款专为视频创作者设计的开源自动化工具&#xff0c;旨在提供从视频字幕生成到声音克隆配音的一站式服务。以下是对VideoLingo的详细介绍&#xff1a; 1、核心功能​ 1.1、一键全自动视频搬运​ 支持从YouTube等平台下载视…

SQL靶场第八关攻略

一.判断类型 输入?id1 and 11-- 输入?id1 and 12--页面都正常&#xff0c;说明不是数值型 输入?id1页面没有回显 加上--页面正常&#xff0c;说明是字符型注入 二.判断列数 输入?id1 order by 3--页面正常 输入?id1 order by 4--页面没有回显&#xff0c;说明一共有三列…

华为HCIP-Datacom H12-821H12-831 (12月最新题库)

备考HCIP-datacom的小伙伴注意啦 !!! 2024年下半年12月份最新(H12-821和H12-831)题库带解析,有需要的小伙伴移动至文章末 H12-821: H12-831: 1.BGP 邻居建立过程的状态存在以下几种&#xff1a;那么建立一个成功的连接所经历的状态机顺序是 A、3-1-2-5-4 B、1-3-5-2-4 C、…

Flask使用长连接

Flask使用flask_socketio实现websocket Python中的单例模式 在HTTP通信中&#xff0c;连接复用&#xff08;Connection Reuse&#xff09;是一个重要的概念&#xff0c;它允许客户端和服务器在同一个TCP连接上发送和接收多个HTTP请求/响应&#xff0c;而不是为每个新的请求/响…

MR30分布式 I/O 模块助力 CNC 设备产能飞跃

背景分析 在现代制造业中&#xff0c;CNC 设备扮演着极为关键的角色。然而&#xff0c;CNC 设备在运行过程中也存在着诸多痛点。传统的 CNC 设备往往在控制与通信方面存在局限&#xff0c;其内部的 I/O 系统大多采用集中式架构。这种架构下&#xff0c;一旦需要处理大量的输入输…

远程修改ESXi 6.7管理IP地址

1.启用安全Shell&#xff08;也就是EXSi可以被SSH访问的功能&#xff09; 2.使用SecureCRT SSH2连接ESXi主机&#xff0c;现在使用dcui并没有任何反应&#xff0c;在Session标签栏右键点击Disconnect。 The time and date of this login have been sent to the system logs.WA…

Vulnhub靶场 Kioptrix: Level 1 (#1) 练习

目录 0x00 环境准备0x01 主机信息收集0x02 站点信息收集0x03 漏洞查找与利用1. 方法一&#xff1a;mod_ssl 2.8.42. 方法二&#xff1a;CVE-2003-02013. 方法三&#xff1a;Samba 0x04 总结 0x00 环境准备 下载链接&#xff1a;http://www.kioptrix.com/dlvm/Kioptrix_Level_1.…

消息中间件-Kafka3-kafkaJavaClient小例

消息中间件-Kafka3-kafkaJavaClient小例 Kafak Java Client private static final String KAFKA_TOPIC "kafak-test";private static String bootstrapServers "localhost:9092";private static AdminClient client null;static {Properties config n…

关于光耦合器的常见误解

光耦合器以其提供电气隔离的能力而闻名&#xff0c;广泛应用于从电源到通信系统的各种应用。尽管光耦合器非常普遍&#xff0c;但人们对其特性和用途存在一些常见的误解。本文将揭穿一些最常见的误解&#xff0c;以帮助工程师和爱好者做出更明智的决策。 误解1&#xff1a;光耦…

【简洁明快】使用python读取数据建立pptx (python-pptx图文调整案例)

使用python自动读取数据建立pptx 前言如何使用 Python 自动生成 PPTX第一步&#xff1a;安装所需库第二步&#xff1a;创建一个新的 PPTX第三步&#xff1a;添加幻灯片第四步&#xff1a;添加内容添加文本添加图片第五步&#xff1a;保存 PPTX 图文实操案例&#xff08;自动读取…

【智体OS】官方上新发布rtphone分布式安卓设备远程控制插件:实现远程访问和管理手机

【智体OS】官方上新发布rtphone分布式安卓设备远程控制插件&#xff1a;实现远程访问和管理手机 dtns.network是一款主要由JavaScript编写的智体世界引擎&#xff08;内嵌了three.js编辑器的定制版-支持以第一视角浏览3D场馆&#xff09;&#xff0c;可以在浏览器和node.js、d…