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

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

目录

一、MVC、MVVM模式简介

二、Vue.js简介

三、vue.js的安装

         1、直接用 script引入

2、CDN引入

3、NPM安装

代码演练

四、Vue 实例

1、创建一个Vue实例

代码演练

2、数据与方法 

代码演练

3、生命周期

代码演练


一、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 能很好地和诸如 webpackBrowserify 模块打包器配合使用。同时 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中生命周期分为初始化,跟新状态,销毁三个阶段

  1. 初始化阶段:beforeCreated,created,beforeMount,mounted
  2. 跟新状态:beforeUpdate,update
  3. 销毁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>

控制台看输出情况

 

 

笔者在这之前学过微信小程序的开发,Vue.js的基本语法与微信小程序语法大同小异。

 

后续~~~~~~

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值