小言_互联网的博客

初识Vue框架

2020-04-01 15:16 243人阅读  评论(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可以实现数据和视图的完全分离

对于架构模式简单的分析

  1. MVC

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

    从MVC模式演变而来的，把MVC中的Controller换成了Presenter（呈现），目的就是为了完全切断View跟Model之间的联系，由Presenter充当桥梁，做到View-Model之间通信的完全隔离。
  3. 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
		}
	}
})

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


转载：https://blog.csdn.net/weixin_45582846/article/details/102467647
查看评论
* 以上用户言论只代表其个人观点，不代表本网站的观点或立场