了解MVVM

MVVM 是分为 M、V、VM，即 model、view 和 viewModel。viewModel 关联 view 和 model ，实现双向数据绑定。

Vue

主流版本分为 2.X 和 3.X，是一套用于构建用户界面的渐进式框架。
官方中文文档
Vue 的作者是尤雨曦，这一点一定要知道哦！

Vue 从 2.X 版本开始便不支持 IE8 及以下的浏览器使用，因为在 Vue2.x 中使用了 ES5 新增的 Object.defindProperty() 。这个方法也正是在学习 JavaScript 时了解到的能够实现双向数据绑定的对象方法。这个方法的详解在我之前的博客中有提到过。

感受

学习 Vue 近段时间的感受便是方便！在初体验案例中，我们只需要在 Vue 的实例中绑定对应的模块，然后再使用 Vue 的语法和指令，便能够在 HTML 中轻松的实现类似于 innerHTML、循环创建节点对象等操作，节省了不少编写 JS 代码的时间。

使用

声明：以下仅为个人学习理解，说法可能有偏差或者错误的地方，还请多多谅解。

第一步，绑定一个 Vue 实例

<div id="app">

</div>

const vm = new Vue({
  el:`#app`
})

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
每个 Vue 应用都是通过用 vue 函数创建一个新的 Vue 实例 开始的

这的 el 参数，指向的实例化 Vue 时所关联的 View ，即 id 为 #app 的 div 盒子，在这个盒子中，便可使用 Vue 相关的指令等操作。

第二步，data 数据

在上面创建好的 Vue 实例中，使用 data 字段来为你的实力存储数据：

const vm = new Vue({
  el: `#app`,
  data:{
    message:`这是我的第一个数据`
  }
})

或者写成

const vm = new Vue({
  el: `#app`,
  data:{
    return {
      message:`这是我的第一个数据`
    }
  }
})

这两种写法看起来不同，实际上都可以使里面的属性被调用，然而在学习组件时，组件无法采用对象的形式直接设置参数而要写成函数返回值的形式，所以推荐写成第二种方式（目前为止）。
那么如何在页面上直观的显示呢？

第三布，指令

文本渲染指令：

v-text / {{ valueName }}

 <div id="app">
    {{ message }}
    <!-- 或者 -->
    <span v-text="message"></span>
</div>

v-html

// 如果你的message是这种样子：
data(){
  return { message:`<span>我是span标签</span>` }
}

<!-- 那么则需要使用 v-html 才能正常生成为span标签 -->
<div id="app">
  <div v-html="message"></div>
<!-- 否则只会变成 如下形式 -->
  <div>
    <!-- <span>我是span标签</span> -->
  </div>
</div>

v-bind
v-bind 可以用来绑定如 src、title 等标签属性

 <div id="app">
    <span v-bind:title="message"></span>
    <!-- 或者简写为 -->
    <span :title="message"></span>
    <!-- 但不能直接在 title 属性里调用 data 里的数据，如以下写法 -->
    <span title="message"></span>
</div>

条件渲染：

v-show
v-if
v-else
v-else-if

// 如果你的页面，会根据需求而发生改变，那便使用如上几个指令
data (){
  return {
    flag: true,
  }
}

<div id="app">
    <span v-if="flag"></span>
    <span v-show="flag"></span>
</div>

v-else 和 v-else-if 的用法大同小异，主要是 v-if 和 v-show 的区别：
在初渲染时，如果条件为 false ，则只有 v-show 进行了渲染，而 v-if 不进行渲染，若条件为 true 则都进行渲染。
当对判断条件进行修改时，v-show 会在该标签上添加 style 属性，使用 display:none 进行隐藏，而 v-if 会直接删除该标签！
因此，如果改动不频繁的时候则使用 v-if （如详情页），改动频繁的地方则使用 v-show （如选项卡）