Vue 基础知识

学习网站

• Vue 官网：https://cn.vuejs.org/v2/guide/
• 表严肃：https://biaoyansu.com/22.9
• B 站 kuangshen：https://www.bilibili.com/video/BV18E411a7mC?p=13

安装 Webpack

npm install webpack -g
npm install webpack-cli

脚手架创建项目

vue create myproject

项目的结构分析：

• src

Vue 基础

props

配置 props，功能：接收外部传入的数据。

1. 传递数据

<Student name="Zhang San"/>

2. 接收数据

• 第一种方式：

props: ['name', 'age']

• 第二种方式：

props: {
  name: String,
  age: Number,
  gender: String
}

• 第三种方式：

props: {
  name: {
    type: String, // 限制数据类型
    required: true // 这个字段必传
  },
  age: {
    type: Number,
    required: false
  },
  gender: {
    type: String,
    default: '男'
  }
}

Vue 的事件处理

<button @click="showInfo">点我</button>
<button v-on:click="showInfo2">点我</button>

MyAction Vue component：

<template>
  <button v-on:click="showInfo">点我</button>
</template>

<script>
export default {
  name: "MyAction",
  methods: {
    showInfo() {
      alert("点我 点我！")
      console.log("click....")
    }
  }
}
</script>

Vue 的组件

new VueComponent(options)

Vue - ElementUI

安装：

npm i element-ui

安装指定版本的：

npm i [email protected]

使用，在 main.js 里引入：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

注册：

Vue.use(ElementUI);

Element UI 最新版本的依赖 table 不显示（显示空白），降低版本到 "element-ui": "^2.11.0"：

"dependencies": {
    "axios": "^0.24.0",
    "core-js": "^3.6.5",
    "element-ui": "^2.11.0",
    "vue": "^2.6.11",
    "vue-axios": "^3.4.0"
  },

Vue-Axios 网络请求

ES6 Module 安装：

npm install --save axios vue-axios

Import libraries in entry file：

// import Vue from 'vue'   // in Vue 2
import * as Vue from 'vue' // in Vue 3
import axios from 'axios'
import VueAxios from 'vue-axios'

Usage in Vue 2:

Vue.use(VueAxios, axios)

Usage in Vue 3:

const app = Vue.createApp(...)
app.use(VueAxios, axios)