初识Vue框架

最新推荐文章于 2022-10-28 16:16:59 发布

web 沐

最新推荐文章于 2022-10-28 16:16:59 发布

阅读量733

点赞数 1

分类专栏： Vue 文章标签： Vue

本文链接：https://blog.csdn.net/weixin_45582846/article/details/102467647

版权

Vue 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

初识Vue框架

今天初学Vue框架对Vue框架有了一些简单的认知下面是一些 Vue常用的单词写法以及简单的释义
Integrated集成Development开发Environment环境
MVC—Model模型View视图 Controller控制器
MVP—Model模型View视图Presenter逻辑
MVVM—Model模型View视图ViewModel视图模型
CDN—Content Delivery Network内容分发网络
methods方法
指令：
文本插值{{}}
原始HTML指令：v-html
一次性绑定修饰符：v-once
跳跃编译修饰符：v-pre
动态属性修饰符：v-bind
事件绑定指令：v-on
注意：
文本节点用{{}}文本插值语法，属性节点用v-bind动态属性修饰符。
语法糖：
v-bind:缩为：
v-on:缩为@

引入方式有以下两种

-①开发环境版本，包含了完整的警告和调试模式

<script src="https://vuejs.org/js/vue.js"></script>

②生产环境版本，删除了警告，优化了尺寸和速度

<script src="https://vuejs.org/js/vue.min.js"></script>

这两种方式都是在有网络的前提要求下个人建议可以下在下来在没有网络的时候也可以进行开发！！当然开发的时候尽量用第一种因为第一种包含了完整的警告和调试模式，开发的时候可以清除的知道错误以及书写错误等等；而第二种删除了警告，优化了尺寸和速度，并且进行了压缩，读取速度更快！！

以下是前端的三大框架
Vue.js

优点：更轻量，单页面，简单易学
缺点：不支持IE8
开发团队：中国国内团队开发，作者：尤雨溪
下面为 Vue.js的logo

Angular
优点：完善的框架，包含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等所有功能
缺点：比较笨重，学习成本高，不兼容IE6/7
开发团队：google谷歌
下面为 Angular的logo

react
优点：速度快、跨浏览器兼容、单向数据流、兼容性好
缺点：并不是一个完整的框架，需要加上ReactRouter和Flux才能完成（目前百度阿里等企业已经开始弃用）
开发团队：facebook脸书
下面为 Angular的logo

前端必学Vue的原因

现代前端框架大行其道，前端思想从操作DOM的阶段，升级到操作数据的阶段。
vue作为三大前端框架之一，其中平缓的学习曲线，让好多前端新手非常喜欢，应用也越来越广泛。虽然其他两个框架有facebook和google撑腰，但是vue已经不容小觑了。
无论你去做前端面试还是公司新项目技术选型，vue基本上已是必选名单。
对于Vue的简介
Vue (读音 /vjuː/，读音类似于 view) 是一套用于构建用户界面的渐进式框架。
Vue的官方文档是这样介绍的：简单小巧、渐进式技术栈、足以应付任何规模的应用。
①小巧：Vue.js压缩后仅有17KB大小
②渐进式：可以一步一步，阶段性使用Vue.js，不必一开始就需要学会使用所有东西。这也正是开发者热爱Vue.js的主要原因之一。
通俗理解
抛开官方说法，简单来说，在传统web开发中，我们搭建项目都以html结构为基础，然后通过jquery或js来添加各种特效功能，需要选中每一个元素进行操作，这些内容在简单项目中或者不变的项目还能应付得来。
一旦项目改动或者项目工程较大，代码的修改将是复杂繁琐的，而这时候用了vue，这些问题都不复存在，应用了vue之后将大大缩减工作量。
使用Vue可以让web开发变得更加简单，同时颠覆了传统前端开发模式，提供了现代web开发里常见的高级功能。
例如：
①解耦视图与数据view&&data
②可复用的组件Components
③前端路由router
④状态管理Vuex
⑤虚拟DOM（virtual DOM）等等
…
Vue的架构模式：
架构模式/开发模式MVVM、MVC、MVP。

MVC

全名：Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写。
本质：是一种软件设计典范。M是指业务模型，V是指用户界面，C则是控制器。
①视图是用户看到并与之交互的界面；②模型表示企业数据和业务规则（可以说就是后端接口，用于业务处理）；③控制器接受用户的输入并调用模型和视图去完成用户的需求
概念图：

在这里插入图片描述

用户首先在界面中进行人机交互，然后请求发送到控制器
控制器根据请求类型和请求的指令发送到相应的模型
模型可以与数据库进行交互，进行增删改查操作
操作完成之后，在相应的视图进行显示，此时用户获得此次交互的反馈信息，用户可以进行下一步交互，如此循环。

MVP

