安装vite和vue

1
2
3
4
5
6
7
8
9
npm create vite@latest
cd my-project

npm install
npm run dev

#安装Elemant-plus

npm install element-plus --save

在main.js中引入代码

1
2
3
4
5
6
7
8
9
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

在vite.config.js中添加以下部分(按需导入)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

Vue 3 核心概念精要

创建一个 Vue 应用

每个 Vue 应用都是通过 createApp 函数创建一个新的应用实例：

1
2
3
4
5
import { createApp } from 'vue'

const app = createApp({
  /* 根组件选项 */
})

挂载应用

应用实例必须在调用了 .mount() 方法后才会渲染出来：

1
<div id="app"></div>
1
app.mount('#app')

模板语法

文本插值

1
<span>Message: {{ msg }}</span>

原始 HTML

1
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

Attribute 绑定

1
<div :id="dynamicId"></div>

使用 JavaScript 表达式

1
2
{{ number + 1 }}
<div :id="`list-${id}`"></div>

响应式基础

选项式 API

1
2
3
4
5
6
7
export default {
  data() {
    return {
      count: 1
    }
  }
}

组合式 API

1
2
3
4
5
6
7
8
9
<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

计算属性

选项式 API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
export default {
  data() {
    return {
      author: {
        books: ['Vue 2', 'Vue 3']
      }
    }
  },
  computed: {
    publishedBooksMessage() {
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
  }
}

组合式 API

1
2
3
4
5
6
7
8
9
10
11
<script setup>
import { ref, computed } from 'vue'

const author = ref({
  books: ['Vue 2', 'Vue 3']
})

const publishedBooksMessage = computed(() => {
  return author.value.books.length > 0 ? 'Yes' : 'No'
})
</script>

类与样式绑定

绑定对象

1
<div :class="{ active: isActive, 'text-danger': hasError }"></div>

绑定数组

1
<div :class="[activeClass, errorClass]"></div>

绑定内联样式

1
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

条件渲染

v-if

1
2
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

v-show

1
<h1 v-show="ok">Hello!</h1>

列表渲染

v-for

1
2
3
<li v-for="(item, index) in items">
  {{ parentMessage }} - {{ index }} - {{ item.message }}
</li>

键绑定

1
2
3
<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

事件处理

内联事件处理器

1
<button @click="count++">Add 1</button>

方法事件处理器

1
<button @click="greet">Greet</button>

事件修饰符

1
<form @submit.prevent="onSubmit">...</form>

表单输入绑定

文本输入

1
2
<input v-model="message" placeholder="edit me" />
<p>Message is: {{ message }}</p>

复选框

1
2
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>

选择器

1
2
3
4
5
6
<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

生命周期钩子

选项式 API

1
2
3
4
5
export default {
  mounted() {
    console.log(`the component is now mounted.`)
  }
}

组合式 API

1
2
3
4
5
6
7
<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log(`the component is now mounted.`)
})
</script>

侦听器

选项式 API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
export default {
  data() {
    return {
      question: ''
    }
  },
  watch: {
    question(newQuestion, oldQuestion) {
      if (newQuestion.includes('?')) {
        this.getAnswer()
      }
    }
  }
}

组合式 API

1
2
3
4
5
6
7
8
9
10
11
<script setup>
import { ref, watch } from 'vue'

const question = ref('')

watch(question, (newQuestion, oldQuestion) => {
  if (newQuestion.includes('?')) {
    getAnswer()
  }
})
</script>

模板引用

访问模板引用

1
<input ref="input">
1
2
3
4
5
6
7
8
9
<script setup>
import { useTemplateRef, onMounted } from 'vue'

const input = useTemplateRef('input')

onMounted(() => {
  input.value.focus()
})
</script>

组件上的 ref

1
<Child ref="child" />

组件基础

定义组件

1
2
3
4
5
6
7
8
9
<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">You clicked me {{ count }} times.</button>
</template>

使用组件

1
2
3
4
5
6
7
8
<script setup>
import ButtonCounter from './ButtonCounter.vue'
</script>

<template>
  <h1>Here is a child component!</h1>
  <ButtonCounter />
</template>

传递 props

1
2
3
4
5
6
7
<script setup>
defineProps(['title'])
</script>

<template>
  <h4>{{ title }}</h4>
</template>

监听事件

1
2
3
4
5
6
7
<script setup>
defineEmits(['enlarge-text'])
</script>

<template>
  <button @click="$emit('enlarge-text')">Enlarge text</button>
</template>