Vue入门-特性、常用指令、生命周期、组件

news2024/9/29 9:21:09

Vue

vue简介

​ Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。 [7]

Vue特征

  1. 解耦视图与数据
  2. M-V-VM模型 关注模型和视图
    • M：即Model，模型，包括数据和一些基本操作
    • V：即View，视图，页面渲染结果
    • VM：即View-Model，模型和视图间的双向
  3. 双向数据绑定

在这里插入图片描述

Vue入门

1、使用方式

  • vue 是一个前端框架，也是其实是一个js文件，下载vue.js文件并在页面中引入

2、vue.js 的下载方式

  • 可以引入在线的vue.js(公共的CDN服务)
<script src="https://unpkg.com/vue@3.2.45/dist/vue.global.js"></script>
  • 可以离线下载vue.js
    • 网址:https://unpkg.com/vue@3.2.45/dist/vue.global.js
  • npm包资源管理器，可以下载vue.js
初始化：npm init -y

安装vue：npm install vue --save

注意：重启计算机

3、第一个vue案例

  • 基本格式v-***：其实就是将JS中操作DOM的各种属性或语法，封装成对应的v-XXX，直接使用v-XXX就能达到操作DOM的效果。指令直接当成标签的属性来使用
<!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>Document</title>
    <script src="js/vue.global.js"></script>
</head>
<body>
    <div id="app">
        {{id}}<br>
        {{name}}
    </div>

    <script>
        const vueApp = Vue.createApp({
            data(){
                return {
                    id:1,
                    name:"chenwei"
                }
            }
        });
        vueApp.mount("#app");
    </script>
</body>
</html>

(1) v-text 和 v-html

  • v-text：相当于JS中的innerText
  • v-html：相当于JS中的innerHTML
<!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>test03</title>
    <script src="js/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <p v-text="t"></p>
        <p v-html="h"></p>
    </div>
    <script>
        const vueApp = Vue.createApp({
            data(){
                return {
                   t:"天气针不错!",
                   h:"<h1>长路漫漫</h1>"
                }
            }
        });
        vueApp.mount("#app");
    </script>
</body>
</html>

(2) v-if、v-else 和 v-show

  • v-if、v-else：相当于JS中的if(){}else{}语法
  • v-show：相当于JS中的if(){}语法
<!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>test03</title>
    <script src="js/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <p v-if="flag">这是 真</p>
        <p v-else="flag">这是 假</p>
        <p v-show="flag">这是 真假</p>
    </div>
    <script>
        const vueApp = Vue.createApp({
            data(){
                return {
                   flag:false
                }
            }
        });
        vueApp.mount("#app");
    </script>
</body>
</html>

(3) v-on

  • v-on：相当于JS中的事件on:XXX
  • 语法：v-on:事件名=”methods中定义的函数名”
  • 简写：@事件名=”methods中定义的函数名”
<!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>test03</title>
    <script src="js/vue.global.js"></script>
</head>
<body>
    <div id="app">
        {{count}}
        <input type="button" value="测试1" v-on:click="f1()">
        <input type="button" value="测试2" @click="f2('测试个屁')">
        <input type="button" value="测试3" @click="f3()">
    </div>
    <script>
        const vueApp = Vue.createApp({
            data(){
                 count:1
                }
            },
            methods:{
                f1:function(){
                    alert("测试1");
                },
                f2(b){
                    alert(b);
                },
                f3(){
                    this.count ++;
                }
            }
        });
        vueApp.mount("#app");
    </script>
</body>
</html>

(4) v-for

  • v-for：相当于JS中的for循环语法
  • 语法：v-for=”(item,index) in 被循环的内容”。item是循环出来的内容，index是索引
