Vue学习笔记（一）[模板语法、数据绑定、MVVM模型]

无良小老板

已于 2022-03-06 22:14:44 修改

阅读量498

点赞数 1

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

于 2022-03-06 17:10:56 首次发布

本文链接：https://blog.csdn.net/yuyunbai0917/article/details/123311669

版权

Vue 专栏收录该内容

8 篇文章 3 订阅

订阅专栏

Vue学习笔记（一）

Vue介绍

在这里插入图片描述
Vue.js（/vjuː/，或简称为Vue）渐进式JavaScript 框架
是一个用于创建用户界面的开源Model–view–viewmodel前端JavaScript框架，也是一个创建单页应用的Web应用框架。

Vue官网：https://v3.cn.vuejs.org/

搭建Vue开发环境

安装
Vue.js 设计的初衷就包括可以被渐进式地采用。这意味着它可以根据需求以多种方式集成到一个项目中。

将 Vue.js 添加到项目中主要有四种方式：

1.在页面上以 CDN 包的形式导入。
2.下载 JavaScript 文件并自行托管。
3.使用 npm 安装它。
4.使用官方的 CLI 来构建一个项目，它为现代前端工作流程提供了功能齐备的构建设置 (例如，热重载、保存时的提示等等)

CDN

<script src="https://unpkg.com/vue@next"></script>

下载JS文件

如果你想避免使用构建工具，但又无法在生产环境使用 CDN，那么你可以下载相关 .js 文件并自行托管在你的服务器上。
然后你可以通过标签引入，与使用 CDN 的方法类似。

npm安装

在用 Vue 构建大型应用时推荐使用 npm 安装。npm 能很好地和诸如 webpack 或 Rollup 模块打包器配合使用。

# 最新稳定版
$ npm install vue@next

命令行工具 (CLI)

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

yarn global add @vue/cli
# 或
npm install -g @vue/cli

模板语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 
			1.插值语法 用于解析标签体内容
			2.指令语法 用于解析标签 (包括 标签属性、标签体内容、绑定属性..)
		 -->
		<div id="app">
			<h1>插值语法</h1>
			<h2>你好,{{name}}</h2>
			<hr>
			<h1>指令语法</h1>
			<a href="https://t.bilibili.com/">点击学习</a>
			<br /><br />
			<a v-bind:href="url" :title="tou">v-bind绑定</a>
			<!-- v-bind 可以简写为 : -->
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					name:'jack',
					url:'https://www.bilibili.com/video/BV1Zy4y1K7SH?p=54/',
					tou:'其实这是B站'
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述

数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			单向数据绑定:<input type="text" :value="name" /><br />
			<!-- v-model 只能应用于表单类元素(输入类元素)上 -->
			<!-- v-model 可以不写:value 它找的就是value -->
			双向数据绑定:<input type="text" v-model="name" />
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el:"#root",
				data:{
					name:'你好',
				}
			})
		</script>
	</body>
</html>

el与data的两种写法

		<div id="root">
			{{name}}
		</div>
		<script type="text/javascript">
			var v = new Vue({
				el:"#root",
				// data的第一种写法：对象式
				data:{
					name:"好耶"
				},
				/* data 第二种写法：函数式
				data:function(){
					console.info('@@',this)
					return{
						name:'你好'
					}
				}
				*/
			});
			// console.info(v);
			// v.$mount('#root');
		</script>

MVVM模型

MVVM分为三个部分：分别是M（Model，模型层），V（View，视图层），VM（ViewModel，V与M连接的桥梁，也可以看作为控制器）

M：（Model，模型层），主要负责业务数据相关；
V：（View，视图层），顾名思义，负责视图相关，细分下来就是html+css层；
VM：视图模型(ViewModel)，Vue实例对象 V与M沟通的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点；
MVVM支持双向绑定，意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，以此也实现了视图与模型层的相互解耦；

ViewModel是MVVM模式的核心，是连接View和Model的桥梁，它有两个方向：
(1)将模型转化成视图，将后端传递的数据转化成用户所看到的页面。
(2)将视图转化成模型，即将所看到的页面转化成后端的数据