Vue快速入门

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 模式和 MVC 模式一样，主要目的是分离视图（View）和模型（Model），它有几大好处：

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

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

MVVM的组成部分

MVVM架构如下图所示。

MVVM架构图
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。

<script src="../lib/vue.js"></script>
<script>
    //ViewModel Vue对象
    var vm=new Vue({
        //1、绑定前端页面,和jquery绑定一样
        el:'#app',
        //2、连接后台数据
        data:{
            //未来这里的数据是从后台获取的
            message:'hello vue!'
        }
    })
</script>

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经常使用，因此可以简写为:。示例代码如下：

<!--v-xxx vue的指令-->
<!--v-bind:title  类似于 th:title-->
<div id="app" >
    <!--通过v-bind绑定vm中的data数据-->
    <p v-bind:title="message">这是标题</p>
    <!--由于v-bind常常使用，可以简写为:-->
    <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" >
    <!--如果返回true则显示这个标签，否则隐藏-->
    <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 用于循环或遍历对象。示例代码如下：

<!--vue是一个专注于视图层的框架，相当于一个模板，自动套数据就好了-->
<!--在html中的固定模板-->
<div id="app" >
    <!--遍历items,每一个节点为item-->
    <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" >
    <!--v-on也是经常使用的，可以简写为@-->
    <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" >
    <!--v-bind 绑定data中的值，只能显示data中的值-->
   <input type="text"   :value="searchMap.keyword">
   <!--v-model 双向绑定，可以显示data中的值，但是值改变了，data也会变
        一般用在表单中
    -->
   <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的生命周期

关注两个最常用的钩子函数：

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

axios

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

<!--使用axios--> 
<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" >
    <!-- 组件：自定义标签，内容就是template-->
   <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>

组件的注册和使用

路由

在Vue中使用Vue-router来创建路由，页面路由实际上就是一个个a链接。其原理和使用场景如下图所示。

vue-router的原理示意图

使用vue-router之前需要先安装。

npm install vue-router

示例代码如下：

<div id="app" >
   <!--页面 路由就是a链接-->
   <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 init webpack 项目名