模板语法 #

Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令来给 attribute 赋值一个变量。

v-model

v-bind:key

data #

以 $data 的形式存储在组件实例中。为方便起见，该对象的任何顶级 property 也会直接通过组件实例暴露出来

有三种写法，都是定义函数，而不是属性。

name #

属性 props #

方法 methods #

v-model 数据双向绑定

箭头函数 #

计算属性 computed #

computed: {
  now: function () {
    return Date.now()
  }
}

设置 setter #

计算属性默认只有 getter，不过可以自定义一个 setter：

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

计算属性 vs 方法 #

计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。。

计算属性 vs 侦听属性 #

很多场景可以用 computed 替代，考虑 watch 的真正用途不是替代 computed，而是 computed 以外的场景需要。

侦听属性 watch #

watch 用来专门响应数据变化，比如对数据的快速变化进行除抖。

表单输入绑定 v-model #

使用 v-model 在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。

组件引用 #

事件 #

v-on #

简写 @

官方提供的事件列表：

click #

this.$emit #

子组件可以使用 $emit ，让父组件监听到自定义事件 。

this.$on #

父组件可以使用 props ，把数据传给子组件。

生命周期 #

created #

unmounted #

Vue3 和 Vue2 的区别 #

文档 #

2.x官方中文文档 https://cn.vuejs.org/v2/guide/

https://cn.vuejs.org/v2/style-guide/

文件夹命名 #

组件命名 #

命令行主要指的是 Vue CLI 系统 https://cli.vuejs.org/zh/index.html

功能 #

该系统包括了：

• @vue/cli 实现的交互式项目脚手架
• 运行时依赖 @vue/cli-service，该依赖（dependency）包括：
  • 可升级
  • 基于 webpack 构建，并带有合理的默认配置
  • 可通过配置文件进行配置
  • 可通过插件拓展
• 官方插件集合。
• 图形化的创建、管理 vue.js 项目的用户界面

命令行工具 #

@vue/cli #

安装之后，你就可以在命令行中访问 vue 命令。（个人觉得这里面的概念挺割裂的，明明是 vue 的命令行，起了个名字叫 CLI）

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

# 更新
npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli

查看版本

vue --version

通过 vue 命令创建一个项目：

vue create hello-world

相关的命令还有：

Usage: vue <command> [options]

Options:
  -V, --version  output the version number
  -h, --help     output usage information

Commands:
  init           generate a new project from a template
  list           list available official templates
  build          prototype a new project
  create         (for v3 warning only)
  help [cmd]     display help for [cmd]

通过 vue ui 命令可以启动一个 GUI 界面的项目管理器。

cli-service #

在一个 Vue CLI 项目中，@vue/cli-service 安装了一个名为 vue-cli-service 的命令。

{
  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
}

2024 年 04 月 17 日，已经过时，现在可以直接使用 create-vue 来直接创建项目。

npm create vue@latest

cli-plugin #