前端:Vue.js学习

坚持不懈的大白2023-08-15 17:10

前端:Vue.js学习

        • [1. 第一个Vue程序](#1. 第一个Vue程序)
        • [2. Vue指令](#2. Vue指令)
          • [2.1 v-if、v-else-if、v-else](#2.1 v-if、v-else-if、v-else)
          • [2.2 v-for](#2.2 v-for)
          • [2.3 事件绑定 v-on:](#2.3 事件绑定 v-on:)
          • [2.4 v-model 数据双向绑定](#2.4 v-model 数据双向绑定)
          • [2.5 v-bind 绑定属性](#2.5 v-bind 绑定属性)
        • [3. Vue组件](#3. Vue组件)
        • [4. Vue axios异步通信](#4. Vue axios异步通信)
        • [5. 计算属性](#5. 计算属性)
        • [6. 插槽 slots](#6. 插槽 slots)
        • [7. 自定义事件内容分发](#7. 自定义事件内容分发)

1. 第一个Vue程序

首先把vue.js拷贝到本地，下载链接位：vue.js

参考代码如下：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue学习</title>
</head>
<body>
    <div id="app">{{message}}</div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
    var obj = new Vue({
        el:'#app',
        data:{
            message:"hello world!"
        }
    });
</script>
</html>

运行结果：

其中对象obj属性el表示绑定标签元素，属性data表示数据。支持双向绑定(即当数据发生变化时，视图也会发生变化，当视图发生变化时，数据也会跟着同步变化)，简而言之就是在前端界面上，打开控制台，执行代码obj.message='其他',执行完成这句代码之后，可以发现界面上显示为其他。

2. Vue指令

以v-开头的表示它是Vue提供的特殊特性，如v-bind、v-if、v-else等。

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

参考示例如下：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue学习</title>
</head>
<body>
    <div id="app">
        <div v-if="num == 1">1</div>
        <div v-else-if="num == 2">2</div>
        <div v-else>其他数字</div>
    </div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
    var obj = new Vue({
        el:'#app',
        data:{
            num:1
        }
    });
</script>
</html>

上述指令用于判断展示哪个标签元素。如，在一个登录界面上，有多种登录方式，同时对应着多个不同的输入框布局，通过上述指令结合使用，可以轻轻松松实现所想要的效果。

2.2 v-for

用于循环遍历Vue绑定的标签元素中的数据，参考代码如下：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue学习</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in items">{{item}}</li>
            <!-- <li v-for="(item,index) in items">{{item}},{{index}}</li> -->
        </ul>
    </div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
    var obj = new Vue({
        el:'#app',
        data:{
            num:1,
            items:[1,2,3,4,5]
        }
    });
</script>
</html>

运行结果：

2.3 事件绑定 v-on:

用于绑定事件，如点击一个按钮，弹出一个提示框，如下：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue学习</title>
</head>
<body>
    <div id="app">
        <button v-on:click="fun1">点击我</button>
    </div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
    var obj = new Vue({
        el: '#app',
        data: {
            message: "hello world!"
        },
        methods: {
            fun1:()=>{
                // alert(this.message);
                alert(obj.message);
            }
        }
    });
</script>
</html>

运行结果：

为了简化操作，可以简写为@绑定的事件，如v-on:click简写为@click。

2.4 v-model 数据双向绑定

示例为一个输入框，在输入框中输入内容，在另一个标签元素内的文本内容会随着输入的内容而变化。参考示例如下：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue学习</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message">{{message}}
    </div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
    var obj = new Vue({
        el: '#app',
        data: {
            message: "hello world!"
        }
    });
</script>
</html>

运行结果：

另一个示例，下拉框双向绑定，参考代码如下：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue学习</title>
</head>
<body>
    <div id="app">
        <select v-model="message">
            <option value="1" checked>1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>

        {{message}}
    </div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
    var obj = new Vue({
        el: '#app',
        data: {
            message: "1"
        }
    });
</script>
</html>

运行结果：

2.5 v-bind 绑定属性

学过springboot themlefy模板的读者应该了解这个th:href、th:value、th:src，v-bind也就和上述那些实现的效果一样，v-bind:href对应于th:href，为了简化操作，可以直接写成 :href。

3. Vue组件

为了复用(重复使用)，从某些方面说，也就是为了提升编写代码效率吧！比如导航栏，在很多界面上都需要，可以单独把这部分写到一个vue文件内，在其他哪些需要导航栏的html界面内，导入这个(组件)即可。(下述示例没有写vue文件)

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue学习</title>
</head>
<body>
    <div id="app">
       <ul>
            <liuze v-for="item in items" v-bind:v="item"></liuze>
       </ul>
    </div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
    
    Vue.component('liuze',{
        props:['v'],
        template: "<li>{{v}}</li>"
    });
    var obj = new Vue({
        el: '#app',
        data: {
            items: [1,2,3,4,5]
        }
    });
</script>
</html>

运行结果：

4. Vue axios异步通信

axios主要作用：实现ajax异步通信。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue学习</title>
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" v-clock>
       <div>{{info.code}}</div>
       <ul>
            <li v-for="item in info.data.list">
                <a v-bind:href="item.url">{{item.title}}</a>
            </li>
       </ul>
    </div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript" src="./axios.js"></script>
<script type="text/javascript">
    
    var obj = new Vue({
        el: '#app',
        data(){
            return {
            	// 需要和json格式一致
                info:{
                    code: null,
                    data:{
                        list: [
                            {
                                title: null,
                                url: null
                            }
                        ]
                    }
                }
            }
        },
        mounted(){
            axios.get('https://blog.csdn.net/community/home-api/v1/get-business-list?page=1&size=20&businessType=blog&orderby=&noMore=false&year=&month=&username=qq_45404396').then((result) => {
                this.info = result.data;
            });
        }// 钩子函数
    });
</script>
</html>

运行结果：

5. 计算属性

计算属性突出在属性，首先它是一个属性，其次这个属性是有计算的能力，这里的计算指的是函数；简单的说，它就是一个能够将计算结果缓存起来的属性(将行为转换成静态的属性)，可以当作为缓存。不能methods里的方法名同名。

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue学习</title>
</head>

<body>
    <div id="app">
       currentTime: {{currentTime()}}
       <br> 
       <!-- 方法 -->
       currentTime2: {{currentTime2}} 
       <!-- 属性 -->
    </div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">

    var obj = new Vue({
        el: '#app',
        methods:{
            currentTime:()=>{
                return new Date().getTime();
            }
        },
        // 计算属性
        computed:{
            // 里面写方法，是一个属性 
            // 不能methods里的方法名同名
            currentTime2:()=>{
                return new Date().getTime();
            }
        }
    });
</script>

</html>

运行结果：

6. 插槽 slots

关于组件如何接收模板内容，下述是官网关于这个知识点的介绍。

参考代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue学习</title>
</head>

<body>
    <div id="app">
        <liuze>
            <liuze-title slot="liuze-title" v-bind:title="title"></liuze-title>
            <liuze-items slot="liuze-items" v-for="item in items" v-bind:item="item"></liuze-items> 
        </liuze>
    </div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">

    Vue.component('liuze',{
        template:`
        <div>
            <slot name="liuze-title"></slot>
            <ul>
                <slot name='liuze-items'></slot>    
            </ul>    
        </div>
        `
    });

    Vue.component('liuze-title',{
        props:['title'],
        template:'<p>{{title}}</p>'
    });

    Vue.component('liuze-items',{
        props:['item'],
        template:'<li>{{item}}</li>'
    });

    var obj = new Vue({
        el: '#app',
        data:{
            title:"编程语言",
            items:['Java','Python','C','Go']
        }
    });
</script>

</html>

运行结果：

7. 自定义事件内容分发

现在相把上述编程语言进行删除操作，参考代码如下：

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue学习</title>
</head>

<body>
    <div id="app">
        <liuze>
            <liuze-title slot="liuze-title" v-bind:title="title"></liuze-title>
            <liuze-items slot="liuze-items" v-for="(item,index) in items" 
            v-bind:item="item" :index="index" @remove="removeItem(index)"></liuze-items> 
        </liuze>
    </div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">

    Vue.component('liuze',{
        template:`
        <div>
            <slot name="liuze-title"></slot>
            <ul>
                <slot name='liuze-items'></slot>    
            </ul>    
        </div>
        `
    });

    Vue.component('liuze-title',{
        props:['title'],
        template:'<p>{{title}}</p>'
    });

    Vue.component('liuze-items',{
        props:['item','index'],
        template:'<li>{{item}} <button @click="remove">删除</button></li>',
        methods:{
            remove:function(index){
                this.$emit('remove',index);
            }
        }
    });

    var obj = new Vue({
        el: '#app',
        data:{
            title:"编程语言",
            items:['Java','Python','C','Go']
        },
        methods:{
            removeItem:function(index){
                this.items.splice(index, 1);
            }
        }
    });
</script>

</html>

运行结果：

相关推荐
心怀梦想的咸鱼3 分钟前
UE5 第一人称射击项目学习（四）
学习·ue5
AI完全体6 分钟前
【AI日记】24.11.22 学习谷歌数据分析初级课程-第2/3课
学习·数据分析
旧林84310 分钟前
第八章 利用CSS制作导航菜单
前端·css
程序媛-徐师姐21 分钟前
Java 基于SpringBoot+vue框架的老年医疗保健网站
java·vue.js·spring boot·老年医疗保健·老年 医疗保健
yngsqq22 分钟前
c#使用高版本8.0步骤
java·前端·c#
Mephisto.java41 分钟前
【大数据学习 | Spark-Core】Spark提交及运行流程
大数据·学习·spark
Myli_ing1 小时前
考研倒计时-配色+1
前端·javascript·考研
余道各努力，千里自同风1 小时前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave1 小时前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟1 小时前
Vue3+element-plus 实现中英文切换（Vue-i18n组件的使用）
前端·javascript·vue.js
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07怎样让音频速度变慢？请跟随以下方法进行操作08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10【目标跟踪】相机运动补偿