<!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>test03</title>
    <script src="js/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <th>学号</th>
                    <th>名字</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(student,index) in students">
                    <td>{{student.id}}</td>
                    <td>{{student.name}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        const vueApp = Vue.createApp({
            data(){
                return {
                   students:[
                    {"id":1,"name":"tom"},
                    {"id":2,"name":"jack"},
                    {"id":3,"name":"rosy"}
                   ]
                }
            } 
        });
        vueApp.mount("#app");
    </script>
</body>
</html>

(5) v-bind

  • v-bind：设置HTML属性的值
  • 语法：v-bind:属性名=”值”
  • 简写：:属性名=”值”
<!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>test03</title>
    <script src="js/vue.global.js"></script>
</head>
<body>
    <div id="app">
       <a v-bind:href="url">跳转</a>
       <br>
       <a :href="url">跳转</a>
    </div>
    <script>
        const vueApp = Vue.createApp({
            data(){
                return {
                   url:"https://www.baidu.com/"
                }
            }
        });
        vueApp.mount("#app");
    </script>
</body>
</html>

(6) v-model

  • v-model：输入域的值，相当于JS中的value属性（双向绑定）
<!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>test03</title>
    <script src="js/vue.global.js"></script>
</head>
<body>
    <div id="app">
      {{username}}<input type="text" v-model="username">
    </div>
    <script>
        const vueApp = Vue.createApp({
            data(){
                return {
                  username:"lfg"
                }
            }
        });
        vueApp.mount("#app");
    </script>
</body>
</html>

Vue生命周期

​ 每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

在这里插入图片描述

生命周期测试

<!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>Document</title>
    <script src="js/vue.global.js"></script>
</head>
<body>
    <div id="app">
        {{message}}
        <input type="button" value="测试" @click="show()">
    </div>
    <script>
        const vueApp = Vue.createApp({
            data:function(){
                return {
                    message:"hello world"
                }
            },
            methods:{
                show:function(){
                    this.message = "你脑子what啦"
                }
            },
            beforeCreate:function(){
                console.log("Vue对象创建前");
            },
            created:function(){
                console.log("Vue对象创建后");
            },
            beforeMount(){
                console.log("数据渲染前");
            },
            mounted(){
                console.log("数据渲染后");
            },
            beforeUpdate(){
                console.log("数据更新前");
            },
            updated(){
                console.log("数据更新后");
            },
            beforeUnmount(){
                console.log("销毁前");
            },
            unmounted(){
                console.log("销毁后");
            }
        });
        vueApp.mount("#app");
    </script>
</body>
</html>

Vue组件

  • 通俗来说，就是自定义具有特殊效果的标签。而且一旦定义，可以多次使用。

1、全局组件

<!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>Document</title>
    <script src="js/vue.global.js"></script>
</head>
<body>
    <div id="app">
        {{message}}
        <test></test>
        <test></test>
        <test></test>
        <test></test>
    </div>
    <script>
        const vueApp = Vue.createApp({
            data:function(){
                return {
                    message:"hello World"
                }
            }
        });

        vueApp.component("test",{
            template:`<div>
                        {{count}}
                        <input type="button" value="测试" @click="f1()">
                      </div>`,
            data:function(){
                return {
                    count:0
                }
            },
            methods:{
                f1:function(){
                    this.count++
                }
            }
        });

        vueApp.mount("#app");
    </script>
</body>
</html>

2、局部组件

<!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>Document</title>
    <script src="js/vue.global.js"></script>
</head>
<body>
    <div id="app">
        {{message}}
        <test></test>
        <test></test>
    </div>
    <script>

        let demo = {
            template:`<div>
                        {{count}}
                        <input type="button" value="测试" @click="f1()">
                      </div>`,
            data:function(){
                return {
                    count:0
                }
            },
            methods:{
                f1:function(){
                    this.count++
                }
            }
        };

        const vueApp = Vue.createApp({
            data:function(){
                return {
                    message:"hello World"
                }
            },
            components:{
                "test":demo
            }
        });

        vueApp.mount("#app");
    </script>
</body>
</html>

}
        },
        methods:{
            f1:function(){
                this.count++
            }
        }
    };

    const vueApp = Vue.createApp({
        data:function(){
            return {
                message:"hello World"
            }
        },
        components:{
            "test":demo
        }
    });

    vueApp.mount("#app");
