Vue.js介绍

news2025/7/11 14:54:26

目录

一、 Vue.js是什么

二、 Vue.js优点 

三、 前提条件

四、 安装Vue

1.  直接用 script 标签 引入

2.  命令行工具 (CLI)

3. 其他方法或细节应用

五、声明式渲染

六、 理解什么是MVVM

MVVM模式的组成部分

MVVM优点


一、 Vue.js是什么

 Vue.js (vue读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式 JavaScript 框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

二、 Vue.js优点 

  1. 体积小 压缩后33K;
  2. 更高的运行效率基于虚拟dom,一种可以预先通过JavaScript进行各种计算,把最终的DOM                               操作计算出来并优化的技术,由于这个DOM操作属于预处理操作,并没                                 有真实的操作DOM,所以叫做虚拟DOM。
  3. 双向数据绑定让开发者不用再去操作dom对象,把更多的精力投入到业务逻辑上;
  4. 生态丰富、学习成本低:市场上拥有大量成熟、稳定的基于vue.js的ui框架、常用组件!拿来
                                            即用实现快速开发!

 对初学者友好、入门容易、学习资料多;

三、 前提条件

  • 熟悉核心的 HTML, CSS 和 JavaScript 语言,了解终端/命令行。
  • Vue 组件设计成为由管理应用数据的 JavaScript 对象和映射到底层 DOM 结构的 html 模板语法组成的混合体。安装和使用的一些更高级的功能 Vue(如单文件组件或渲染函数),你将需要一个安装了 node 和 npm 的终端。

四、 安装Vue

Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

1.  直接用 script标签 引入

要在现有站点中使用 Vue,可以通过<script>元素在页面中使用。这使您可以开始在现有站点上使用 Vue,这就是 Vue 引以为傲的渐进式框架的原因。当使用 JQuery 这样的库将现有项目迁移到 Vue 时,这是一个很好的选择。通过这种方法,您可以使用 Vue 的许多核心功能,例如属性、自定义组件和数据管理。

  • 开发环境版本,包含了有帮助的命令行警告

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  • 生产环境版本,优化了尺寸和速度,建议您在站点上包含 Vue 时指定版本号,这样任何框架更新都不会影响您的网站。

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

 这种方法有一些局限性。要构建更复杂的应用程序,您需要使用 Vue NPM package。

2.  命令行工具 (CLI)

Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了开箱即用的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。

CLI 工具假定用户对 Node.js 和相关构建工具有一定程度的了解。如果你是新手,我们强烈建议先在不用构建工具的情况下通读指南,在熟悉 Vue 本身之后再使用 CLI。

3. 其他方法或细节应用

参考链接: vue.js 三种方式安装(vue-cli)_muzidigbig的博客-CSDN博客_vue.js安装

五、声明式渲染

传统命令式渲染

修改内部内容,要改一次,刷新一次网页才能更新结果。例如孩子要吃饭,对母亲说要吃蔬菜,母亲来喂菜;要吃肉,母亲来为肉,一段指令对应一个结果。

   <div id="main">

        123

    </div>

    <script>

        var main=document.querySelector('#main');

        main.innerHTML='345';

    </script>

 声明式渲染

孩子要吃饭,对母亲说“我饿了”,母亲会直接端着装了菜、肉、汤的碗来为孩子,一段指令接载了所有可能的结果。

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  }
})
</script>
</body>
</html>

六、 理解什么是MVVM

MVVM是Model-View-ViewModel的简写。[1]它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了,它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。微软的WPF带来了新的技术体验,如Silverlight、音频、视频、3D、动画……,这导致了软件UI层更加细节化、可定制化。同时,在技术层面,WPF也带来了 诸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM(Model-View-ViewModel)框架的由来便是MVP(Model-View-Presenter)模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去,以应对客户日益复杂的需求变化。

MVVM模式的组成部分

  • 模型
  • 模型是指代表真实状态内容的领域模型(面向对象),或指代表内容的数据访问层(以数据为中心)。
  • 视图
  • 就像在MVC和MVP模式中一样,视图是用户在屏幕上看到的结构、布局和外观(UI)。
  • 视图模型
  • 视图模型是暴露公共属性和命令的视图的抽象。MVVM没有MVC模式的控制器,也没有MVP模式的presenter,有的是一个绑定器。在视图模型中,绑定器在视图和数据绑定器之间进行通信。
  • 绑定器
  • 声明性数据和命令绑定隐含在MVVM模式中。在Microsoft解决方案堆中,绑定器是一种名为XAML的标记语言。绑定器使开发人员免于被迫编写样板式逻辑来同步视图模型和视图。在微软的堆之外实现时,声明性数据绑定技术的出现是实现该模式的一个关键因素。

