Vue快速入门

左手的ㄟ右手 2021-06-10 20:38 498阅读 0赞

## MVVM模式 ##

> 什么是MVVM模式？

MVVM（Model-View-ViewModel）是一种软件架构设计模式，由微软 WPF（用于替代 WinForm，以前就是用这个技术开发桌面应用程序的）和 Silverlight（类似于 Java Applet，简单点说就是在浏览器上运行的 WPF） 的架构师 Ken Cooper 和 Ted Peters 开发，是一种简化用户界面的**事件驱动编程方式**。 由 John Gossman（同样也是 WPF 和 Silverlight 的架构师）于 2005 年在他的博客上发表。MVVM 已经非常成熟了，当下流行的 MVVM 框架有 Vue.js ， AngularJS 等。  
MVVM 源自于经典的 MVC（Model-View-Controller）模式。MVVM 的核心是 ViewModel 层，负责转换 Model 中的数据对象来让数据变得更容易管理和使用，其作用如下：

*  该层向上与视图层进行双向数据绑定。
 *  向下与Model层通过接口请求进行数据交互。  
    ![MVVM模式示意图][MVVM]

> 为什么要使用MVVM？

MVVM 模式和 MVC 模式一样，主要目的是分离视图（View）和模型（Model），它有几大好处：

*  **低耦合**： 视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的 View上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。
 *  **可复用**： 你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 View 重用这段视图逻辑。
 *  **独立开发**： 开发人员可以专注于业务逻辑和数据的开发。（ViewModel），设计人员可以专注于页面设计。
 *  **可测试**： 界面素来是难以测试的，而现在测试可以针对 ViewModel 来写。

**所有的架构本质上都是为了解耦。**、

> MVVM的组成部分

MVVM架构如下图所示。  
![MVVM架构图][MVVM 1]  
**View**  
View 是视图层，也就是用户界面。前端主要由 HTML 和 CSS 来构建，为了更方便地展现ViewModel 或者 Model层的数据，已经产生了各种各样的前后端模板语言，比如 FreeMarker、Thymeleaf 等，各大 MVVM 框架如 Vue.js，AngularJS，EJS 等也都有自己用来构建用户界面的内置模板语言。  
**Model**  
Model 是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则。  
**ViewModel**  
ViewModel 是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型。  
需要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分，而 Model 层的数据模型是只包含状态的。

*  **页面的这一块展示什么，那一块展示什么这些都属于视图状态（展示）。**
 *  **页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为（交互）**。

视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 可以完整地去描述 View 层。  
由于实现了双向绑定，ViewModel 的内容会实时展现在 View 层，这是激动人心的，因为前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图。  
MVVM 框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护ViewModel，更新数据视图就会自动得到相应更新，真正实现事件驱动编程。  
\*\*View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与Model 层交互，这就完全解耦了 View 层和 Model 层。\*\*这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

## 第一个Vue程序 ##

> 什么是Vue？

Vue (读音 /vjuː/，类似于 view) 是一套**用于构建用户界面的渐进式框架**。与其它大型框架不同的是，Vue 被设计为可以**自底向上逐层应用**。Vue 的**核心库只关注视图层**，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

> 测试第一个程序

1、编写视图层，这里使用了Vue的插值表达式`{ {data中的变量}}`。

<div id="app">
      {
       {message}}
    </div>

2、编写Vue对象，需要先导入`vue.js`。

3、给data中的变量message提供数据。

message:'hello vue!'

## Vue的基本指令 ##

在创建Vue示例时，我们可以使用console.log在浏览器控制台打印一下Vue实例对象，查看打印的信息，可以看到Vue实例对象中有些函数带`$`，有些函数不带`$`。**带`$` 的是Vue实例对象自带的函数，不带`$`的是我们自己定义的函数**。  
一个完整的前端项目应该包含以下部分：

*  视图 v-bind(HTML+JS)
 *  事件 v-on(JS)
 *  判断 v-if
 *  循环 v-for
 *  双向绑定 v-model（表单中的常用标签都可以进行绑定）
 *  通信 （Vue是专注于视图层的框架，没有通信功能，官方推荐使用axios）

> v-bind

Vue的基本指令一般形式为：`v-xxx`，和Thymeleaf的`th:xxx`类似。  
v-bind 用于绑定数据和元素属性。由于v-bind经常使用，因此可以简写为`:`。示例代码如下：

<div id="app" >
    	
    	<p v-bind:title="message">这是标题</p>
    	
    	<p :title='message'>这是标题</p>
    </div>
    
    <script src="../lib/vue.js"></script>
    <script>
    	new Vue({
    		el:'#app',
    		data:{
    			message:'时间：'+new Date().toLocaleString()
    		}
    	})
    </script>

> v-if

v-if 用于条件判断，当判断为真，会对条件块进行渲染，否则不渲染。示例代码如下：

<div id="app" >
    	
    	<h2 v-if="type==='A'">type=A</h2>
    	<h2 v-else-if="type==='B'">type=B</h2>
    	<h2 v-else-if="type==='C'">type=C</h2>
    	<h2 v-else>type=other</h2>
     
    </div>
    <script src="../lib/vue.js"></script>
    <script>
    	var vm=new Vue({
    		el:'#app',
    		data:{
    			type:'A'
    		}
    	})
    </script>

> v-for

v-for 用于循环或遍历对象。示例代码如下：

<div id="app" >
    	
    	<li v-for="item in items">
    		{
       {item.message}}    
    	</li>
    </div>
    <script src="../lib/vue.js"></script>
    <script>
    	var vm=new Vue({
    		el:'#app',
    		data:{
    			//mock数据
    			items:[
    				{message:'hello vue'},
    				{message:'hello wunian'}
    			]
    		}
    	})
    </script>

