adodo0829 / blog

搭建知识体系
29 stars 4 forks source link

vue 的基本使用 #59

Open adodo0829 opened 4 years ago

adodo0829 commented 4 years ago

vue 的应用

其实官方文档讲得很清楚了... 这里说一下自己的理解吧

vue使用

引入的Vue给我们暴露出了一个 Vue 构造函数, 我们要利用它给我们提供的一些列属性和方法, 以及它的实例来构建我们的组件系统, 通过拼凑组件来搭建我们的页面...所以 vue 项目以组件为单元来组合并完成一个 web 应用...所以如果只是开发一些普通页面我们其实只要把组件单元写好就行了, 当然组件划分也有自己粒度, 稍后再说

组件单元

<!-- template -->
<template>
  <!-- 根元素: 为什么?源码分析再提 -->
  <div id="root">
    <!-- 元素填充: 一系列指令, 事件, 文本节点等 -->
  </div>
</template>

<script>
/*
 * 根组件: new Vue(options) 使用Vue.extend也可以创建
 * 子组件: export default { }
*/

// 暴露出一个对象 用于外部合并
// 对象的属性写法, 往里面塞你想要实现的逻辑, 这也是 vue 优势也是劣势, em...就看你怎么想
export default {
  data() { 
    return {} // 为什么是函数?
  }

  /**
   * lifecycle // 生命周期钩子,干了啥? 合并顺序
  */
  created() {}

  /**
   * methods: 模板中的事件回调, 自定义方法等
  */
  methods: {}
  // 有了上面三个我们就可以开发一些应用了...

  // 但考虑复用性, 复杂需求的话就要引入其他功能了, 后续介绍
  // 混入, 插件, 过滤器, 自定义指令...
}

</script>

<style>
/* 模板样式 */
</style>