Vue简介

首先，什么是Vue呢？现在让我们来了解一下！

1.渐进式框架Vue

Vue.js 是一套构建用户界面的渐进式框架。Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库( 如: vue-router,vue-resource,vuex)或既有项目整合。

Vue的渐进式表现为：声明式渲染→组件系统→路由→构建工具

2.安装

创建html文件。用如下方式引入Vue

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

也可以用vue-cli方式创建项目，新手不推荐

3.声明式渲染

用简单的语法模板将数据渲染进Dom系统

也就是 只需要关心 声明在哪里做什么，而不需要关心是如何实现的。

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

   var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'}
    }）  

4.指令：

v-bind：将这个元素节点的 title和Vue实例message保持一致

v-for：可以绑定数组的数据来渲染一个项目列表

v-on：添加一个事件监听器，通过它调用在 Vue 实例中定义的方法

v-model：能轻松实现表单输入和应用状态之间的双向绑定

5.MVVM模式-双向数据绑定

ViewModel 能够观察到数据的变化并对对应的内容作评论，能够监听到视图的变化，并能够通知数据发生改变。

他的核心就是实现DOM监听与数据绑定

6.组件化

页面上每个独立的可交互的区域视为一个组件

每个组件对应一个工程目录

组件可自由嵌套组合形成完整的界面