开始学习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.mzph.cn/news/641633.shtml

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

相关文章

正则表达式、grep过滤工具、sed基本用法、sed基本操作指令、sed应用案例

1 案例1&#xff1a;使用正则表达式 1.1 问题 本案例要求熟悉正则表达式的编写&#xff0c;完成以下任务&#xff1a; 利用grep或egrep工具练习正则表达式的基本用法 1.2 方案 表&#xff0d;1 基本正则列表 表&#xff0d;2 扩展正则列表 1.3 步骤 实现此案例需要按照如…

微信小程序之WXSS模板样式、页面配置(.json)和网络数据请求

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…

CS8370错误,这是由于使用了C# 7.3中不支持的功能

目录 背景: 第一种方法: 第二种办法: 背景: 在敲代码的时候&#xff0c;程序提示报错消息提示:CS8370错误&#xff0c;那么这是什么原因导致的&#xff0c;这是由于使用了C# 7.3中不支持的功能&#xff0c;不支持该功能&#xff0c;那就是版本太低我们就需要升级更高的版本&…

振弦采集仪在桥梁健康监测中的应用与分析

振弦采集仪在桥梁健康监测中的应用与分析 振弦采集仪是一种专门用于桥梁健康监测的设备&#xff0c;通过对桥梁结构的振动信号进行采集和分析&#xff0c;可以实时监测桥梁的结构健康状况并提前预警潜在问题。 振弦采集仪主要通过在桥梁结构上安放振弦传感器&#xff0c;采集…

LiveVideoStack人物专访:深耕多媒体二十载,他怎么看未来的视频云?

抓住已知的&#xff0c;迎面未知的。 编者按&#xff1a; 大模型、降本、出海&#xff0c;是多媒体从业者交流的高频词&#xff0c;内容与交互的需求层出不穷&#xff0c;大模型与AI的演进目不暇接&#xff0c;让增速低走的视频云迎面新的机遇和挑战。作为一个跨越中美多媒体行…

[MySQL]基础的增删改查

目录 1.前置介绍 2.数据库操作 2.1显示当前数据库 2.2创建数据库 2.3 使用数据库 2.4 删除数据库 3.常用数据类型 3.1整型和浮点型 3.2字符串类型 4.表的操作 4.1查看表结构 4.2创建表 4.3删除表 5.重点 5.1操作数据库 5.2常用数据类型 5.3操作表 1.前置介绍 …

微信小程序首页、界面布局、功能简洁(示例三)

微信小程序首页界面布局、页面简洁&#xff0c;功能简单 直接上具体代码&#xff1a; 1、js代码 Page({/*** 页面的初始数据*/data: {imgList: [../../images/demo.jpg, ../../images/demo.jpg, ../../images/demo.jpg],navList: [{src: ../../images/nav1.png,title: 菜单一}…

IntelliJ IDEA 快捷键大全

IntelliJ IDEA 快捷键大全 一、文本编辑二、构建、编译项目 一、文本编辑 CtrlN 查找类 CtrlN 查找文件 CtrlF 查找文本 可以根据需求去选择红框内的选项 CtrlX 剪切 剪切选中文本&#xff0c;如果未选中则剪切当前行CtrlC 复制 复制选中文本&#xff0c;如果未选中则复制当前…

机器学习工程师在人工智能时代的角色

机器学习工程师在人工智能时代的角色 在当今的数字时代&#xff0c;人工智能&#xff08;AI&#xff09;已成为许多行业不可或缺的一部分。从流程自动化到增强客户体验&#xff0c;人工智能具有改变企业的巨大潜力。这一变革性技术的核心是机器学习&#xff0c;该领域专注于开…

智慧工厂视频监控平台EasyCVR公网收流后内网设备无法播放是什么原因?

安防视频监控平台EasyCVR采用了开放式的网络结构&#xff0c;支持高清视频的接入和传输、分发&#xff0c;平台提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、云存储等丰富的视频能力&#xff0c;此外&am…

如何在科技创新中发挥国有企业的战略支撑作用?

