vue学习笔记1

> cd <your-project-name>
> npm install
> npm run dev

当你准备将应用发布到生产环境时，请运行：

npm run build

Vue结构：

• script
• template (html)
• style (css)

特点:

• template里的数据可以通过script，即JavaScript修改。
• template里的数据与script绑定.

上面的示例展示了 Vue 的两个核心功能：

• 声明式渲染：Vue 基于标准 HTML 拓展了一套 模板语法 ，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。

• 响应性更新：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。

Vue 单文件组件 (Single-File Component，缩写为 SFC)。SFC 是一种可复用的代码组织形式，它将从属于同一个组件的 HTML、CSS 和 JavaScript 封装在使用 .vue 后缀的文件中。
示例：

<script>
export default {
  data() {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg">
</template>

通过扩展于标准 HTML 的模板语法，我们可以根据 JavaScript 的状态来描述 HTML 应该是什么样子的。当状态改变时，HTML 会自动更新。

JavaScript->HTML

message 属性可以在模板中使用。下面展示了我们如何使用双花括号法，根据 message 的值来渲染动态文本.
在双花括号中的内容并不只限于标识符或路径——我们可以使用任何有效的 JavaScript 表达式。
reactive() 只适用于对象 (包括数组和内置类型，如 Map 和 Set)。而另一个 API ref() 则可以接受任何值类型。ref 会返回一个包裹对象，并在 .value 属性下暴露内部值。

在 setup() 函数中手动暴露大量的状态和方法非常繁琐。幸运的是，我们可以通过使用构建工具来简化该操作。当使用单文件组件（SFC）时，我们可以使用 <script setup> 来大幅度地简化代码。

在 Vue 中，mustache 语法 (即双大括号) 只能用于文本插值。为了给 attribute 绑定一个动态值，需要使用 v-bind 指令.
v-bind可以进行元素属性的绑定,文本插值使用双大括号语法,双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，需要使用 v-html 指令.双大括号不能在Attribute 中使用.

事件监听

我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：

v-on:click="handler" 或 @click="handler"。

<!-- 使用内联箭头函数 -->
<button @click="(event) => warn('Form cannot be submitted yet.', event)">
  Submit
</button>

为了简化双向绑定，Vue 提供了一个 v-model 指令，它实际上是上述操作的语法糖：
template
<input v-model="text">

v-model 会将被绑定的值与 <input>的值自动同步，这样我们就不必再使用事件处理函数了。

v-model 不仅支持文本输入框，也支持诸如多选框、单选框、下拉框之类的输入类型。我们在指南 - 表单绑定中讨论了更多的细节。

计算属性缓存 vs 方法

你可能注意到我们在表达式中像这样调用一个函数也会获得和计算属性相同的结果：
若我们将同样的函数定义为一个方法而不是计算属性，两种方式在结果上确实是完全相同的，然而，不同之处在于计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。一个计算属性仅会在其响应式依赖更新时才重新计算。这意味着只要 author.books 不改变，无论多少次访问 publishedBooksMessage 都会立即返回先前的计算结果，而不用重复执行 getter 函数。

reactive()

There is another way to declare reactive state, with the reactive() API. Unlike a ref which wraps the inner value in a special object, reactive() makes an object itself reactive:
js

import { reactive } from 'vue'

const state = reactive({ count: 0 })