VUE===（1）基础信息

Network porter

已于 2024-03-18 13:22:33 修改

阅读量351

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端前端框架

于 2021-12-09 14:17:17 首次发布

本文链接：https://blog.csdn.net/qq_45438019/article/details/121783424

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

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

前言

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

一、Vue.js是什么？

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

vue2 2023 年 12 月 31 日停止维护

安装

1.直接 script 引入本地 vue 文件。需要通过官网下载 vue 文件。
2.通过 script 引入 CDN 代理。需要联网，生产环境可以使用这种方式
3.通过 npm 安装。这种方式也是官网推荐的方式，需要 nodejs 环境。

二、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>

1、声明式渲染

<!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 已经进行了更新。

2、双向绑定

<body>
    <div id="app">
        <input type="text" v-model="num">
        <h2>
            {{name}}，非常帅！！！有{{num}}个人为他点赞。
        </h2>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        // 创建vue实例
        let app = new Vue({
            el: "#app", // el即element，该vue实例要渲染的页面元素
            data: { // 渲染页面需要的数据
                name: "张三",
                num: 5
            }
        });
    </script>
</body>

双向绑定：
效果：我们修改表单项，num会发生变化。我们修改num，表单项也会发生变化。为了实
时观察到这个变化，我们将num输出到页面。
我们不需要关注他们为什么会建立起来关联，以及页面如何变化，我们只需要做好数据和
视图的关联即可（MVVM）

3、事件处理

<body>
    <div id="app">
        <input type="text" v-model="num">
        <button v-on:click="num++">关注</button>
        <h2>
            {{name}}，非常帅！！！有{{num}}个人为他点赞。
        </h2>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        // 创建vue实例
        let app = new Vue({
            el: "#app", // el即element，该vue实例要渲染的页面元素
            data: { // 渲染页面需要的数据
                name: "张三",
                num: 5
            }
        });
    </script>
</body>

这里用v-on指令绑定点击事件，而不是普通的onclick，然后直接操作num
普通click是无法直接操作num的。

4 条件和循环

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>

5、处理用户输入

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>

6、组件化应用构建()

组件系统是 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>"
		});
		//每个Vue实例都需要关联一段Html模板，Vue会基于此模板进行视图渲染。
		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>

Network porter

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
VUE===（1）基础信息

文章目录前言一、Vue.js是什么？二、Vue怎么来的1.2.三、Vue的优点总结前言提示：以下是本篇文章正文内容，下面案例可供参考一、Vue.js是什么？二、Vue怎么来的1.2.三、Vue的优点总结提示：这里对文章进行总结：例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。...
复制链接

扫一扫