Vue 学习笔记

vue 是用于构建用户界面的渐进式框架。

开发web系统时，可以由后端代码生成html页面（运行结果），但是复杂繁琐。jsp等模板，以及各种mvc模式都是这种方式。

后来逐渐采用了前后端分离方式，即后端将运行结果以json格式传给前端，前端再根据数据，利用js代码动态生成html页面。

用js操作dom，动态生成页面，复杂繁琐。出现了一些js的库，如jquery，来简化操作。但依旧很繁琐。

前端框架可以看作是对dom操作，完成页面更新的一个更完美的方案。目前有很多这样的前端框架，如Angular,react,vue.

Vue 框架是其中一种。渐进式，指可以直接在html页面中以<script>标签引入，代码运行在浏览器环境中，也可以通过node.js方式来开发。

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，即可以执行js语言编写的程序。node.js引入模块化 编码，可以将一个js的程序分解成多个模块来开发与执行。

node.js提供了很多库，并能够以模块的方式引入。 Express是基于node.js的Web应用框架,可以用其来开发web服务端的程序（基于js语言） 。

vue基于node.js开发流程。分模块（每个模块一个.vue文件）开发，然后将各模块打包（包括使用到的库文件）生成js脚本文件和css样式文件，然后在html文件中引入js和样式文件。

vue cli脚手架提供打包工具，以及web服务器，将打包好的文件部署到web服务器上，浏览器就能够访问到生成的页面。

=========================================================

vue 组件，由一个js的字面量对象来定义。

const Counter = {
  data() {
    return {
      counter: 0
    }
  }
}

vue的应用可以看作一颗组件树，首先要创建一根组件。

Vue.createApp(Counter).mount('#counter')

在根组件中可以添加不同的子组件。

要在组件中使用子组件，子组件需要注册，注册有全局注册，由component函数进行全局注册

Vue.createApp({...}).component('my-component-name', {
  // ... 选项 ...
})

全局注册所有的组件意味着即便你已经不再使用其中一个组件了，它仍然会被包含在最终的构建结果中。

你可以通过一个普通的 JavaScript 字面量对象来定义组件

const ComponentA = {
  /* ... */
}
const ComponentB = {
  /* ... */
}
const ComponentC = {
  /* ... */
}

然后在父组件的 components 选项中定义你想要使用的组件，这种方式为局部注册，子组件只在注册了的父组件中可用。父组件可以是任意组件，不要求是根组件。

const app = Vue.createApp({
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})