<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">  <!-- view层 -->
			<h2>{{name}}</h2><!-- 大括号语法 -->
		</div>
		<script>
			const vm = new Vue({//MVVM框架  vm层
				el:'#app',
				data:{//model层
					name:'张超'
				}
			})
		</script>
		
	<!-- 	1.重点:理解什么是MVVM。
		2.重点:学会使用html来写vue 
		3.表示动态[key]  :key
		4.重点 v-bind 绑定的意思  是一个vue的指令 v-bind:title的简写:title
		-->
	</body>

MVVM优点

MVVM模式和MVC模式一样,主要目的是分离视图(View)和模型(Model),有几大优点

1. 低耦合。视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。

2. 可重用性。你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。

3. 独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计,使用Expression Blend可以很容易设计界面并生成xaml代码。

4. 可测试。界面素来是比较难于测试的,测试可以针对ViewModel来写。


vue学习资料:介绍 — Vue.js

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

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

相关文章

【CSS扩展】VUE如何使用或修改element plus中自带的CSS全局变量来定义样式

目录 一、CSS声明全局变量 二、使用el plus 和 el ui的自带样式 1、element plus—— var.scss位置 2、element ui—— var.scss位置 三、修改el plus 和 el ui中的自定义样式变量&#xff08;方法一致&#xff09; 本萌新最近在写网页时使用到了element plus中自带的CSS全…

Vue中如何解决跨域问题

跨域 跨域报错是前端开发中非常经典的一个错误&#xff0c;报错如下 Access to XMLHttpRequest at ...... from origin ...... has been blocked by CORS policy: No Access-Control-Allow-Origin header is present on the requested resource. 跨域错误源自于浏览器的同源…

《中秋佳节倍思亲》——2022年这场中秋

中秋佳夜&#xff0c;圆的是月&#xff0c;满的是情&#xff0c;但一人终究扛下离愁 作为一个杭漂者&#xff0c;虽不及北漂般艰难困苦&#xff0c;但也举步维艰啊&#xff01; 或许&#xff0c;这对我而言&#xff0c;正是一个别样的中秋&#xff0c;也正是一个值得我一生纪念…

多端统一开发解决方案---Taro

Taro 一套代码&#xff0c;多端运行&#xff0c;释放双手的摸鱼神器 文章目录Taro 一套代码&#xff0c;多端运行&#xff0c;释放双手的摸鱼神器1. 简介2. 准备工作2.1 安装及使用2.1.1 开发者工具2.1.2 tarojs2.1安装tarojs工具3. Taro 使用4.限制5.路由跳转汇总6.注意事项7.…

vue3:安装配置sass

目录 前言&#xff1a; 1. 安装sass 2. 新建style目录&#xff0c;存放scss文件 3. main.ts 4. vite.config.ts 5. Test.vue 前言&#xff1a; 对于前端开发人员来说&#xff0c;css预处理的语言已经是家常便饭了&#xff0c;如sass&#xff0c;less等等&#xff0c;那么…

深度学习实战 1 YOLOv5结合BiFPN

目录 1. BiFPN论文简介 2. 在Common.py中添加定义模块(Concat) 3. 将类名加入进去&#xff0c;修改yolo.py 4. 修改train.py 5. 修改配置文件yolov5.yaml 1. BiFPN论文简介 论文《EfficientDet: Scalable and Efficient Object Detection》地址&#xff1a;https://arxiv…

微信小程序云开发的具体使用教程

小程序云开发介绍 云开发官方文档 一个小程序在开发时&#xff0c;除了考虑界面功能逻辑外&#xff0c;还需要后端的数据支持。而为了获得后端的数据支持&#xff0c;开发者需要提前考虑服务器、存储和数据库等需求&#xff0c;并且会花费时间精力在部署应用、依赖上。因此官方…

【JavaScript 逆向】网易易盾滑块逆向分析

声明本文章中所有内容仅供学习交流&#xff0c;相关链接做了脱敏处理&#xff0c;若有侵权&#xff0c;请联系我立即删除&#xff01;案例目标验证码&#xff1a;aHR0cHM6Ly9kdW4uMTYzLmNvbS90cmlhbC9qaWdzYXc以上均做了脱敏处理&#xff0c;Base64 编码及解码方式&#xff1a;…

MongoDB数据库性能监控详解

目录一、MongoDB启动超慢1、启动日常卡住&#xff0c;根本不用为了截屏而快速操作&#xff0c;MongoDB启动真的超级慢~~2、启动MongoDB配置服务器&#xff0c;间歇性失败。3、查看MongoDB日志&#xff0c;分析“MongoDB启动慢”的原因。4、耗时“一小时”&#xff0c;MongoDB启…

