Vue 3: play with web front-end technology (8)

foreword

The content of this chapter is the discussion of VUE basics and related technologies.

Previous article address:

Vue 3: Play with web front-end technology (7) - Lion King's Blog - CSDN Blog

Next article address:

(none)

1. Basics

Official Documentation: Creating a Vue App | Vue.js

1. Create an application

Steps: create an application instance - "mount the application instance

import {createApp} from 'vue'  // 应用实例创建函数
import App from './App.vue'  // 根组件

createApp(App).mount('#app')  //创建以App为入口根组件的应用实例

2. Template syntax

Steps: VUE file-"script tag-"template tag-"use syntax

3. Responsive foundation

4. Calculated properties

5. Class and style binding

6. Conditional rendering

7. List rendering

8. Event handling

9. Form input binding

10. Life cycle

11. Listener

12. Template reference

13. Component basis

2. Related technical discussions

1. How to import pictures into VUE?

To import pictures, it must be imported, not directly referenced by relative path.

Error demonstration:

imageSrc: "@/assets/logo.png",

Correct example:

import logo from "@/assets/logo.png"  //导入图片对象
imageSrc: logo