Vue学习

在对Vue进行学习的时候，通过其官方文档能够精准而又快速的了解Vue框架具有的各种功能及其详细的API，但我也发现官方文档主要是基于HTML、CSS、JS文件直接引入包来进行Vue的使用的，这导致同样的东西在写法上或者目录结构安排上会有一些不一样的地方，因此我补充学习了相关视频，为了快速上手功能开发本文打算都基于.vue单文件的工程开发模式结合官方文档进行学习

指令

Vue指令是带有v-前缀的特殊标签属性。
v-show的底层原理是控制css的display: none标签来控制显示和隐藏，而v-if是根据条件判断控制创建或移除元素，v-show适合频繁切换显示和隐藏的场景，比如购物车略缩窗口，v-if则适合不频繁的。v-else和v-else-if指令则是辅助v-if进行判断渲染，需要紧挨v-if进行使用。
v-on用以绑定事件监听器，事件类型由参数指定，可以直接接内联语句实现逻辑，也可以在vue实例中配置methods处理函数，v-bind是把Vue实例中的响应式表达式绑定到元素的 属性或组件的prop上，把数据“动态地”插到 HTML 属性/组件参数里，v-model用以实现表单或组件值和Vue数据之间的双向同步。

Vue工程化

Vue项目创建完毕后关键文件就三个，main.js、index.html、App.vue。
index.html是模板文件，在传统开发中，我们是直接把相关的模板语法编写在html文件中的，现在则是通过App.vue提供结构渲染。main.js核心作用是导入App.vue根组件，基于App.vue创建结构渲染index.html。
项目启动流程是先在main.js中导入Vue、导入App.vue、再实例化Vue，将App.vue渲染到index.html容器中。

组件化

主要分为头部组件、导航组件、主题组件、底部组件，组件下又会有很多组件，各个组件都在App.vue根组件之中，其是整个应用最上层的组件。
.vue单文件组件包含三个结构——template标签、行为——script标签、样式——stlye标签。
在script标签中export default的作用是导出当前组件的配置项，对应大括号里可以进行和官方文档中在Vue实例中编写选项对象、生命周期钩子一样的操作。

计算属性和侦听器

计算属性和方法有类似之处，总之都是通过表达式计算返回一个值替代冗长的模板，看起来清爽也便于维护。其不同之处在于计算属性是基于它们的响应式依赖进行缓存的，这就意味着只要message还没有发生改变，多次访问reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数，相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

<div id="example">
  <p>Original message: ""</p>
  <p>Computed reversed message: ""</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

这就使得计算属性能够完成许多侦听属性能够完成的任务，当你有一些数据需要随着其它数据变动而变动时，我们往往想到使用watch属性，然而，通常更好的做法是使用计算属性而不是命令式的watch回调。