简称：MVP 全称：Model-View-Presenter
由来：MVP 是从经典的模式MVC演变而来，它们的基本思想有相通的地方：Controller/Presenter负责逻辑处理，Model提供数据，View负责显示
①Presenter：作为model和view的中间人，从model层获取数据之后传给view，使得View和model没有耦合；②总得来说MVP的好处就是解除view与model的耦合，使得view或model有更强的复用性。
概念图

MVVM

名称：mvvm即Model-View-ViewModel
原理：mvvm的设计原理是基于mvc的，所以说mvvm不算是一种创新，充其量是一种改造，这其中的ViewModel便是一个小小的创新
概念图

以上图中可看出三者之间的关系；可以将ViewMode看作是Model和View的连接桥，View可以通过事件绑定Model，Model可以通过数据绑定View，通过ViewMode可以实现数据和视图的完全分离

对于架构模式简单的分析

MVC

Model(模型)+View(视图)+controller(控制器)
MVP

从MVC模式演变而来的，把MVC中的Controller换成了Presenter（呈现），目的就是为了完全切断View跟Model之间的联系，由Presenter充当桥梁，做到View-Model之间通信的完全隔离。
MVVM（Model-View-ViewModel）

如果说MVP是对MVC的进一步改进，那么MVVM则是思想的完全变革。
它是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应到View上。

架构模式小结

换句话说，我们不关注dom的结构，而是考虑数据该如何储存，用户的操作在view通过viewmodel进行数据处理，分情况是否通过ajax与model层进行交互，再返回到view层，在这个过程中view和viewmodel的数据双向绑定使得我们完全的摆脱了对dom的繁琐操作，而是专心于对用户的操作进行处理，避免了MVC中control层过厚的问题。
VUE----MVVM设计模式，将视图view和模型Model解耦
Vue.js对比jQuery
Vue.js相对来说有何不同？
①jQuery操作DOM举例，点击按钮实现隐藏块区域
实现代码很简单，但是这样会使视图代码和业务
逻辑耦合在一起，随着功能增加，直接操作DOM
也会使得代码越来越难以维护。
②通过vue的MVVM模式，可以将其拆分为视图和数据两部分，并且将其分离。此时只需要关注数据即可，特别简单，DOM的相关操作Vue会搞定，例如上面案例，用Vue.js可以改写为。
Vue简介小结
Vue.js 是目前最火的一个前端框架，是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！
Vue.js 是一套构建用户界面的框架，只关注数据层
框架和库的区别
框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。
例如：node 的 express框架
库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求
例如：jQuery、 Zepot—移动端（0.4s延迟）等

补充：CDN

全称：
Content Delivery Network即内容分发网络。
缘由：
通常用户满意的网页打开时间是在2秒以下。互联网有一项著名的8秒原则。用户在访问Web网页时，如果时间超过8秒就会感到不耐烦，如果下载需要太长时间，他们就会放弃访问。
应用场景：
起初 CDN 是为了改良互联网的效劳质量的。浅显一点说就是接见速率。
假定百度网站如今只需一台效劳器，如今有一个人在上海接见百度，假如该效劳器也在上海，那末一般来讲接见比较快，假如该效劳器在拉萨，那末相对而言接见就比较慢了。那末这个题目标基础原因是收集传输是依赖于网线的，网线越长，那末时刻一定就越久。
怎样处理这个题目呢？实在思绪很简朴，百度在全国各地都布置如出一辙的效劳器就好了，专业一点叫冗余。
本质：
CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，镜像。
优势：
使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。通俗总结如下
①解决了跨运营商和跨地域访问的问题，访问延时大大降低
②大部分请求在CDN边缘节点完成，CDN起到了分流作用，减轻了源站的负载

下面是今天初识Vue 写出的小案例代码
以下为HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<div class="demo">
			<button @click="change">隐藏</button>
			<button @click="change1">显示</button>
			<div class="area" v-show="showArea"></div>
		</div>
	</body>
</html>
		<script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>

以下为 css 样式代码

/* 代码初始化 */
*{
	margin: 0;
	padding: 0;
}
a{
	text-decoration: none;
}
li{
	list-style: none;
}
.demo{
	width: 500px;height: 500px;
	margin: 100px auto 0;
	border: 1px solid black;
	box-sizing: border-box;
	padding: 10px;
}
.area{
	width: 100px;height: 100px;
	background: red;
	border: 1px solid black;
	margin: 0 auto 0;
}

以下为js

new Vue({
	el:'.demo',
	data:{
		showArea:true
	},
	methods:{
		change:function(){
			this.showArea = false
		},
		change1:function(){
			this.showArea = true
		}
	}
})

如有疑问或者问题请留言联系小编！！！！！！！
感谢来访

web 沐

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
初识Vue框架

初识Vue框架今天初学Vue框架对Vue框架有了一些简单的认知下面是一些 Vue常用的单词写法以及简单的释义Integrated集成Development开发Environment环境MVC—Model模型View视图 Controller控制器MVP—Model模型View视图Presenter逻辑MVVM—Model模型View视图ViewModel视图模型CDN—Co...
复制链接

扫一扫