本文已参与「新人创作礼」活动，一起开启掘金创作之路

创建Vue 应用实例

{
  "name": "ninghao-vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0-0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "typescript": "~3.9.3"
  }
}

在 src目录下创建 main.ts ，

import { createApp } from 'vue';
import App from './app/app.vue';

/**
 * 创建应用
 */

const app = createApp(App);
/**
 * 挂载应用
 */

app.mount('#app');

import App from './app/app.vue'; 为root 组件

app.mount('#app'); 中 #app 为html文件中的 id 为 app 的div

Vue 组件框架

<template>
  <h3>hello {{ name }}</h3>
</template>
// HTML 文件放在 template

<script>
// 默认输出以下对象
export default {
  // 数据在data中
  data() {
    return {
      name: 'Alimjan',
    };
  },
  // 需要经过计算可以得到的数据，
  computed: {
    // who 可以直接当做data 使用
    who() {
      return this.name === 'Alimjan' ? 'Son' : 'Father';
    },
  },
  // 需要监控的data
  watch: {
    // name 是data ，有两个参数，第一个是变换后的数据、第二个是原数据
    name(newName, oldName) {
      console.log(`名字发生了变化：${oldName} ->${newName}`);
    },
  },
  // 生命周期* ： 创建后
  // 生命周期不止一个  https://vuejs.org/guide/essentials/lifecycle.html
  created() {
    console.log('app 组建已创建');
    this.setName();
  },
  // 方法， 里面的每一个方法是一个函数
  methods: {
    setName() {
      setTimeout(() => {
        this.name = 'Ablimit';
      }, 3000);
    },
  },
};
</script>

// 样式
// 可以直接写或者引入
<style>
  @import './style/app.css';
</style>

data

在 <template> 中直接用 {{}} 包围即可使用

在 <script> 中使用 this.xxx 应用，可直接赋值更新值

结构如下：

export default {
  
  data() {
    // 返回一个对象，数据在对象内
    return {
      name: 'Alimjan',
    };
  },
 }

computed

通过计算获取的数据，可以直接使用方法的名字调用数据

如需要更改computed的值，可以设置setter → 点击查看

必须返回一个值

export default {
  computed: {
    who() {
      return this.name === 'Alimjan' ? 'Son' : 'Father';
    },
  },
 }

生命周期

组件的生命周期

以created为例，是一个方法，里面可以直接放置要干的事儿，或者一些methods（需要用到 this.xxx）

export default {
  created() {
    console.log('app 组建已创建');
    // 这是 methods 中的 方法
    this.setName();
  },
 }

methods

把用到的方法放在这里。他的结构是一个对象，里面有具体的函数

export default {
  methods: {
    // 一个叫 setName的方法（函数）
    setName() {
      setTimeout(() => {
        this.name = 'Ablimit';
      }, 3000);
    },
  },
 }

watch 数据监视器

方法名称为需要监视的data的名字，有两个参数（新数据，旧数据）

export default {
  watch: {
    // name 为data中的一个数据
    name(newName, oldName) {
      console.log(`名字发生了变化：${oldName} ->${newName}`);
    },
  },
 }

v-on 事件处理

通过v-on绑定事件和触发后执行的动作

绑定事件函数名称放在双引号之间

@click => v-on:click 互通

<template>
  <button v-on:click="resetName">重置</button>
  <button @click="setName">设置</button>
</template>

原生有很多事件（event）可以使用，具体事件列表可点击查看

流程管理

v-if : 按条件显示内容

<template>
  // 根据 vasiable 的 true or false 决定是否显示此 div
  <div v-if="vasiable">
    隐藏的内容
  </div>
</template>

v-for : 列表渲染

<template>
  <div v-for="(good, index) in goods" :key="good._id">
    {{ index + 1 }} {{ good.name }} -- {{ good.catalogue.first }}
  </div>
</template>

v-for="(good, index) in goods" goods 为需要遍历的列表，good指每个列表中的item，index 是自增长序列。

:key="good._id" 每个遍历列表需要有唯一的Key值，不推荐使用Index

组件样式Style

组件的本地样式在<Style> 中管理

<style>
  // 引入Css文件
  @import './style/app.css';
  // 当前页面编写样式
  .menu {
    display: flex;
    gap: 16px;
  }
  .menuItem {
    color: gray;
  }
  .active {
    color: blue;
  }
  button {
    margin: 4px;
  }
</style>

绑定Class

在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

<template>
  <div class="menu">
    <div
      // 指定class Name
      class="menuItem"
      // 条件绑定Class，active是Class Name
        // 当 cerrentIndex === index 为真时，class才会被绑定上
        //{}是一个对象
      :class="{ active: cerrentIndex === index }"
      // :class="['menuItem',{ active: cerrentIndex === index }]"
        // :class 同时接受数组
    >
      {{ item }}
    </div>
  </div>
</template>

Vue入门 - 组建基础