> v-on

v-on 用于事件监听。和v-bind一样也被经常使用，因此可以简写为`@`。示例代码如下：

<div id="app" >
    	
    	<button v-on:click="sayHello">点我</button>
    	<button @click="sayHello">点我</button>
    </div>
    <script src="../lib/vue.js"></script>
    <script>
    	//获取当前对象，在vm中直接使用this即可
    	var vm=new Vue({
    		el:'#app',
    		data:{
    			message:'hello v-on'
    		},
    		//所有的方法都放在这里，放在vm中的方法可以通过v-on指定进行调用
    		methods:{
    			sayHello:function(){
    				alert(this.message)
    			}
    		}
    	})
    </script>

> v-model

v-model 用于表单数据的双向绑定。当数据变化时绑定的表单的值也会变化，同样当表单的值变化时绑定的数据也会变化。示例代码如下：

<div id="app" >
    	
       <input type="text"   :value="searchMap.keyword">
       
       <input type="text" v-model="searchMap.keyword">
    </div>
    <script src="../lib/vue.js"></script>
    <script>
    	var vm=new Vue({
    		el:'#app',
    		data:{
    			searchMap:{
    				keyword:'wunian'
    			}
    		}
    	})
    </script>

> Vue的生命周期

下图展示了实例的生命周期。随着我们的不断学习和使用，它的参考价值会越来越高。  
![Vue的生命周期][Vue]  
关注两个最常用的钩子函数：

*  `created`：Vue实例创建后调用，在模板渲染成html前调用。通常用于初始化某些属性值，然后再渲染成视图。例如可以在created函数中调用ajax获取页初始化所需的数据。
 *  `mounted`：el被新创建的 vm.$el替换，并挂载到实例上去之后调用，在模板渲染成html后调用。通常用于初始化页面完成后，再对html的dom节点进行一些需要的操作。

> axios

axios是一个易用、简洁且高效的http库，用于通信。例如在页面加载完成后访问后端请求获取数据，示例代码如下：

<script src="../lib/axios.js"></script> 
    <script> 
      var vm=new Vue({
    		el:'#app',
    		data(){
    			//编写对象格式，是空的，可以把它看成一个模型
    			return{
    				info:{
    					name:null,
    					address:{
    						street:null,
    						country:null
    					},
    					url:null
    				}
    			}
    		},
    	    // 获取后端或者mock数据！ 
    	    mounted(){ // 在页面加载完成之前执行！ 跨域问题！一般都在后端解决，解决响应头信息！ 
    		  axios
    			.get('localhost:8080/getUser') 
    			.then(response=>(this.info = response.data)); 
    			// response 就是请求响应回来的数据
    	} 
    </script>

## 组件 ##

组件，其实就是自定义标签，其内容定义在template中。示例代码如下：

<div id="app" >
    	
       <component-li v-for="item in items" v-bind:comitem="item">
    
       </component-li>
    </div>
    <script src="../lib/vue.js"></script>
    <script>
       //先注册一个组件
       Vue.component('component-li',{
    	   props:['comitem'],
    	   template:"<li>Hello li</li>"
       })
    	var vm=new Vue({
    		el:'#app',
    		data:{
    			items:['1.xxx','2.xxxx','3.xxx']
    		}
    	})
    </script>

![组件的注册和使用][format_png]

## 路由 ##

在Vue中使用Vue-router来创建路由，页面路由实际上就是一个个a链接。其原理和使用场景如下图所示。  
![vue-router的原理示意图][vue-router]  
使用vue-router之前需要先安装。

npm install vue-router

示例代码如下：

<div id="app" >
       
       <router-link to="/">首页</router-link>
       <router-link to="/student">学员</router-link>
       <router-link to="/teacher">老师</router-link>
    	
       <<router-view></router-view>
    
    </div>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-router.js"></script>
    <script>
       
       //1、定义路由组件
       const Welcome={template:'<div>欢迎</div>'}
       const Student={template:'<div>Student</div>'}
       const Teacher={template:'<div>Teacher</div>'}   
    
       //2、定义路由（核心）
       const routes=[
    	   //请求这个路由会跳转到对应的视图中
    	   {path:'/',redirect: "/welcome"}, //重定向到请求
    	   {path:'/welcome',component: Welcome},//组件直接对应上面定义的组件即可
    	   {path:'/student',component: Student},
    	   {path:'/teacher',component: Teacher},
       ]
    
       //3、创建router实例
       const router=new VueRouter({
    	   //routes:routes（如果同名的话可以缩写）
    	   routes
       })
    
    	var vm=new Vue({
    		el:'#app',
    		router
    	})
    </script>

## vue-cli ##

vue-cli是官方的脚手架工具，以后我们的项目都使用vue-cli来创建。  
全局安装vue-cli工具。

npm install vue-cli -g

安装完成后，使用如下命令进行检测。

vue list

如果输出了如下图所示信息说明vue-cli安装成功。  
![检测vue-cli是否安装成功][vue-cli]  
创建项目后可以使用如下命令进行初始化。

vue init webpack 项目名

[MVVM]: /images/20210607/381358b5015d4fcf8c2a2ce85edbcdf4.png
[MVVM 1]: /images/20210607/0d83feab7e864fc291e33da03c72be8a.png
[Vue]: /images/20210607/be709d64154441cea4f6689ad7ef04ef.png
[format_png]: /images/20210607/b48c1be0a0774522bd226ab59eb95a46.png
[vue-router]: /images/20210607/06998a5f44ae4ca48cf958c122f2788f.png
[vue-cli]: /images/20210607/869f84218375452e840dbaa36f395e3a.png