开始学习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.mfbz.cn/a/341234.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

爬虫案例—抓取找歌词网站的按歌词找歌名数据

爬虫案例—抓取找歌词网站的按歌词找歌名数据 找个词网址&#xff1a;https://www.91ge.cn/lxyyplay/find/ 目标&#xff1a;抓取页面里的所有要查的歌词及歌名等信息&#xff0c;并存为txt文件 一共46页数据 网站截图如下&#xff1a; 抓取完整歌词数据&#xff0c;如下图…

excel学习1

直接ctrl cctrl v会报错位移选择粘贴时用123那个数字粘贴而不是ctrl V 只要结果不要公式 上面复制的为数值这里是复制的公式他们两个不一样 这个方法太麻烦了直接用格式刷&#xff0c;选择一个区域一个单元格&#xff0c;不要选择多个一刷就出来了 第一个计算后向下拖就行了&…

Ubutu下的Shell操作

前言 在学习Ubuntu系统时&#xff0c;Shell操作是必不可少的知识。本篇文章是记录我学习Linux系统时&#xff0c;Ubutu下的Shell操作&#xff0c;希望我的分享对大家有所帮助&#xff01; 目录 前言 一、什么时是Shell 二、Shell的基本操作 三、常用的Shell命令 1、目录信…

PrestaShop购物系统 SQL注入漏洞复现(CVE-2023-30150)

0x01 产品简介 PrestaShop 是一个功能丰富,基于 PHP5 开发的 Web2.0 网上购物系统。PrestaShop 具有可定制,稳定等特点。整个系统只有 5.8MB,易于快速安装。 0x02 漏洞概述 PrestaShop 的部分主题中使用Leo Custom Ajax模块拓展,Leo Custom Ajax模块中可以在/modules/le…

Hugo使用且部署GitHubPages

hugo的使用 20201121 Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。 安装Hugo 0.windows安装(releases) 下载地址&#xff1a;https://github.com/spf13/hugo/releases。 配置环境变量 验证测试是否安装成功 hugo help1. 二进制安装&#xf…

C#使用DateAndTime.DateDiff方法计算年龄

目录 一、计算年龄的方法 二、 DateAndTime类 1.定义 2.常用方法 3.DateDiff(DateInterval, DateTime, DateTime, FirstDayOfWeek, FirstWeekOfYear) 三、使用DateAndTime.DateDiff方法计算年龄 一、计算年龄的方法 使用DateDiff方法计算系统时间与员工生日之间相隔的年…

续签KES证书

MiniO KES&#xff08;密钥加密服务&#xff09;是 MinIO 开发的一项服务&#xff0c;旨在弥合在 Kubernetes 中运行的应用程序与集中式密钥管理服务 &#xff08;KMS&#xff09; 之间的差距。中央 KMS 服务器包含所有状态信息&#xff0c;而 KES 在需要执行与获取新密钥或更新…

【AI Agent系列】【MetaGPT】7. 一句话订阅专属信息 - 订阅智能体进阶,实现一个更通用的订阅智能体

文章目录 0. 前置推荐阅读1. 本文内容2. 解析用户指令&#xff08;分析用户需求&#xff09;2.1 完整代码及注释2.2 运行结果 3. 利用大模型写爬虫代码3.1 对html内容进行精简3.2 利用大模型写爬虫代码3.3 补充代码&#xff0c;测试本节程序3.4 运行结果及踩坑3.4.1 运行结果3.…

leaflet学习笔记-带过滤的图例(九)

前言 图例不只能够帮助我们在查看地图的时候更加方便容易地分辨不同颜色代表的要素&#xff0c;本文要介绍的图例组件还可以按需求过滤掉不用显示的要素&#xff0c;使地图的更能清晰的显示我们需要显示的内容 技术核心 说到过滤要素&#xff0c;第一时间想到的就是滑块组件…

CmakeList教程

一、CmakeList介绍&#xff1a; cmake 是一个跨平台、开源的构建系统。它是一个集软件构建、测试、打包于一身的软件。它使用与平台和编译器独立的配置文件来对软件编译过程进行控制。它会通过写的语句自动生成一个MakeFile,从而实现高效编译 二、CmakeList的常用指令 1.指定…

瑞_力扣LeetCode_101. 对称二叉树