</script>
```

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/906419.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Meta-SR: A Magnification-Arbitrary Network for Super-Resolution整理

Meta-SR: A Magnification-Arbitrary Network for Super-Resolution整理

目录 说明摘要引言相关工作SISRMeta-Learning 本文的方法Meta-Upscale方法Location ProjectionWeight PredictionFeature Mapping 实验细节总结实现代码参考链接 说明 作为一个读者&#xff0c;在阅读这篇文章后&#xff0c;按照自己的理解对其中内容做以总结&#xff08;不然总…
阅读更多...
ffmpeg,nginx,vlc把rtsp流转hls

ffmpeg,nginx,vlc把rtsp流转hls

ffmpeg:rtsp>hls流; nginx 托管hls流服务; vlc测试hls流服务; 参考了很多相关文档和资料,由于比较乱就不在一一引用介绍了&#xff0c;下面的是实操OK的例子&#xff1b; 1&#xff09;ffmpeg (ffmpeg-4.4.1-full_build)&#xff0c;要用full版本&#xff0c;否则会缺某些…
阅读更多...
【从零学习python 】56. 异常处理在程序设计中的重要性与应用

【从零学习python 】56. 异常处理在程序设计中的重要性与应用

文章目录 异常的概念读取文件异常try...except语句try...else语句try...finally语句 进阶案例 异常的概念 在程序运行过程中&#xff0c;由于编码不规范或其他客观原因&#xff0c;可能会导致程序无法继续运行&#xff0c;此时就会出现异常。如果不对异常进行处理&#xff0c;…
阅读更多...
电工-什么是电功？及电功单位与计算公式讲解

电工-什么是电功？及电功单位与计算公式讲解

什么是电功&#xff1f;及电功单位与计算公式讲解 电能是有其他形式的能量&#xff08;如机械能、热能、化学能、核能&#xff09;转换而来的一种能量&#xff0c;而电能又可以转换成为其他形式的能。比如当电能的具体体现&#xff1a;电流&#xff0c;其通过电灯泡发光就是将…
阅读更多...
代码详解——可变形卷积（DCNv3）

代码详解——可变形卷积（DCNv3）

文章目录 概述dcnv3.pyto_channels_firstto_channels_lastbuild_norm_layerbuild_act_layer_is_power_of_2CenterFeatureScaleModuleDCNv3_pytorchDCNv3 dcnv3_func.pyDCNv3Functiondcnv3_core_pytorch_get_reference_points_generate_dilation_grids 可变形卷积DCNv1 & DC…
阅读更多...
华为OD机试 - 出错的或电路 - 二进制 - （Java 2023 B卷 100分）

华为OD机试 - 出错的或电路 - 二进制 - （Java 2023 B卷 100分）

目录 专栏导读一、题目描述二、输入描述三、输出描述四、解题思路五、Java算法源码六、效果展示1、输入2、输出3、说明 华为OD机试 2023B卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷&#…
阅读更多...
Vue2.0+webpack 引入字体文件（eot，ttf，woff）

Vue2.0+webpack 引入字体文件（eot，ttf，woff）

webpack.base.config.js 需要配置 {test:/\/(woff2?|eot|ttf|otf)(\?.*)?$/,loader: url-loader,options: {limit: 10000,name: utils.assetsPath(fonts/[name].[hash:7].[ext])}} 如果 Vue2.0webpack3.6引入字体文件&#xff08;eot&#xff0c;ttf&#xff0c;woff&…
阅读更多...
成都爱尔林江院长解析离焦眼镜为何与众不同

成都爱尔林江院长解析离焦眼镜为何与众不同

近视是影响我国国民尤其是青少年眼健康的重大公共卫生问题。因病因不明确&#xff0c;且尚无有效的治疗方法&#xff0c;如何有效控制近视发生和增长备受关注。国家出台了儿童近视防控方案&#xff0c;社会上也出现了各种近视防控方法及策略。周边离焦技术&#xff0c;算得上近…
阅读更多...
快速上手Linux核心命令：Linux的文本编辑器vi和vim

快速上手Linux核心命令：Linux的文本编辑器vi和vim

前言 上一篇中已经预告&#xff0c;我们这篇主要说Linux中vi/vim 编辑器。它是我们使用Linux系统不可缺少的工具&#xff0c;学会了&#xff0c;你就可以在Linux世界里畅通无阻&#xff0c;学废了&#xff0c;常用操作你也会了&#xff0c;也是够用了&#xff0c;O(∩_∩)O 简…
阅读更多...
javascript初学者可以做些什么小东西或者项目来练手？

javascript初学者可以做些什么小东西或者项目来练手？

前言 可以试一下面的一些项目&#xff0c;可能有一些比较复杂&#xff0c;可以学习一下代码的结构思路&#xff0c;希望对你有帮助~ 实用工具向 1.Exchart Star&#xff1a;55.6k Exchart提供了大量精美的图表&#xff0c;只有你想不到&#xff0c;没有你在它上面找不到的&…
阅读更多...
了解 JSON 格式

了解 JSON 格式

一、JSON 基础 JSON&#xff08;JavaScript Object Notation&#xff0c;JavaScript 对象表示法&#xff09;是一种轻量级的数据交换格式&#xff0c;JSON 的设计目的是使得数据的存储和交换变得简单。 JSON 易于人的阅读和书写&#xff0c;同时也易于机器的解析和生成。尽管 J…
阅读更多...
8月17日上课内容 LVS+Keepalived群集

8月17日上课内容 LVS+Keepalived群集

本章结构 Keepalived概述 keepalived工作原理 Keepalived 是一个基于VRRP协议来实现的LVS服务高可用方案&#xff0c;可以解决静态路由出现的单点故障问题 在一个LVS服务集群中通常有主服务器 (MASTER)和备份服务器(BACKUP)两种角色的服务器&#xff0c;但是对外表现为一个虚拟…
阅读更多...
为什么选择elasticsearch分布式搜索引擎

为什么选择elasticsearch分布式搜索引擎

文章目录 &#x1f52d;什么是elasticsearch&#x1f320;ELK技术栈&#x1f320;elasticsearch和lucene&#x1f320;为什么不是其他搜索技术&#xff1f; &#x1f52d;总结 &#x1f52d;什么是elasticsearch elasticsearch是一款非常强大的开源搜索引擎&#xff0c;具备非常…
阅读更多...
mini木马实践和防护方法

mini木马实践和防护方法

一、实验目的&#xff1a; 1.了解木马的实现原理 2.了解基本的防护方法 二、预备知识&#xff1a; 木马通常有两个可执行程序&#xff1a;一个是客户端&#xff0c;即控制端&#xff1b;另一个是服务端&#xff0c;即被控制端。植入被种者电脑的是“服务器”部分&#xff0c;而…
阅读更多...
linux如何使用keepalived配置VIP

linux如何使用keepalived配置VIP

VIP常用于负载均衡的高可用&#xff0c;使用VIP可以给多个主机绑定一个IP&#xff0c;这样&#xff0c;当某个负载应用挂了之后&#xff0c;可以自动切到另一个负载。 我这里是在k8s环境中做的测试&#xff0c;集群中有6个节点&#xff0c;我给140和141两个节点配置VIP。 1. 安…
阅读更多...
「2024」预备研究生mem-立体几何截面模型代绝对值得一次和二次函数

「2024」预备研究生mem-立体几何截面模型代绝对值得一次和二次函数

一、立体几何截面模型&代绝对值得一次和二次函数 二、练习题 凑配换元
阅读更多...
Mysql5.7.36主从同步实操

Mysql5.7.36主从同步实操

主库创建同步账户 #创建备份的账户 CREATE USER backup192.168.32.1 IDENTIFIED BY backup123; #给账户授予备份的权限 GRANT REPLICATION SLAVE ON *.* TO backup192.168.32.1; #刷新权限 FLUSH PRIVILEGES;停止主库 配置主库需要的备份参数 打开my.ini文件&#xff0c;配置…
阅读更多...
Unity C# 之 Task、async和 await 、Thread 基础使用的Task的简单整理

Unity C# 之 Task、async和 await 、Thread 基础使用的Task的简单整理

Unity C# 之 Task、async和 await 、Thread 基础使用的Task的简单整理 目录 Unity C# 之 Task、async和 await 、Thread 基础使用的Task的简单整理 一、Task、async和 await 、Thread 基础概念 1、线程&#xff0c;多线程 2、Task 3、async &#xff08;await &#xff09;…
阅读更多...
第四章：树形结构的关联式容器（map+set）

第四章：树形结构的关联式容器（map+set）

系列文章目录 文章目录 系列文章目录前言1、关联式容器与序列式容器1.1 键值对 2、set的介绍3、multiset的介绍3.1 接口count与容器multiset 4、map的介绍4.1 接口insert4.2 operator[]和at 5、multimap的介绍 前言 根据应用场景的不桶&#xff0c;STL总共实现了两种不同结构的…
阅读更多...
PBI 之 Query数据导入、处理

PBI 之 Query数据导入、处理

PBI梳理数据流程 首先通过Excel 插件 Power Query、Power Pivot处理数据&#xff0c;然后使用Power Desktop导入处理好的数据进行展示。最后发布到在线网站。 一、导入数据 二、处理数据 如下&#xff0c;进入到Power Query编辑器界面 数据--查询&连接 界面区 界面区右键…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023