VUE3 入门

最新推荐文章于 2024-04-02 17:59:26 发布

追风人聊Java

最新推荐文章于 2024-04-02 17:59:26 发布

阅读量756

点赞数

分类专栏：前端文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/u011181989/article/details/121803800

版权

前端专栏收录该内容

33 篇文章 3 订阅

订阅专栏

1. 概述

2. 安装开发工具 Visual Studio Code

3. VUE3 入门

4. 综述

5. 个人公众号

1. 概述

老话说的好：没有别人混的好，是因为自己能力欠佳，因此越是混的差，越要努力提升自己。

言归正传，现在 jquery 用的越来越少，大部分公司都使用 VUE 技术，今天我们也来聊聊 VUE3。

2. 安装开发工具 Visual Studio Code

前端页面通常使用 Visual Studio Code 工具进行开发。

可以到官网进行下载并安装：https://code.visualstudio.com/

3. VUE3 入门

3.1 引入 VUE3

在 HTML 页面引入 <script src="https://unpkg.com/vue@next"></script> 即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>title</title>
    <!-- 引入vue -->
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    
</body>

3.2 在元素中追加内容

<body>
    <div id="myDiv"></div>
</body>
<script>
    Vue.createApp({     // 创建一个vue实例
        template: '<div>hello 追风人!</div>' 
    }).mount('#myDiv');  // 绑定id为myDiv的元素
</script>

在 id 为 myDiv 的元素中，追加 <div>hello 追风人!</div>

3.3 元素绑定数据

<body>
    <div id="myDiv"></div>
</body>
<script>
    Vue.createApp({     // 创建一个vue实例
        data() {
            return {
                content: 'hello'      // content 的值会替换 {{content}} 的值
            }
        }, 
        template: '<div>{{content}}</div>' 
    }).mount('#myDiv');  // 绑定id为myDiv的元素

content 对应的值，会显示在追加的元素中，替换 {{content}}

3.4 动态修改元素的内容

<body>
    <div id="myDiv"></div>
</body>
<script>
    Vue.createApp({     // 创建一个vue实例
        data() {
            return {
                content: 'hello 追风人'      // content 的值会替换 {{content}} 的值
            }
        }, 
        methods : {
            myClick() {   
                this.content = 'hello zhuifengren';
            }
        },
        template: `
            <div>
                {{content}}
                <button v-on:click="myClick">修改文字</button>
            </div>
　　　　　　`
    }).mount('#myDiv');  // 绑定id为myDiv的元素
</script>

增加按钮元素，在按钮中使用 v-on:click 为按钮增加 onClick 事件，在 methods 中增加事件方法，事件方法中修改数据 content 的值，元素中 {{content}} 的值会同步变化

点击按钮前：

点击按钮后：

3.5 动态隐藏或显示元素

<body>
    <div id="myDiv"></div>
</body>
<script>
    Vue.createApp({     // 创建一个vue实例
        data() {
            return {
                isShow: true
            }
        }, 
        methods : {
            myClick() {   
                this.isShow = !this.isShow
            }
        },
        template: `
            <div>
                <span v-if="isShow">hello 追风人</span>
                <button v-on:click="myClick">显示/隐藏</button>
            </div>
　　　　　`
    }).mount('#myDiv');  // 绑定id为 myDiv 的元素

在元素中使用 v-if="数据" 来控制元素是否显示，数据为 true 显示，false 为不显示

显示：

隐藏：

3.6 遍历数据集合展示列表元素

<body>
    <div id="myDiv"></div>
</body>
<script>
    Vue.createApp({     // 创建一个vue实例
        data() {
            return {
                list: ['hello', 'world', 'zhuifengren']
            }
        }, 
        
        template: `
            <ul>
                <li v-for="(item, index) of list">{{item}} {{index}}</li>
            </ul>
        ` 

    }).mount('#myDiv');  // 绑定id为 myDiv 的元素
</script>

v-for="item of list" 是从list数据中循环取出元素，放到item中，下标放到 index 中

3.7 获得input元素的值

<body>
    <div id="myDiv"></div>
</body>
<script>
    Vue.createApp({     // 创建一个vue实例
        data() {
            return {
                inputValue : '',
            }
        }, 
        methods: {
            myClick() {
                alert(this.inputValue);
            }
        },
        template: `
            <div>
                <input v-model="inputValue" />
                <button v-on:click="myClick">显示input</button>
                
            </div>
　　　　　`

    }).mount('#myDiv');  // 绑定id为 myDiv 的元素
</script>

通过 v-model="数据"，绑定数据和input元素

4. 综述

今天聊了一下 VUE3 入门，希望可以对大家的工作有所帮助

欢迎帮忙点赞、评论、转发、加关注：）

关注追风人聊Java，每天更新Java干货。

5. 个人公众号

追风人聊Java，欢迎大家关注

追风人聊Java

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
VUE3 入门

目录1. 概述2. 安装开发工具Visual Studio Code3. VUE3 入门4. 综述5. 个人公众号1. 概述老话说的好：没有别人混的好，是因为自己能力欠佳，因此越是混的差，越要努力提升自己。言归正传，现在 jquery 用的越来越少，大部分公司都使用 VUE 技术，今天我们也来聊聊 VUE3。2. 安装开发工具Visual Studio Code前端页面通常使用 Visual Studio Code 工具进行开发。可以到官网进行下载并安..
复制链接

扫一扫