文章目录

前言
一、Vue.js是什么？
二、Vue怎么来的
三、Vue的优点
四、MVVM模型
五、数据双向绑定原理分析
六、Vue基本的几个指令

前言

提示：以下是本篇文章正文内容，下面案例可供参考

一、Vue.js是什么？

Vue.js是目前最流行的、国产的前端MVVM框架
框架：封装与业务无关的重复代码，形成框架
框架的优势：提升开发效率，提高代码重用性，使前端开发变得简单
渐进式JavaScript框架：
可以由浅入深的，由简单到复杂的使用vue.js
渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。
作者是尤雨溪 ( 华人 ) ，前Google员工
GitHub账号：
官方入门：
vue 2.0API 文档
 vue3.0 API 文档
 GitHub 库

二、Vue怎么来的

尤雨溪谈Vue.js :“我在 Google 的工作需要在浏览器上进行大量原型设计，于是我想要尽快获得有形的东西。当时有些项目使用了 Angular。Angular提供了一些用数据绑定和数据驱动来处理 DOM的方法，所以你不必自己碰DOM。它也有一些副作用，就是按照它规定的方式来构建代码。对于当时的场景而言实在是太重了。

我想，我可以只把我喜欢的部分从Angular中提出来，建立一个非常轻巧的库，不需要那些额外的逻辑。我也很好奇Angular的源码到底是怎么设计的。我最开始只是想着手提取 Angular 里面很小的功能，如声明式数据绑定。Vue 大概就是这么开始的。
用过一段时间之后，我感觉我做的东西还有点前途，因为我自己就很喜欢用。于是我花了更多的时间把它封装好，取了一个名字叫做Vue.js 。

2014年 2月，我第一次将它作为实际的项目发布在 Github 上，并把链接发送到了 Hacker News 上，它就被顶到了首页，然后它在首页待了好几个小时。后来，我写了一篇文章，分享了Vue 第一周的使用数据以及我的感受。那是我第一次看见这么多人在 Github 上为一个项目打星星。我当时一个星期收获了好几百个星星,整个人都激动坏了。

2014年2月25日，发布0.9.0
2015年10月27日，发布1.0.0
2016年4月27日，发布2.0
2020年9月18日，发布3.0.0

三、Vue的优点

体积小 33k
高运行效率

基于虚拟dom,一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。

双向数据绑定

让开发者不用再去操作dom对象，把更多的精力投入到业务逻辑上;

生态丰富，学习成本低，应用广泛 web端、移动端、跨平台应用开发;

市场上拥有大量成熟、稳定的基于vue.js的ui框架、常用组件!拿来即用实现快速开发!对初学者友好、入门容易、学习资料多;

四、MVVM模型

 MVVM是Model-View-ViewModel的简写    本质上就是MVC 的改进版。

MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。MVVM 由 Model,View,ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
在这里插入图片描述
MVVM模式的优势

低耦合：MVVM模式中，数据是独立于UI的，ViewModel只负责处理和提供数据，UI想怎么处理数据都由UI自己决定，ViewModel不涉及任何和UI相关的事，即使控件改变,ViewModel几乎不需要更改任何代码，专注自己的数据处理就可以了
自动同步数据:ViewModel通过双向数据绑定把View层和Model层连接了起来，View和Model这两者可以自动同步。程序员不需要手动操作DOM, 不需要关注数据状态的同步问题，MVVM 统一管理了复杂的数据状态维护（vue是以数据驱动视图）
可重用性：你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
可测试：ViewModel里面是数据和业务逻辑，View中关注的是UI，这样的做测试是很方便的，完全没有彼此的依赖，不管是UI的单元测试还是业务逻辑的单元测试，都是低耦合的

五、数据双向绑定原理分析

render ：使得给予渲染解释比较长
**Touch：**接触
Data：数据 getter 获得者 setter 安排者
Collect as Dependency收集的依赖
Notify 报告
watcher观察者
Trigger re-render ：触发更新渲染
Component Render Function 渲染组件
Virtual Dom Tree 虚拟组件
在这里插入图片描述
这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。这里需要注意的是不同浏览器在控制台打印数据对象时对 getter/setter 的格式化并不同，所以建议安装 vue-devtools 来获取对检查数据更加友好的用户界面。
每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

六、Vue基本的几个指令

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

声明式渲染

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue-demo</title> 
		<!-- Vue.js  的核心是一个允许采用简洁的模
		板语法来声明式地将数据渲染进 DOM 的系统：
打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。
 -->
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app" class="abb">
			{
   
   {message}}
			<!-- 差值表达式 等于jsp的${}-->
		</div>
		<script>
			var app=new Vue({
      
      
				el:".abb",/* #app */
				data:{
      
      
					message:"Hello Vue！"
				}
			})
		</script>
	</body>
</html>