要在科技创新中发挥国有企业的战略支撑作用&#xff0c;需要采取以下措施&#xff1a; 1. 强化国有企业创新主体地位&#xff1a;鼓励和支持国有企业加强技术创新、产品创新、组织创新和市场创新&#xff0c;提高自主创新能力。政府可以给予国有企业一定的政策和资金支持&…

机器学习分类模型评价指标总结(准确率、精确率、召回率、Fmax、TPR、FPR、ROC曲线、PR曲线,AUC,AUPR)

为了看懂论文&#xff0c;不得不先学一些预备知识&#xff08;&#xff08;55555 主要概念 解释见图 TP、FP、TN、FN 准确率、精确率&#xff08;查准率&#xff09;、召回率&#xff08;查全率&#xff09; 真阳性率TPR、伪阳性率FPR F1-score2TP/(2*TPFPFN) 最大响应分…

netty源码:(46) TailContext

TailContext是DefaultChannelPipeline中的一个内部类&#xff0c;它是一个ChannelInboundHandler TailContext在我们所添加的自己定义的所有ChannelInboundHandler(比如通过addLast方法&#xff09;之后&#xff0c;是整个入栈消息处理的最后一环&#xff0c;也就是tail. 它的…

Django 手把手教你搭建MYSQL多数据源 实现读写分离

目录 一、创建3.2版本的Django项目 二、配置MYSQL多数据源 三、实现读写分离 一、创建3.2版本的Django项目 第一步&#xff1a;创建虚拟环境 第二步&#xff1a;打开终端安装django pip install django3.2 第三步&#xff1a;创建项目 django-admin startproject django_…

windows用msvc编译opencv、opencv-python、opencv_contrib、cuda

如要用mingw编译opencv&#xff0c;参考我另外一篇文章https://blog.csdn.net/weixin_44733606/article/details/135741806。 如要用Ubuntu编译opencv&#xff0c;参考我另外一篇文章https://blog.csdn.net/weixin_44733606/article/details/131720128。 一、安装VS2022&…

夜视成像应用激光照明方法

在夜视成像领域&#xff0c;激光照明的使用主要集中在提高成像质量和远距离观察上。 以下是几种用于夜视成像的激光照明方法&#xff1a; 直接激光照明&#xff1a; 这种方法涉及直接用激光光束照射目标。激光器发出的光束可以是可见光或红外光&#xff0c;具体取决于应用需求和…

elastic search入门

参考1&#xff1a;Elastic Search 入门 - 知乎 参考2&#xff1a;Ubuntu上安装ElasticSearch_ubuntu elasticsearch-CSDN博客 1、ElasticSearch安装 1.1安装JDK&#xff0c;省略&#xff0c;之前已安装过 1.2创建ES用户 创建用户&#xff1a;sudo useradd esuser 设置密码&…

仿真机器人-深度学习CV和激光雷达感知(项目2)day03【机器人简介与ROS基础】

文章目录 前言机器人简介机器人应用与前景机器人形态机器人的构成 ROS基础ROS的作用和特点ROS的运行机制ROS常用命令 前言 &#x1f4ab;你好&#xff0c;我是辰chen&#xff0c;本文旨在准备考研复试或就业 &#x1f4ab;本文内容是我为复试准备的第二个项目 &#x1f4ab;欢迎…

【vue3】GSAP在vue中的使用

一、获取GSAP npm install gsap 二、开始GSAP 导入GSAP&#xff0c;如果需要导入gsap的插件可以参考这里。 import gasp from gsap; 这里用的是选项式&#xff0c;在methods属性中创建一个方法用来写gsap的动画。 gasp_animation(){let tl gasp.timeline({defaults:{ ease:&…

【zlm】针对单个设备的码率的设置

目录 代码修改 实验数据一 实验数据二 同时拉一路视频后 修改记录 使用方法 代码修改 要被子类引用 &#xff0c;所以放在protected 不能放private 下面的结论&#xff0c;可以在下面的实验数据里引用。“同时拉一路视频后” 实验数据一 https://10.60.3.45:10443/index…