Vue初识

渐进式框架

既可以把Vue作为应用的一部分嵌入其中（比如一个项目的三个页面原本都是jQuery开发的，可以依次逐步替换成Vue）
也可以用Vue的核心库及其生态系统从零开始搭建一个项目

声明式编程

以前的js是命令式编程：从数据到显示需要执行命令
Vue是声明式编程：在显示中声明变量，后只需修改变量值；数据和显示分离

响应式

当数据发生改变时，视图会跟着改变

特点及功能

Vue的特点及在Web开发中常见的高级功能
：解耦视图和数据、可复用的组件、前端路由技术、状态管理、虚拟DOM

MVVM模式

MVVM：Model-ViewModel-View

View：视图层，DOM，给用户展示信息

Model：数据层，js对象，固定的死数据或来自服务器和网络请求的数据

ViewModel：视图模型层，Vue，是View和Model沟通的桥梁

DOM监听：当DOM发生一些事件（点击、滚动等）时，可以监听到，并在需要的情况下改变对应的data
数据绑定：将Model的改变实时反应到View中

安装

直接CDN引入：<script src=“https://cdn.xxx”>，可以选择引入开发环境版本和生产环境版本
下载和引入：开发环境和生产环境
npm安装：webpack和cli

Vue使用

创建Vue实例

el属性：决定了这个Vue对象挂载到哪一个元素，是一个字符串或一个HTML元素
data属性：存储一些数据，可以是直接定义的，也可以是来自网络，从服务器加载的，实例中的data是一个对象，组件中的data必须是一个函数

<div id="app">{{message}}</div>
<script>
  const app = new Vue({
    el: '#app', //挂载要管理的元素
    data: { //定义数据
      message: '你好啊'
    }
  })
</script>

案例-计数器

methods属性：在Vue实例中定义一系列方法，是一个对象

v-on指令：监听事件

v-on:click="add"：监听click点击事件，事件处理函数绑定为add方法，简写@click="add"（语法糖）

<div id="app">
  <h2>当前计数：{{counter}}</h2>
  <!--<button v-on:click="counter++">+</button>-->
  <!--<button v-on:click="counter--">-</button>-->
  <button v-on:click="add">+</button>
  <button @click="sub">-</button>
</div>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    methods: {
      add: function () {
        this.counter++
      },
      sub: function () {
        this.counter--
      }
    }
  })
</script>