文章目录 题目 101. 对称二叉树题解方式一 递归方式二 迭代 &#x1f64a; 前言&#xff1a;本文章为瑞_系列专栏之《刷题》的力扣LeetCode系列&#xff0c;主要以力扣LeetCode网的题进行解析与分享。本文仅供大家交流、学习及研究使用&#xff0c;禁止用于商业用途&#xff0c…

电脑 wifi 常断

问题 电脑wifi网络经常断。 详细问题 笔者使用笔记本电脑&#xff0c;发现每过三五分钟&#xff0c;wifi便会自动断开。 解决方案 步骤1、搜索框搜索设备管理器。 步骤2、找到网络适配器并点击。 步骤2、找到网络适配器菜单中的Wireless相关内容&#xff0c;右键&#x…

解读 EventBridge Transform:数据转换和处理的灵活能力

作者&#xff1a;木则 阿里云 EventBridge 提供了强大而灵活的事件总线服务&#xff0c;它可以连接应用程序、阿里云云服务和阿里云 Serverless 服务来快速构建 EDA&#xff08;Event-driven Architectures&#xff09;事件驱动架构&#xff0c;驱动应用与应用&#xff0c;应用…

VisualSVN Server下载安装和使用方法、服务器搭建、使用TortoiseSvn将项目上传到云端服务器、各种错误解决方法

VisualSVN Server下载安装和使用方法、服务器搭建、使用TortoiseSvn将项目上传到云端服务器、各种错误解决方法 0.写在前面00.电脑配置01.思路 1.VisualSVN Server下载安装01.下载02.安装03.电脑命名不能有中文04.制作VisualSVN Server快捷方式05.License limits exceeded, Som…

已解决Error:AttributeError: module ‘numpy‘ has no attribute ‘int‘.

文章目录 引言报错分析解决方案1&#xff1a;降低NumPy版本解决方案2&#xff1a;更改NumPy源码 结尾 引言 在Python编程中&#xff0c;NumPy是一个不可或缺的库&#xff0c;尤其在处理大规模数值计算时。但即使是这个强大的工具&#xff0c;也可能在使用过程中遇到问题。其中…

接口自动化测试框架开发(pytest+allure+aiohttp+ 用例自动生成)

近期准备优先做接口测试的覆盖&#xff0c;为此需要开发一个测试框架&#xff0c;经过思考&#xff0c;这次依然想做点儿不一样的东西。 接口测试是比较讲究效率的&#xff0c;测试人员会希望很快能得到结果反馈&#xff0c;然而接口的数量一般都很多&#xff0c;而且会越来越…

Android开发之部署opencv4

1 新建一个空项目 不再多说 2从官网下载opencv https://opencv.org/releases/ 下载opencv-4.9.0-android-sdk 3 导入模块 点击file->new->Import Module选择解压之后的opencv-android-sdk文件夹中的SDk文件夹&#xff0c;并将:sdk修改为:opencv&#xff08;我的已安…

Linux中Makefile用法及变量

一、介绍 1.Makefile概述 (1)make是一个命令工具&#xff0c;是一个解释makefile中指令的命令工具&#xff0c;一般来说&#xff0c;大多数的IDE 都有这个命令&#xff0c;比如&#xff1a;Delphi的make&#xff0c;Visual C的nmake&#xff0c;Linux下GNU的make (…

工业相机+镜头选型及靶面、焦距计算等相关详解

工业相机镜头选型及靶面、焦距计算等相关详解 着重讲述相机的各个参数及使用意义总结相机镜头选型主要参数的推理计算 0. 工业相机相关概念简介 相机与镜头一览 工业相机与镜头实物图如下图所示&#xff1a; 常见的相机有两种供电方式&#xff1a;一种是电源线供电&#xff0…

怎么抹掉 Macbook系统 并将它还原为出厂设置

抹掉 Mac 并将它还原为出厂设置 借助“抹掉所有内容和设置”这项功能&#xff0c;你可以快速安全地抹掉所有设置、数据和 App&#xff0c;同时保留当前安装的操作系统。 使用“抹掉所有内容和设置” 这项功能要求装有 macOS Monterey 或更高版本&#xff0c;且使用搭载 Apple 芯…
最新文章