起步
npm install vue@next 最新稳定版

VsCode 目录说明

build 构建相关
config 配置相关
node_modules npm加载的项目依赖模块
src 源代码
- App.vue 入口页面
- main.js 入口加载组件初始化等
static 静态资源
index.html html模板
package.json

启动过程

main.js ```javascript import { createApp } from ‘vue’ import App from ‘./App.vue’

const app = createApp(App) // 全局组件挂载 app.component(‘DictTag’, DictTag) // 注册或检索全局指令 app.directive(‘focus’, FocusDirective) // 将插件添加到应用程序中 app.use(router)

app.mount(‘#app’)


   - createApp 的参数是根组件App，在挂载应用时，该组件时渲染的起点
   - 使用 mount 将一个应用挂载在DOM元素中
<a name="eVhVJ"></a>
## 生命周期钩子
![lifecycle.svg](https://cdn.nlark.com/yuque/0/2022/svg/310614/1641284602289-afcfd192-2ca1-4e34-9c1e-7e255e160b7a.svg#clientId=u046ffebd-7789-4&from=ui&id=u2e523839&margin=%5Bobject%20Object%5D&name=lifecycle.svg&originHeight=1388&originWidth=838&originalType=binary&ratio=1&size=8586&status=done&style=none&taskId=u2da06e40-7a07-4358-9e48-383c5f88105)
<a name="i58OU"></a>
## 模板语法
<a name="FDw1L"></a>
## 文本
<span>Message: {{ msg }}</span> <br />只要绑定的组件实例上 msg property 发生了改变，插值处的内容都会更新<br /><span v-once>这个将不会改变: {{ msg }}</span><br />只作用一次
<a name="jl21Q"></a>
## 指令
指令(Directives)是带有 v- 前缀的特殊 attribute<br />指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM<br /><p v-if="seen">现在你看到我了</p><br />根据表达式 seen 的值来插入/移除元素<br /><a v-bind:href="url"> ... </a><br /><a :href="url"> ... </a>  缩写<br />参数值绑定<br /><a v-on:click="doSomething"> ... </a><br /><a @click="doSomething"> ... </a> 缩写<br />监听事件名绑定<br /><form v-on:submit.prevent="onSubmit">...</form><br />修饰符(modifier)以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定<br />如 .prevent 指定 v-on 对于出发的事件调用 event.preventDefault()<br /><a :[key]="url"> ... </a>  动态参数<br />应避免使用大写字符，因为浏览器会把 attribute 名全部强制转为小写<br />动态参数会预期求出一个字符串，null 除外。null 值可以用于显示的移除绑定。任何其他非字符串类型的值都会出发一个警告
<a name="bk5Rn"></a>
## Data Property
组件的 data 选项是一个函数，Vue 会在创建新组件实例的过程中调用此函数<br />预期返回一个对象，Vue 会通过响应式系统将其包裹起来，并以 $data 的形式存储在组件实例中<br />为方便起见，该对象的任何顶级property也会直接通过组件实例暴露出来
直接将不包含在 data 中的新property添加到组件实例中是可行的<br />但由于该 property 不在响应式 $data 对象内，所以 Vue 的响应式系统不会自动跟踪它
Vue 使用 $ 前缀通过组件实例暴露自己的内置 API<br />它还为内部 property 保留 _ 前缀<br />应该避免使用这两个字符开头的顶级 data property 名称
```javascript
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

方法

使用 methods 选项向组件实例添加方法，应该是一个包含所需方法的对象
方法应只有纯粹的数据逻辑，而不去处理 DOM 事件细节

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

Vue 自动为 methods 绑定 this，以便于它始终指向组件实例
在定义 methods 时应避免使用箭头函数，因为这会阻止 Vue 绑定恰当的 this 指向

在组件的模板中被访问
{{ formatDate(date) }}
直接从模板中调用方法，前提是在计算属性不可行的情况下
从模板调用的方法不应该有任何副作用，比如更改数据或触发异步进程。此时应使用生命周期钩子

计算属性

对于任何包含响应式数据的复杂逻辑，都应该使用计算属性
计算属性的 getter 函数没有副作用
计算属性基于它们的响应依赖关系缓存，只会在相关响应式依赖发生改变时重新求值。只要相关依赖没有发生改变，多次访问时计算属性会立即返回之前的计算结果，而不必再次执行函数

Vue.createApp({
  data() {
    return {
      author: {
        books: [
          'Vue 2 - Advanced Guide'
        ]
      }
    }
  },
  computed: {
    // 计算属性的 getter
    publishedBooksMessage() {
      // `this` 指向 vm 实例
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
  }
}).mount('#computed-basics')

侦听器

当需要在数据变化时执行异步或开销较大的操作时，建议使用侦听器

<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script>
  const watchExampleVM = Vue.createApp({
    data() {
      return {
        question: '',
        answer: 'Questions usually contain a question mark. ;-)'
      }
    },
    watch: {
      // 每当 question 发生变化时，该函数将会执行
      question(newQuestion, oldQuestion) {
        if (newQuestion.indexOf('?') > -1) {
          this.getAnswer()
        }
      }
    },
    methods: {
      getAnswer() {
        this.answer = 'Thinking...'
        axios
          .get('https://yesno.wtf/api')
          .then(response => {
            this.answer = response.data.answer
          })
          .catch(error => {
            this.answer = 'Error! Could not reach the API. ' + error
          })
      }
    }
  }).mount('#watch-example')
</script>

Class与Style绑定

active 这个 class 存在与否将取决于 data property isActive 的值

需要在data property中创建对象 classObject
也可以绑定一个返回对象的计算属性，使用 data property + computed 的形式

## 条件渲染

Vue is awesome!

Oh no 😢

Hello!

## 列表渲染

{{ item.message }}

items为一个数组
index为item的索引

{{ name }}: {{ value }}

myObject为一个对象
name:value 是一个键值对
在遍历对象时，会按 object.keys() 的结果遍历，所以不保证在不同的 JavaScript 引擎下的结果都一致

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一的 key attribute ## 事件处理若需要在内联语句处理器中访问原生的 DOM 事件，可以用特殊变量 $event 把它传入方法
可以绑定多个事件，用逗号分隔
事件修饰符 ```html

…

Do something

```

表单输入绑定

v-model
忽略所有表单元素的 value、checked、selected attribute的初始值
始终将当前活动实例的数据作为数据来源，应该通过 JavaScript在组件的 data 选项中声明初始值

组件基础

组件是可复用的实例，所以与根实例接收相同的选项，如 data、computed、watch、methods 以及生命周期钩子