Vue 基本知识1

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. 接收数据
        2.1 第一种方式
             props:['name','gae']
        2.3 第二种方式
             props:&#123;
               name: String,
               age: Number
               gender: String
             &#125;
        2.4 第三种方式
            props:&#123;
              name: &#123;
                type: String, //限制数据类型
                required: true //这个字段必传
              &#125;,
              age:&#123;
                type: Number,
                required: false
              &#125;,
              gender: &#123;
                type: String,
                default:'男'
              &#125;
            &#125;

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 &#123;
  name: "MyAction",
  methods:&#123;
    showInfo()&#123;
      alert("点我 点我！")
      console.log("click....")
    &#125;
  &#125;
&#125;
</script>

Vue 的组件

new VueComponent(options)

Vue- ElementUI

安装

npm i element-ui 

安装指定版本的

npm i element-ui@2.11.0

使用

在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 网络请求

how to install

ECS 6 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)