开始学习vue2基础篇(初体验)

一、什么是VUE(官网 :https://cn.vuejs.org/)

官方给出的概念 :Vue (读音 /vju ː/ ,类似于 view) 是一套用

构建用户界面的前端框架

渐进式的 JavaScript 框架

二、VUE的特点

易用 :基础只需HTML、CSS、JAvaScript

灵活 :可以只在一个库和一套完整框架之间伸缩自如(渐进式)

高效 :运行大小20kb ,超快的虚拟DOM

Vue框架的特性主要是数据驱动试图双向数据绑定

 面试      使   拟DOM  

Web界面由DOM树(树的意思是数据结构)来构建,当其中一部分发

生变化时,其实就是对应某个DOM节点发生了变化

虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前,

若一次操作中有10次更新DOM的动作,虚拟DOM不会立即操作DOM, 而是将这10次更新的diff内容保存到本地一个JS对象中,最终将

这个JS对象一次性attch到DOM树上,再进行后续操作,避免大量

无谓的计算量。所以,用JS对象模拟DOM节点的好处是,页面的 更新可以先全部反映在JS对象(虚拟DOM)上,操作内存中的JS对 象的速度显然要更快,等更新完成后,再将最终的JS对象映射成

真实的DOM,交由浏览器去绘制。

三、vue的底层原理— MVVM模式

MVVM:model、view、ViewModel。MVVM架构一样是M、V分离,但 中间是以VM(ViewModel)来串接,这个VM就像View 的一个代理 程序,它负责直接对Model做沟通。而View可以通过一些机制例 如双向数据绑定来和VM沟通以获取资料,再抛给model做存储工作。

 面试     能讲 一讲MVVM 

MVVM是Model-View-ViewModel缩写,也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型,View代表UI组件,ViewModel是View和Model层的桥梁,数据会绑定到viewModel层并自动将数据渲染到页面中,视图变化的时候会通知viewModel层更新数据。

四、Vue的优势

. 轻量级:vue只关注视图层,是一个构建数据的视图集 合,大小只有几十kb,angular学习成本高,使用复杂。 Vue相对简单,直接所以vue使用更加友好

. 数据绑定:vue是一个MVVM框架,数据发生变化时,视 图就会发生变化,视图变化相应的数据也会变化,保  留了angular的特点,双向数据绑定

. 指令:指令有内置指令和自定义指令,以“v- ”开头, 作用于html元素,将指令绑定在元素上,会给绑定的  元素添加一些特殊行为

. 插件:常用的扩展插件vue-router、Vuex等

. 视图,数据,结构分离:使数据的更改更为简单,不 需要进行逻辑代码的修改,只需要操作数据就能完成 相关操作;

. 虚拟DOM:dom操作是非常耗费性能的, 不再使用原生 的dom操作节点,极大解放dom操作,但具体操作的还  是dom不过是换了另一种方式;

. 运行速度更快:相比较与react而言,同样是操作虚拟dom,就性能而言,vue存在很大的优势。

五、vue初体验

VUE的三部曲 引包、留坑、实例化

> 引包

1、直接引入<script></script>

2、CDN:内容分发网络(将一套东西放服务器里面让别人去访问)

3、Npm下载:Npm install vue (配合官方提供的脚手架去使用)

> 留坑

即在html中留了一个vue模板插入的地方或是vue代码对其生效的地方

<div id="app"> 

 {{message}}

</div>

实例化

new Vue({
        e1:目的地,//e1:挂载点//(选择器可以是css的选择器类型,但建议用ID选择器)
        template:模板内容`,//(根节点只能有一个,不能并列标签)

        Data:{},//(可以是函数也可是对象,但基本用函数)

})

关于初始化的选择器

1.选择器只能选中一个范围,默认选择第一个,所以建议使用id选择器

2.根标签不能用body(el挂载不能用Boby也不可以用HTML),般都在body里面放一个根标签

3.能够使用vue的标签只能是双目标签

4.new Vue可以在一个页面用多次(后面的组件化也能够支撑这一点)

六、VUE的模板渲染(模板引擎)

{{}}(vue 就是用的两个花括号的模板引擎方式,是借鉴了

Mustache 语法 (双大括号/胡子语法) 的文本插值)

模板引擎的本质:  正则的替换

目的: 为了增强html功能

Vue模板引擎的用法:

1. {{数据绑定}}

2. {{简单计算}}

3. {{简单逻辑运算}}(三元运算)

4. {{做简单js判断}}

注意:不能写语句、不能解析html渲染、不能放在在属性身上

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

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

相关文章

4_机械臂运动学基础向量空间

在了解机械臂正解推导的过程中&#xff0c;几个问题一直困扰着我&#xff1a; 1、为什么3*3矩阵可以描述姿态&#xff1f;矩阵更进一步的意义是什么&#xff1f;姿态是否有其他的描述方式&#xff0c;如果有是什么&#xff1f; 2、机械臂法兰中心相对于基座的坐标&#xff0c;6…

PgSQL - 17新特性 - 块级别增量备份

PgSQL - 17新特性 - 块级别增量备份 PgSQL可通过pg_basebackup进行全量备份。在构建复制关系时&#xff0c;创建备机时需要通过pg_basebackup全量拉取一个备份&#xff0c;形成一个mirror。但很多场景下&#xff0c;我们往往不需要进行全量备份/恢复&#xff0c;数据量特别大的…

mysql生成最近24小时整点时间临时表

文章目录 生成最近24小时整点生成最近30天生成12个月 生成最近24小时整点 SELECT-- 每向下推1行, i比上次减去1b.*, i.*,DATE_FORMAT( DATE_SUB( NOW(), INTERVAL ( -( i : i - 1 ) ) HOUR ), %Y-%m-%d %H:00 ) AS time FROM-- 目的是生成12行数据( SELECTa FROM( SELECT 1 A…

day01 深度学习介绍

目录 1.1深度学习介绍 1.2神经网络NN 1、概念&#xff1a; 2、神经元 3、&#xff08;单层&#xff09;神经网络 4、感知机&#xff08;两层&#xff09; 5、多层神经网络 6、激活函数 &#xff08;1&#xff09;饱和与非饱和激活函数 &#xff08;2&#xff09;饱和激活…

基于 IDEA 进行 Maven 工程构建

1. 构建概念和构建过程 项目构建是指将源代码、依赖库和资源文件等转换成可执行或可部署的应用程序的过程&#xff0c;在这个过程中包括编译源代码、链接依赖库、打包和部署等多个步骤。 项目构建是软件开发过程中至关重要的一部分&#xff0c;它能够大大提高软件开发效率&am…

Redis 面试题 | 05.精选Redis高频面试题

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

PowerShell install 一键部署grafana

grafana 前言 Grafana 是一款开源的数据可视化和监控仪表盘工具。它提供了丰富的数据查询、可视化和报警功能,可用于实时监控、数据分析和故障排除等领域。 通过 Grafana,您可以连接到各种不同的数据源,包括时序数据库(如 Prometheus、InfluxDB)和关系型数据库(如 MySQ…

使用DTS实现TiDB到GaiaDB数据迁移

1 概览 本文主要介绍通过 DTS 数据迁移功能&#xff0c;结合消息服务 for Kafka 与 TiDB 数据库的 Pump、Drainer 组件&#xff0c;完成从TiDB迁移至百度智能云云原生数据库 GaiaDB。 消息服务 for Kafka&#xff1a;详细介绍参见&#xff1a;消息服务 for Kafka 产品介绍百度智…

Elasticsearch:介绍 kNN query,这是进行 kNN 搜索的专家方法

作者&#xff1a;来自 Elastic Mayya Sharipova, Benjamin Trent 当前状况&#xff1a;kNN 搜索作为顶层部分 Elasticsearch 中的 kNN 搜索被组织为搜索请求的顶层&#xff08;top level&#xff09;部分。 我们这样设计是为了&#xff1a; 无论分片数量多少&#xff0c;它总…

EHS管理系统为何需要物联网的加持?

EHS是Environment、Health、Safety的缩写&#xff0c;是从欧美企业引进的管理体系&#xff0c;在国外也被称为HSE。EHS是指健康、安全与环境一体化的管理。 而在国内&#xff0c;整个EHS市场一共被分成三类&#xff1b; 一类是EHS管培体系&#xff0c;由专门的EHS机构去为公司…

二维码地址门牌管理系统:社区新风向

文章目录 前言一、集成先进技术的系统二、便捷居民体验三、支持社区管理四、未来展望与可扩展性 前言 随着科技的不断发展&#xff0c;智能化管理已经深入到我们的生活中。二维码门牌管理系统作为一款创新产品&#xff0c;在社区管理领域迅速引起广泛关注。这款系统不仅提升了…

一、认识 JVM 规范(JVM 概述、字节码指令集、Class文件解析、ASM)

1. JVM 概述 JVM&#xff1a;Java Virtual Machine&#xff0c;也就是 Java 虚拟机 所谓虚拟机是指&#xff1a;通过软件模拟的具有完整硬件系统功能的、运行在一个完全隔离环境中的计算机系统。 即&#xff1a;虚拟机是一个计算机系统。这种计算机系统运行在完全隔离的环境中…