基础（官网 Vue3）

一、安装

将 Vue.js 添加到项目中主要有四种方式：

1. 在页面上以 CDN 包的方式倒入
2. 下载 JavaScript 文件并自行托管
3. 使用 npm 安装
4. 使用官方 CLI 来构建项目

1. CDN

对于制作原型或学习，可以像下面这样使用最新版

<script src="https://unpkg.com/vue@next"></script>

对于生产环境，一定好指定一个明确的版本号

2. 下载并自托管

使用方法和 CDN 类型，就是把文件下载下来放在自己的服务器上使用

• 这些文件可以在 unpkg 和 jsDelivr 这些 CDN 上浏览和下载

3. npm

在用 Vue 构建大型应用时推荐使用 npm 安装，npm 能和好地和诸如 webpack、rollup 模块打包器配合使用

yarn add vue@next
# 或
npm install vue@next

Vue 还提供了编写单文件组件的配套工具，如果想使用但文件组件，则还需要安装 @vue/compiler-sfc

yarn add -D @vue/compiler-sfc
# 或
npm install -D @vue/compiler-sfc

4. 命令行工具（CLI）

yarn global add @vue/cli
# 或
npm install -g @vue/cli

然后在 Vue 项目中运行

vue upgrade --next

5. Vite

Vite 是一个 web 开发构建工具，可以运行以下命令构建 Vue 项目

yarn create vite <project-name> --template vue
cd <project-name>
yarn
yarn dev

二、介绍

1. 声明式渲染

<div id="counter">
  Counter: {{ counter }}
</div>

const Counter = {
  data() {
    return {
      counter: 0
    }
  },
    mounted() {
    setInterval(() => {
      this.counter++
    }, 1000)
  }
}
Vue.createApp(Counter).mount('#counter')

除了文本差值，还可以像这样绑定元素

<div id="bind-attribute">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

const AttributeBinding = {
  data() {
    return {
      message: 'You loaded this page on ' + new Date().toLocaleString()
    }
  }
}
Vue.createApp(AttributeBinding).mount('#bind-attribute')

2. 处理用户输入

<div id="event-handling">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转 Message</button>
</div>

const EventHandling = {
  data() {
    return {
      message: 'Hello Vue.js!'
    }
  },
  methods: {
    reverseMessage() {
      this.message = this.message
        .split('')
        .reverse()
        .join('')
    }
  }
}
Vue.createApp(EventHandling).mount('#event-handling')

Vue 还提供了 v-model指定，可以实现表单输入和应用状态之间的双向绑定

<div id="two-way-binding">
  <p>{{ message }}</p>
  <input v-model="message" />
</div>

const TwoWayBinding = {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
Vue.createApp(TwoWayBinding).mount('#two-way-binding')

3. 条件与循环

条件

<div id="conditional-rendering">
  <span v-if="seen">现在你看到我了</span>
</div>

const ConditionalRendering = {
  data() {
    return {
      seen: true
    }
  }
}
Vue.createApp(ConditionalRendering).mount('#conditional-rendering')

循环

<div id="list-rendering">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

const ListRendering = {
  data() {
    return {
      todos: [
        { text: 'Learn JavaScript' },
        { text: 'Learn Vue' },
        { text: 'Build something awesome' }
      ]
    }
  }
}
Vue.createApp(ListRendering).mount('#list-rendering')

4. 组件化应用构建

<div id="todo-list-app">
  <ol>
     <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，稍后再
      作详细解释。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>

const TodoItem = {
  props: ['todo'],
  template: `<li>{{ todo.text }}</li>`
}
const TodoList = {
  data() {
    return {
      groceryList: [
        { id: 0, text: 'Vegetables' },
        { id: 1, text: 'Cheese' },
        { id: 2, text: 'Whatever else humans are supposed to eat' }
      ]
    }
  },
  components: {
    TodoItem
  }
}
const app = Vue.createApp(TodoList)
app.mount('#todo-list-app')

• 发现一个细节：javaScript 中组件是开头大写，中间驼峰式，html 中组件变成小写了

三、应用 & 组件实例

1. 创建一个应用实例

const app = Vue.createApp({})
app.component('SearchInput', SearchInputComponent)
app.directive('focus', FocusDirective)
app.use(LocalePlugin)

也可以链式

Vue.createApp({})
  .component('SearchInput', SearchInputComponent)
  .directive('focus', FocusDirective)
  .use(LocalePlugin)

2. 根组件

传递给 createApp 的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点。

const RootComponent = { 
  /* 选项 */ 
}
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

• 与大多数应用方法不同的是，mount不返回应用本身。相反，它返回的是根组件实例。

一个 todo 应用组件树可能是这样的：

Root Component └─ TodoList ├─ TodoItem │ ├─ DeleteTodoButton │ └─ EditTodoButton └─ TodoListFooter ├─ ClearTodosButton └─ TodoListStatistics

3. 组件实例 property

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

4、生命周期钩子

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

比如 created 钩子

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

• 还有其他的钩子，如果 mounted、updated 和 unnmounted
• 然后不要在选项 property 或 回调上使用箭头函数

5. 生命周期图示

四、模板语法

1. 插值

文本

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

<span v-once>这个将不会改变: {{ msg }}</span>

• 使用 “Mustache”（双大括号）语法
• 也可以 使用 v-once 指令，执行一次性地差值

2. 原始 HTML

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

• 使用 v-html指令
• 在你的站点上动态渲染任意的 HTML 是非常危险的，因为它很容易导致 XSS 攻击

3. Attribute

<div v-bind:id="dynamicId"></div>

• 使用 v-bind 指令

• 如果绑定的值是 null或undefined，则该 attribute 不会包含在渲染的元素上

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

• 对于布尔 attribute (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同

• 如果该值是一个空字符串，它也会被包含在内，与<button disabled="">保持一致
• 对于其他 falsy 的值，该 attribute 将被省略

4. 使用 JavaScript 表达式

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

5. 指令

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

• 指令是带有v-前缀的特殊 attribute，指令 attribute 的值预期是单个 JavaScript 表达式

参考链接

基础：https://v3.cn.vuejs.org/guide/introduction.html