Frontend — Vue

模板语法 #

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 #

本文共 968 字,上次修改于 Jul 9, 2024
相关标签: Frontend