Hello Vue！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue-demo</title> 
		<!-- Vue.js  的核心是一个允许采用简洁的模
		板语法来声明式地将数据渲染进 DOM 的系统： -->
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app-2">
		<!-- 	<span v-bind:title="message2"> -->
		<span :title="message2">
				鼠标悬停几秒钟查看此处动态绑定的提示信息！
			</span>
		</div>
		<script>
			var app1=new Vue({
      
      /*动态绑定 */
				el:'#app-2',
				data:{
      
      /*  实例化一个  时间对象    */
					message2:'页面加载于 ' + new Date().toLocaleString()
				}
			})
		</script>
	</body>
</html>

如果你再次打开浏览器的 JavaScript 控制台，输入 app1.message = ‘新消息’，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新。

条件和循环

v-if

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
			<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app-3">
			<p v-if="seen"> 看到n你了</p>
		</div>
		<script>
/* 继续在控制台输入 app3.seen = false，你会发现之前显示的消息消失了。 */
		var app3=new Vue({
      
      
			el:'#app-3',
			data:{
      
      
				seen:true;
			}
		})
		</script>
	</body>
</html>

if else

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app-3">
			<p v-if="seen"> 看到n你了</p>
		</div>
		<script>
			/* 继续在控制台输入 app3.seen = false，你会发现之前显示的消息消失了。 */
			var app3 = new Vue({
      
      
				el: '#app-3',
				data: {
      
      
					seen: true
				}
			})
		</script>
		<div id="app1">
			<input v-model="app11" />
			{
   
   {app11}}
			<span v-if="app11==='A'">显示</span>
			<span v-else-if="app1==='B'">B</span>
			<span v-else-if="app1==='c'">c</span>
			<span v-else-if="app1==='d'">d</span>
				<!-- <span v-else>no</span> -->
		</div>
		<script>
			var app1=new Vue({
      
      
				el:'#app1',
				data:{
      
      
					app11:'d'
				}
			})
		</script>
	</body>
</html>

V-for

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title> v-for</title>
				<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app-2">
			<ol>				
				<li v-for="todo in gameList ">
					{
   
   {todo.id}}{
   
   {todo.gname}}{
   
   {todo.desc}}
				</li>
			</ol>
		</div>
		<script>
		var vue=new Vue({
      
      
			el:"#app-2",
			data:{
      
      
				gameList:[
				{
      
      id:1001,gname:'王者荣耀',desc:'好玩'},
				{
      
      id:1002,gname:'英雄联盟',desc:'好玩2'},
				{
      
      id:1003,gname:'吃鸡',desc:'好玩3'}]
			}
		})
		</script>
	</body>
</html>

处理用户输入

v-on
反转信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title> v-on</title>
<!-- 为了让用户和你的应用进行交互，我们可以用 v-on 指令添加
一个事件监听器，通过它调用在 Vue 实例中定义的方法： -->
			<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app-5">
			<p> {
   
   {msg}}</p>
			<!--  绑定事件 -->
			<!--  v-on 的简化版是@-->
			<!-- <button v-on:click="reMsg">反转信息</button> -->
			 <button @click="reMsg">反转信息</button>
		</div>
<script>
	var app5=new Vue({
      
      
		el:'#app-5',
		data:{
      
      
			msg:"Hello Vue444444444444",
		},
		methods:{
      
      
			reMsg:function(){
      
      /* 分成数组  在用数组的方法反转  在 吧空格去掉 */
				this.msg = this.msg.split('').reverse().join('')
			}
		}
	})
</script>
	</body>
</html>

v-model

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-model</title>
<!--Vue 还提供了 v-model 指令，它能轻松实现表单输入和
应用状态之间的双向绑定。： -->
			<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app-5">
			<p> {
   
   {msg}}</p>
			<!--  绑定事件 -->
			<input v-model="msg" />
			<button v-on:click="reMsg">反转信息</button>
		</div>
<script>
	var app5=new Vue({
      
      
		el:'#app-5',
		data:{
      
      
			msg:"Hello Vue444444444444",
	 
		},
		methods:{
      
      
			reMsg:function(){
      
      /* 分成数组  在用数组的方法反转  在 吧空格去掉 */
				this.msg = this.msg.split('').reverse().join('')
			}, 
		}
	})
</script>
	</body>
</html>

组件化应用构建()

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用
为了更好的复用代码

构建一个普通的组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title> 组件</title>
				<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app-2">
			<ol>				
				<showGameList v-for="gm in gameList" v-bind:game="gm" v-bind:key="gm.id">
					
				</showGameList>
			</ol>
		</div>
		<script>
		//使用组件   注意 组件名字 不允许大写 使用定义的组件模板 实现渲染列表
		Vue.component('showgamelist',{
      
      
			props:['game'],//定义一个属性，用于组件传值 吧外面的值传到组件里面
			template:"<li>	{
      
      {game.id}}{
      
      {game.gname}}{
      
      {game.desc}}</li>"
		});
		
		var vue=new Vue({
      
      
			el:"#app-2",
			data:{
      
      
				gameList:[
				{
      
      id:1001,gname:'王者荣耀',desc:'好玩'},
				{
      
      id:1002,gname:'英雄联盟',desc:'好玩2'},
				{
      
      id:1003,gname:'吃鸡',desc:'好玩3'}]
			}
		})
		</script>
	</body>
</html>

VUE===（1）