Frontend — Vue

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

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

Vue