color ui

color ui——组件使用 组件类型 ColorUI Vant webapp ColorUI 下载地址 Git地址 官网地址 简介 ColorUI是一个css库&#xff01;&#xff01;&#xff01;在你引入样式后可以根据class来调用组件&#xff0c;一些含有交互的操作我也有简单写&#xff0c;可以为你开发提供一…

微信小程序项目实例——我有一支画笔(画画)

微信小程序项目实例——我有一支画笔&#xff08;画画&#xff09; 文章目录微信小程序项目实例——我有一支画笔&#xff08;画画&#xff09;一、项目展示二、首页三、自由绘图四、照片绘图文末项目代码见文字底部&#xff0c;点赞关注有惊喜 一、项目展示 我有一支画笔是一…

JS中let用法

JS中let用法 基本用法 Let命令用来声明变量。它的用法类似于var&#xff0c;但是所声明的变量。只在let命令所在的代码块内有效。 上面代码块中&#xff0c;分别用let和var声明了两个变量。然后在代码块之外调用这两个变量&#xff0c;结果let声明的变量报错&#xff0c;var声…

蓝桥杯刷题冲刺 | 倒计时28天

作者&#xff1a;指针不指南吗 专栏&#xff1a;蓝桥杯倒计时冲刺 &#x1f43e;马上就要蓝桥杯了&#xff0c;最后的这几天尤为重要&#xff0c;不可懈怠哦&#x1f43e; 文章目录1.卡片2.数字三角形3.购物单4.回文日期1.卡片 题目 链接&#xff1a; 卡片 - 蓝桥云课 (lanqiao…

echarts 柱状堆叠图(图例和x轴都是动态的)

问题描述&#xff1a; echarts柱状堆叠图&#xff0c;是很常用的图表&#xff0c;官网的例子很简单 。图例&#xff08;legend&#xff09;&#xff0c;x轴&#xff08;xAxis&#xff09;都是写死的。但是一般实际应用中都是 动态的。下面就举个例子&#xff0c;实现图例和x轴…

uniapp开发微信小程序自定义顶部导航栏

自定义导航栏渐变色&#xff0c;先上效果 使用uniapp开发小程序&#xff0c;在不同界面&#xff0c;要去对页面进行修改顶部导航栏。 比如说要去定义导航栏的背景颜色&#xff0c;常规的去定义导航栏背景颜色 全局定义导航栏 "window": {"navigationBarBackg…

猿创征文|一名大三学生的前端学习之路(真情流露)

✅ 作者简介&#xff1a;一名大三的大学生&#xff0c;致力于提高前端开发能力 ✨ 个人主页&#xff1a;前端小白在前进的主页 &#x1f525; 系列专栏 &#xff1a; node.js学习专栏 ⭐️ 个人社区 : 个人交流社区 &#x1f340; 学习格言: ☀️ 打不倒你的会使你更强&#xf…

vue3中使用axios

vue3中使用axios 1.axios在vue3.x中的基础入门使用 在不涉及使用axios进行请求拦截以及响应拦截的场景下&#xff0c;axios的使用可以简化为以下步骤。 step1. 使用npm安装axios npm install axiosstep2. 我们将要使用的axios实例单独编写成一个js文件&#xff0c;文件夹可以建…

猿创征文|【C++游戏引擎Easy2D】学C++还不会绘制一个简单的二维图形?一篇文章教会你

&#x1f9db;‍♂️iecne个人主页&#xff1a;&#xff1a;iecne的学习日志 &#x1f4a1;每天关注iecne的作品&#xff0c;一起进步 &#x1f4aa;学C必看iecne 本文专栏&#xff1a;【C游戏引擎】. &#x1f433;希望大家多多支持&#x1f970;一起进步呀&#xff01; ✨前…

【Vue组件间通信】 全局事件总线、订阅与发布

目录 一、全局事件总线 作用 安装 组件使用案例 案例分析 组件一&#xff08;小明&#xff09; 组件二&#xff08;小红&#xff09; 效果展示 二、订阅与发布 安装 组件使用案例 案例分析 组件一&#xff08;小明&#xff09; 组件二&#xff08;小红&#xff…

Python爬虫之Web自动化测试工具SeleniumChrome handless

​ ​ 作者 : SYFStrive 博客首页 : HomePage &#x1f967; 上一篇续文传送门 &#x1f4cc;&#xff1a;个人社区&#xff08;欢迎大佬们加入&#xff09; &#x1f449;&#xff1a;社区链接&#x1f517; &#x1f4cc;&#xff1a;如果觉得文章对你有帮助可以点点关注…