代码库

迷你vue

高频知识点

单个组件多个组件

<script>
/*
https://cn.vuejs.org/tutorial/
*/

// 给每个 todo 对象一个唯一的 id
let id = 0

export default {
  data() {
    return {
      message: 'Hello World!',
      titleClass: 'title',
      count: 0,
      text: "",
      awesome: true,
      hideCompleted: false,
      newTodo: '',
      todos: [
        {id: id++, text: 'Learn HTML', done: true},
        {id: id++, text: 'Learn JavaScript', done: true},
        {id: id++, text: 'Learn Vue', done: false}
      ],
      todoId: 1,
      todoData: null
    }
  },
  methods: {
    increment() {
      this.count++
    },
    toggle() {
      this.awesome = !this.awesome
    },
    addTodo() {
      this.todos.push({id: id++, text: this.newTodo, done: false})
      this.newTodo = ''
    },
    removeTodo(todo) {
      this.todos = this.todos.filter((t) => t !== todo)
    },
    async fetchData() {
      this.todoData = null
      const res = await fetch(
          `https://jsonplaceholder.typicode.com/todos/${this.todoId}`
      )
      this.todoData = await res.json()
    }
  },
  // 计算属性
  computed: {
    filteredTodos() {
      return this.hideCompleted
          ? this.todos.filter((t) => !t.done)
          : this.todos
    }
  },
  // 生命周期钩子
  mounted() {
    // 此时组件已经挂载
    this.$refs.pElementRef.textContent = 'mounted!'

    this.fetchData()
  },
  // 监听器
  watch: {
    todoId() {
      this.fetchData()
    }
  }
}
</script>

<template>
  <!-- Attribute绑定 -->
  <!-- v-bind的简写 -->
  <h1 :class="titleClass">{{ message }}</h1>

  <!-- 事件监听 -->
  <!--  v-on的简写  -->
  <button @click="increment">Count is: {{ count }}</button>

  <!--  表单绑定-->
  <input v-model="text">
  <p>{{ text }}</p>

  <!-- 条件渲染 -->
  <button @click="toggle">Toggle</button>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no😢</h1>

  <form @submit.prevent="addTodo">
    <input v-model="newTodo" required placeholder="new todo">
    <button>Add Todo</button>
  </form>
  <!--列表渲染-->
  <ul>
    <li v-for="todo in filteredTodos" :key="todo.id">
      <input type="checkbox" v-model="todo.done">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
  <button @click="hideCompleted = !hideCompleted">
    {{ hideCompleted ? 'Show all' : 'Hide completed' }}
  </button>

  <!-- 生命周期和模板引用 -->
  <p ref="pElementRef">Hello</p>

  <!-- 监听器 -->
  <p>Todo id: {{ todoId }}</p>
  <button @click="todoId++" :disabled="!todoData">Fetch next todo</button>
  <p v-if="!todoData">Loading...</p>
  <pre v-else>{{ todoData }}</pre>
</template>

<style>
.title {
  color: red;
}

.done {
  text-decoration: line-through;
}
</style>

http客户端

https://github.com/imcvampire/vue-axios

vue-axiosgopython

main.jsAPP.vue

import {createApp} from 'vue';
import axios from 'axios'
import VueAxios from 'vue-axios'

const app = createApp(App);

// https://github.com/imcvampire/vue-axios
app.use(VueAxios, axios)

// 多个axios实例
app.use(VueAxios,
    {
        // 第一个axios实例
        $gitee: axios.create({
            baseURL: "https://gitee.com/api/v5",
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json",
            }
        }),
        // 第二个axios实例
        $github: axios.create({
            baseURL: "https://api.github.com",
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json",
            }
        })
    })

// 挂载id=vue-app的html节点
app.mount('#vue-app');

集成ui框架

https://bootstrap-vue-next.github.io/bootstrap-vue-next/docs.html#installation-vue-js

main.jsvite.config.js

import { createApp } from 'vue';
import {createBootstrap} from 'bootstrap-vue-next'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'

const app = createApp(App);

// https://bootstrap-vue-next.github.io/bootstrap-vue-next/docs.html#installation-vue-js
app.use(createBootstrap())

// 挂载id=vue-app的html节点
app.mount('#vue-app');