Vue 常用指令

Vue 常用指令

下载 Vue3.0 单文件核心库：

https://unpkg.com/vue@3.0.0-beta.17/dist/vue.global.js

Vue 常用指令

Demo

第一个 Vue3.0 的 Demo

DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="vue.beta.17.js">script>
    head>

    <body>
        <div id="app">
            {{ message }}
        div>
    body>

    <script>
        const { createApp } = Vue

        const message = 'hello world!'

        const app = {
            setup() {
                return {
                    message
                }
            }
        }

        createApp(app).mount('#app')
    script>

    <style>

    style>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

v-text 和 v-html

v-text 和 v-html

DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="vue.beta.17.js">script>
    head>

    <body>
        <div id="app">
            <div>
                <div v-text="message">div>
                <div v-html="message1">div>
            div>
        div>
    body>

    <script>
        const { createApp } = Vue

        const message = 'hello world!'
        const message1 = 'hello moon!
'

        const app = {
            setup() {
                return {
                    message,
                    message1
                }
            }
        }

        createApp(app).mount('#app')
    script>

    <style>

    style>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

v-bind

v-bind 绑定标签的属性

DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="vue.beta.17.js">script>
    head>

    <body>
        <div id="app">
            <div>
                <a v-bind:href="url">点击a>
            div>

            
            <div>
                <a v-bind:[attr]="url">点击a>
                
                <a :[attr]="url">点击a>
            div>
        div>
    body>

    <script>
        const { createApp } = Vue

        const url = 'https://www.baidu.com'
        const attr = 'href'

        const app = {
            setup() {
                return {
                    url,
                    attr
                }
            }
        }

        createApp(app).mount('#app')
    script>

    <style>

    style>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

v-on

v-on 监听事件

DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="vue.beta.17.js">script>
    head>

    <body>
        <div id="app">
            <div>
                <a v-on:click="onClick" href="javascript:void(0);">点击a>
                
                <a @click="onClick" href="javascript:void(0);">点击a>
            div>
        div>
    body>

    <script>
        const { createApp } = Vue

        const app = {
            setup() {
                function onClick(event) {
                    console.log(event)
                    alert('hello!')
                }

                return {
                    onClick
                }
            }
        }

        createApp(app).mount('#app')
    script>

    <style>

    style>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

v-if 和 v-show

条件渲染 v-if 和 v-show

频繁切换 DOM 节点的显隐时，推荐使用 v-show
渲染一个 DOM 节点的开销或成本比较大时，推荐使用 v-if

DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="vue.beta.17.js">script>
    head>

    <body>
        <div id="app">
            <div>
                <div v-if="flag">{{ message }}div>

                <div v-show="flag">{{ message }}div>
            div>
        div>
    body>

    <script>
        const { createApp } = Vue

        const message = "hello moon!"
        const flag = false

        const app = {
            setup() {
                return {
                    message,
                    flag
                }
            }
        }

        createApp(app).mount('#app')
    script>

    <style>

    style>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

区别：

为 true 时：

在这里插入图片描述

为 false 时：v-if 在 DOM 节点中不存在，v-show 为 display: none; 状态

在这里插入图片描述

v-if 多项条件渲染

v-if、v-else-if、v-else

DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="vue.beta.17.js">script>
    head>

    <body>
        <div id="app">
            <div>
                <div v-if="flag">{{ message }}div>
                <div v-else="flag">{{ message1 }}div>

                <div v-if="color === 'red'" style="background-color: red;">reddiv>
                <div v-else-if="color === 'green'" style="background-color: green;">greendiv>
                <div v-else style="background-color: yellow;">yellowdiv>
            div>
        div>
    body>

    <script>
        const { createApp } = Vue

        const app = {
            setup() {
                const message = "hello world!"
                const message1 = "hello moon!"
                const flag = true
                const color = 'yellow'

                return {
                    message,
                    message1,
                    flag,
                    color
                }
            }
        }

        createApp(app).mount('#app')
    script>

    <style>

    style>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

v-for

v-for 列表渲染

DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="vue.beta.17.js">script>
    head>

    <body>
        <div id="app">
            
            <ul>
                <li v-for="(item, index) in titles">{{ index }} - {{ item }}li>
            ul>

            
            <ul>
                <li v-for="(value, key, index) of book">{{ index }} - {{ key }} : {{ value }}li>
            ul>
        div>
    body>

    <script>
        const { createApp } = Vue

        const app = {
            setup() {
                const titles = ['蟑螂恶霸', "鲨鱼辣椒", "蝎子莱莱"]
                const book = {
                    title: '《平凡的世界》',
                    author: '路遥',
                    pubdate: '1986-12'
                }

                return {
                    titles,
                    book
                }
            }
        }

        createApp(app).mount('#app')
    script>

    <style>

    style>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

相关阅读:
网络代码理解
 spring5
IDEA控制台中文乱码
 古代汉语复习资料与练习题(适合王力版教材)
代码随想录day31｜开始贪心咯｜贪心理论｜455.分发饼干｜376. 摆动序列｜53. 最大子序和｜复习day2｜Golang
Linux——（第五章）用户管理
 shiro的简单介绍
 Spring 整合嵌入式 Tomcat 容器
 SpringBoot集成WebSocket实现在线聊天
 LabVIEW学习记录2 - MySQL数据库连接与操作
原文地址：https://blog.csdn.net/weixin_44514254/article/details/126754610