Vue.js 小白入门记录（202104）

资源

Vue.js 官方文档
 Hello Vue 使用Codepen.io来进行练习
VueMaster
Awesome Vue.js A curated list of awesome things related to Vue.js

首页视频

先看了首页的Why Vue.js的视频内容，获得了几个概念

渐进式框架：可以作为一部分的应用，不需要全部设置
Reusable Components 可复用组件，每个组件都有自己的H C J
响应式框架 Reacitve ：当数据改变的时候，Vue会自动改变所有网页涉及到这个数据的内容
做一个fetch远程拉取，然后通过vue来将显示为页面内容
有Chrome插件可以进行更多信息的查看和检索

文档记录

应用/组件实例

实际上Vue做的似乎是将数据渲染进DOM之中，或者类似通过vue命令来进行绑定，然后可以用更方便地方式来操作
可以设置事件系统,

注意在这个方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。

组件化：组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树（可能也是我们在整理网站，梳理逻辑时可以搞清楚的）

const RootComponent = { 
}
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

应用实例 Application Instance
每个 Vue 应用都是通过用 createApp 函数创建一个新的应用实例开始的。

组件实例 root component instance.
一个应用需要被挂载到一个 DOM 元素中。例如，如果你想把一个 Vue 应用挂载到 <div id="app"></div>，应该传入 #app：与大多数应用方法不同的是，mount 不返回应用本身。相反，它返回的是根组件实例 - >此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示组件实例。
[站外图片上传中...(image-6f1c1-1618475491416)]
（参考 MVC，MVP 和 MVVM 的图示）

组件实例property / Component Instance Properties
在 data 中定义的 property 是通过组件实例暴露的。

const app = Vue.createApp({
  data() {
    return { count: 4 }
  }
})
const vm = app.mount('#app')
console.log(vm.count) // => 4

还有各种其他的组件选项，可以将用户定义的 property 添加到组件实例中，例如 methods，props，computed，inject 和 setup。我们将在后面的指南中深入讨论它们。组件实例的所有 property，无论如何定义，都可以在组件的模板中访问

生命周期钩子
每个组件在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

Vue.createApp({
  data() {
    return { count: 1}
  },
  created() {
    // `this` 指向 vm 实例
    console.log('count is: ' + this.count) // => "count is: 1"
  }
})

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 unmounted。生命周期钩子的 this 上下文指向调用它的当前活动实例。Arrow function expressions 箭头函数表达式
[站外图片上传中...(image-1538af-1618475491416)]

模版语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层组件实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

插值

文本
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。
Mustache 标签将会被替代为对应组件实例中 msg property 的值。无论何时，绑定的组件实例上 msg property 发生了改变，插值处的内容都会更新。请只对可信内容使用 HTML 插值，绝不要将用户提供的内容作为插值。

<span>Message: {{ msg }}</span>

Mustache 语法不能在 HTML attribute 中使用，然而，可以使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>
<button v-bind:disabled="isButtonDisabled">按钮</button>

可以使用JavaScript表达式

{{ ok ? 'YES' : 'NO' }}

指令
指令 (Directives) 是带有 v- 前缀的特殊 attribute。
指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 和 v-on 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。回顾我们在介绍中看到的例子：

<p v-if="seen">现在你看到我了</p>

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。
v-bind 指令可以用于响应式地更新 HTML attribute
v-on 指令，它用于监听 DOM 事件
也可以在指令参数中使用 JavaScript 表达式，方法是用方括号括起来：

<a v-bind:[attributeName]="url"> ... </a>

Data Property 和方法

Data Property
组件的 data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。为方便起见，该对象的任何顶级 property 也直接通过组件实例暴露出来：

const app = Vue.createApp({
  data() {
    return { count: 4 }
  }
})

const vm = app.mount('#app')

console.log(vm.$data.count) // => 4
console.log(vm.count)       // => 4

// 修改 vm.count 的值也会更新 $data.count
vm.count = 5
console.log(vm.$data.count) // => 5

// 反之亦然
vm.$data.count = 6
console.log(vm.count) // => 6

Vue 使用 $ 前缀通过组件实例暴露自己的内置 API。它还为内部 property 保留 _ 前缀。你应该避免使用这两个字符开头的的顶级 data property 名称。

方法
我们用 methods 选项向组件实例添加方法，它应该是一个包含所需方法的对象：

const app = Vue.createApp({
  data() {
    return { count: 4 }
  },
  methods: {
    increment() {
      // `this` 指向该组件实例
      this.count++
    }
  }
})

const vm = app.mount('#app')
console.log(vm.count) // => 4
vm.increment()
console.log(vm.count) // => 5

这些 methods 和组件实例的其它所有 property 一样可以在组件的模板中被访问。在模板中，它们通常被当做事件监听使用，你可以在模板支持 JavaScript 表达式的任何地方调用方法：

<button @click="increment">Up vote</button>
<span :title="toTitleDate(date)">
  {{ formatDate(date) }}
</span>

计算属性 Computed Properties

对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性
你可以像普通属性一样将数据绑定到模板中的计算属性。Vue 知道 vm.publishedBookMessage 依赖于 vm.author.books，因此当 vm.author.books 发生改变时，所有依赖 vm.publishedBookMessage 的绑定也会更新。而且最妙的是我们已经声明的方式创建了这个依赖关系：计算属性的 getter 函数没有副作用，它更易于测试和理解。

计算属性 vs 方法
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的反应依赖关系缓存的。计算属性只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 author.books 还没有发生改变，多次访问 publishedBookMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。