Vue.js框架入门之vue简介和基本语法(一）

最新推荐文章于 2024-09-12 11:43:08 发布

那是我呐

最新推荐文章于 2024-09-12 11:43:08 发布

阅读量1.3k

点赞数 4

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

本文链接：https://blog.csdn.net/weixin_42402867/article/details/105588528

版权

Vue.js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Vue.js学了有一段时间了，现在把知识点复习和整理一遍，以免遗忘

一、MVC、MVVM模式简介

1、MVC：Model(模型)+View(视图)+controller(控制器)

主要是基于分层的目的，让彼此的职责分开。View通过Controller来和Model联系，Controller是View和Model的协调者，View和Model不直接联系，基本联系都是单向的。用户User通过控制器Controller来操作模板Model从而达到视图View的变化。

View ：用来把数据以某种方式呈现给用户
Model ：其实就是数据
Controller ：接收并处理来自用户的请求，并将 Model 返回给用户

在不考虑后台框架的前提下，MVC交互过程应该是这样的

学了MVC的框架算是对MVC模式有了新的认识

model：应用程序中处理数据逻辑的一部分，通常用来模型对象对数据库的存存取等操作

view：视图部分，通常指jsp、html等用来对用户展示的一部分

controller：控制层通常用来处理业务逻辑，负责从试图读取数据，并向模型发送数据

view操作会触发controller去改变model，然后model再去改变视图，这么以来，三个部分代码都分开来写，逻辑就会清晰很多；mvvm就是基于这种设计理念，来创新的提出mvvm这种开发理念来处理前端开发，可以说mvvm就是相当于前端的mvc，下面就来说下mvvm。

2、MVVM：Model(模型)+View(视图)+ViewModel(视图模型)

View的变化会自动更新到ViewModel,ViewModel的变化也会自动同步到View上显示。ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。

MVVM模式的框架有：AngularJS、Vue.js和Knockout、Ember.js后两种知名度较低以及是早起的框架模式。

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

二、Vue.js简介

Vue.js的官方文档中是这样介绍它的：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。

简单小巧是指Vue.js压缩后仅有17KB。所谓渐进式（Progressive），就是我们可以一步一步、有阶段性地来使用Vue.js，不必一开始就使用所有的东西。

基于虚拟DOM，一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这个DOM操作属于预处理操作，没有真实的操作DOM，所有叫做虚拟DOM。双向数据绑定，让开发者不用再去操作DOM对象，把更多的精力投入到业务逻辑上。

使用Vue.js可以让Web开发变得简单，同时也颠覆了传统前端开发模式。它提供了现代Web开发中常见的高级功能：

解耦视图与数据
可复用的组件
前端路由
状态管理
虚拟DOM（Virtual DOM）

三、vue.js的安装

1、直接用 `script`引入

在vue官网直接下载vue.js并用 <script> 标签本地引入，Vue 会被注册为一个全局变量。

2、CDN引入

对于制作原型或学习，你可以这样使用最新版本：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

3、NPM安装

NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

# 最新稳定版
$ npm install vue

代码演练

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		Hello World!
	</body>
</html>

运行结果

如果控制台出现以上英文，则说明Vue.js开发环境已经安装成功！

四、Vue 实例

1、创建一个Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
  // 选项
})

代码演练

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="app">
	  {{ message }} {{name}}  //文本插值
	</div>
	
	<script type="text/javascript">
	var app = new Vue({  //vue是对象
		el: '#app',   //id选择器选中id为app标签
		data: {
			message: 'Hello Vue!',  //注册变量并初始化赋值
			name : "Vue"
		}
	});
	</script>

</body>
</html>

运行结果

2、数据与方法

当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

代码演练

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{a}}{{b}}{{c}}
		</div>

		<script type="text/javascript">

			var vm = new Vue({
				el: "#app",
				data:{
				a: 1,
				b: 2,
				c: 3,
			}
			});

			vm.$watch('a', function(newVal, oldVal){
				console.log(newVal, oldVal);
			})   //观察data.a的值是变化

			vm.$data.a = "test...."  //给data.a重新赋值

		</script>

	</body>
</html>

运行结果

可在控制台输出看到a的值的改变，说明data属性的值的改变会引起视图的改变，视图将会产生“响应”。

这种响应即是上文的MVVM模式，View可以通过事件绑定Model，Model可以通过数据绑定View，View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View。

3、生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

Vue 实例生命周期

vue中生命周期分为初始化，跟新状态，销毁三个阶段

初始化阶段：beforeCreated，created，beforeMount，mounted
跟新状态：beforeUpdate，update
销毁vue实例：beforeDestory，destoryed

其中created/mounted 可以用来发送请求，启动定时器等异步任务

beforeDestroy用来收尾工作，如清除定时器

代码演练

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	{{msg}}
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		msg : "hi vue",
	},
	//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
	beforeCreate:function(){
		console.log('beforeCreate');
	},
	/* 在实例创建完成后被立即调用。
	在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
	然而，挂载阶段还没开始，$el 属性目前不可见。 */
	created	:function(){
		console.log('created');
	},
	//在挂载开始之前被调用：相关的渲染函数首次被调用
	beforeMount : function(){
		console.log('beforeMount');

	},
	//el 被新创建的 vm.$el 替换, 挂在成功	
	mounted : function(){
		console.log('mounted');
	
	},
	//数据更新时调用
	beforeUpdate : function(){
		console.log('beforeUpdate');
			
	},
	//组件 DOM 已经更新, 组件更新完毕 
	updated : function(){
		console.log('updated');
			
	}
});
// setTimeout(function(){
// 	vm.msg = "change ......";
// }, 3000);
</script>
</body>
</html>

控制台看输出情况