【Vue入门篇】基础篇—Vue指令,Vue生命周期

🎊专栏【JavaSE】
🍔喜欢的诗句:更喜岷山千里雪 三军过后尽开颜。
🎆音乐分享【如愿】
🎄欢迎并且感谢大家指出小吉的问题🥰

文章目录

  • 🍔Vue概述
  • 🎄快速入门
  • 🌺Vue指令
    • ⭐v-bind
      • ✨运行结果
    • ⭐v-model
      • ✨运行结果
    • 🏳️‍🌈注意
    • ⭐v-on
      • ✨运行结果
    • ⭐v-if && v-else-if && v-else
      • ✨运行结果
    • ⭐v-show
      • ✨运行结果
    • ⭐v-for
      • ✨运行结果
  • 🌺生命周期
    • ⭐mounted
      • ✨运行结果

在这里插入图片描述

🍔Vue概述

Vue是一套前端框架,免除原生JavaScript中的DOM操作,简化书写

官网:https://v2.cn.vuejs.org/

🎄快速入门

在这里插入图片描述

⭐新建HTML页面,引入Vue.js文件

<script src="js/vue.js"></script>

⭐在JS代码区域,创建Vue核心对象,定义数据模型

<script>
    new Vue({
      el:"#app",
      data:{
        message:"Hello Vue!"
      }
    })
  </script>

⭐编写视图

<div id="app">
    <input type="text" v-model="message">
    {{message}}
  </div>

🌺Vue指令

指令:HTML标签上带有 v- 前缀的特殊属性,不同指令有不同含义
在这里插入图片描述

⭐v-bind

v-bind为HTML标签绑定属性值,如设置herf,css样式等

<body>
    <div id="app">

        <a v-bind:href="url">链接1</a>
        <a v-bind:href="url">链接2</a>

        <!-- <input type="text" v-model="url"> -->

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           url: "https://www.baidu.com"
        }
    })
</script>

在这段代码里面就是给a标签绑定herf属性,而herf是一个链接

✨运行结果

在这里插入图片描述

⭐v-model

v-model表单元素上创建双向数据绑定

<body>
    <div id="app">

        <a v-bind:href="url">链接1</a>
        <a v-bind:href="url">链接2</a>

        <input type="text" v-model="url">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           url: "https://www.baidu.com"
        }
    })
</script>

表示表单输入的内容会自动绑定到url里面,可以对表单里面的内容进行修改做到

✨运行结果

在这里插入图片描述

🏳️‍🌈注意

通过v-bind或者v-model绑定的变量必须在数据模型中声明
必须在data里面指定url的值
在这里插入图片描述

⭐v-on

为html标签绑定事件

<body>
    <div id="app">
		 <!-- 单击事件 -->
        <input type="button" value="点我一下" v-on:click="handle()">

        <input type="button" value="点我一下" @click="handle()">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        <!-- 定义方法 -->
        methods: {
               <!-- 函数体 -->
            handle: function(){
                alert("你点我了一下...");
            }
        }
    })
</script>

v-on:click可以简化为@click

✨运行结果

在这里插入图片描述

⭐v-if && v-else-if && v-else

条件性的渲染某元素,判定为true时渲染,否则不渲染

<body>
    <div id="app">
        年龄<input type="text" v-model="age">经判定,为:
        <span v-if="age<=35">年轻人</span>
        <span v-else-if="age>35 && age<60">中年人</span>
        <span v-else>老年人</span>
        <br><br>
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el:"#app",//vue接管区域
        data:{
            age:20
        },
        methods: {
            
        }
    })
</script>

✨运行结果

在这里插入图片描述

在这里插入图片描述

⭐v-show

根据条件展示某元素,区别在于切换的是display属性的值

<body>
    <div id="app">
        年龄<input type="text" v-model="age">经判定,为:
        <span v-show="age<=35">年轻人</span>
        <span v-show="age>35 && age<60">中年人</span>
        <span v-show="age>=60">老年人</span>
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el:"#app",//vue接管区域
        data:{
            age:20
        },
        methods: {
            
        }
    })
</script>

✨运行结果

在这里插入图片描述

在这里插入图片描述

⭐v-for

列表渲染,遍历容器的元素或对象的属性

<body>
    <div id="app">
        //没有索引
        <div v-for="(addrs) in addrs">{{addrs}}</div>
        //有索引
        <div v-for="(addrs,index) in addrs">{{index}}:{{addrs}}</div>
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el:"#app",//vue接管区域
        data:{
            addrs:["北京","上海","西安","南京"]
        },
        methods: {
            
        }
    })
</script>

✨运行结果

在这里插入图片描述

🌺生命周期

指一个对象从创建到销毁的全过程
每触发一个生命周期事件,会自动执行一个生命周期的方法在这里插入图片描述
在这里插入图片描述

⭐mounted

<body>
    <div id="app">

    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{

        },
        methods: {
            
        },
        mounted () {
            alert("vue挂载完成,发送请求到服务端")
        }    
    })
</script>

代表vue挂载完成

✨运行结果

在这里插入图片描述

如果大家有不明白的地方,欢迎在评论区进行讨论
如果对您有帮助,请不要吝啬手中的点赞,关注,这对我非常重要❤️

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

微信小程序登录获取不到头像和昵称解决办法

微信小程序登录获取不到头像和昵称主要原因是&#xff1a;小程序wx.getUserProfile接口被收回&#xff01; 大家可以按照文档操作↓ PS&#xff1a; 针对小程序wx.getUserProfile接口将被收回后做出的授权调整 小程序文档中提出的调整说明 对于此次变化&#xff0c;现将小程…

如何满足BMW EDI项目的PKT需求?

近期宝马BMW&#xff08;以下简称BMW&#xff09;在其部分供应商之间试点推进PKT项目&#xff0c;BMW为什么要启动 PKT 计划呢&#xff1f; 业务系统全面升级统一全球所有宝马工厂的流程 宝马内部的物流供货流程 近期BMW PKT需求主要针对其内部物流供货流程展开&#xff1a; …

Android : Spinner(列表选项框) + BaseAdapter -简单应用

​​容器与适配器&#xff1a;​​​​​ http://t.csdnimg.cn/ZfAJ7 示例图&#xff1a; 实体类 Demo.java package com.example.mygridviewadapter.entity;public class Demo {private String text;private int img;public Demo(String text, int img) {this.text…

QQ怎么备份聊天记录?3个方法教你快速备份!

QQ聊天记录作为用户和亲人、好友以及同事之间沟通的凭证&#xff0c;可以帮助我们回忆起过去的交流内容。如果我们不小心误删了QQ聊天记录或者更换了新手机&#xff0c;那么这时候就需要备份聊天记录。qq怎么备份聊天记录呢&#xff1f;本文将介绍3个简单方法&#xff0c;帮助您…

Oracle-客户端连接报错ORA-12545问题

问题背景: 用户在客户端服务器通过sqlplus通过scan ip登陆访问数据库时&#xff0c;偶尔会出现连接报错ORA-12545: Connect failed because target host or object does not exist的情况。 问题分析&#xff1a; 首先&#xff0c;登陆到连接有问题的客户端数据库上&#xff0c;…

va-Q-tec实现温度敏感产品运输过程质量控制温控无忧

摘要&#xff1a;温度敏感产品运输对供应链全流程的温度质量要求较高&#xff0c;往往需要借助特殊的温湿度监测技术产品。va-Q-tec与虹科Comet合作&#xff0c;采用虹科Comet的U系列温度记录仪&#xff0c;为集装箱运输过程提供完整的温控包装解决方案。 一、客户背景 va-Q-…

算法通关村第十二关-白银挑战字符串经典题目

大家好我是苏麟 , 今天带来字符串相关的题目 . 大纲 反转问题字符串反转K个一组反转仅仅反转字母反转字符串中的单词 反转问题 字符串反转 描述 : 编写一个函数&#xff0c;其作用是将输入的字符串反转过来。输入字符串以字符数组 s的形式给出。 题目 : LeetCode 344. 反转…

【PPspliT】ppt转pdf-保留过渡动画

网址 http://www.maxonthenet.altervista.org/ppsplit.php 下载安装 使用 再次打开ppt&#xff0c;就能在上方的选项栏里头看到了&#xff1a;

【Unity】接入MAX聚合广告SDK Applovin + GoogleAdmob

版本&#xff1a; Unity&#xff1a;2019.4.35f1gradle plugin: 4.2.0 &#xff08;实际要7.0 对应build_tools:34.0.0) gradle: 6.7.1 &#xff08;实际要7.0 对应build_tools:34.0.0) jdk: 1.8.0_241build_tools: 34.0.0 ndk: android-ndk-r19 文档&#xff1a; 6.0.1(Andro…

使用宝塔安装Alist

废话不多说&#xff0c;直接上教程&#xff0c;根据我的步骤一步一步来&#xff0c;肯定可以成功&#xff01; 我这边使用一键安装的时候&#xff0c;一致报错&#xff0c;提示证书过期&#xff0c;无奈我就开始了手动安装&#xff0c;下面的教程也是手动安装的教程 首先&…

RabbitMQ安装说明

注意: 本次安装以 CentOS 7为例 1、 准备软件 erlang 18.3 1.el7.centos.x86_64.rpm socat 1.7.3.2 5.el7.lux.x86_64.rpm rabbitmq server 3.6.5 1.noarch.rpm 2、安装Erlang rpm -ivh erlang-18.3-1.el7.centos.x86_64.rpm 3.、安装RabbitMQ 安装 rpm -ivh socat-1.7.3.2-…

码云 -- 本地代码上传到码云

1. 在码云上创建远程仓库 复制远程仓库地址 2. 在本地代码上创建 git 仓库 在本地代码文件夹上&#xff0c;打开git 命令窗口 输入初始化命令&#xff0c;创建 git 仓库 git init3. 给 git 仓库添加远程仓库 继续输入 git 命令 git remote add origin 远程仓库地址4. 按 git 的…

提升性能测试效率:JMeter中的用户自定义变量!

前言 在测试过程中&#xff0c;我们经常会碰到测试服务地址有改动的情况&#xff0c;为了方便&#xff0c;我们会把访问地址参数化&#xff0c;当访问地址变化了&#xff0c;我们只需要把参数对应的值改动一下就可以了。 一&#xff1a;添加配置元件-用户定义的变量&#xff…

python命令行 引导用户填写ssh登录信息

字多不看&#xff0c;直接体验&#xff1a; 待补充 演示代码 # -*- coding:UTF-8 -*- """ author: dyy contact: douyaoyuan126.com time: 2023/11/23 9:20 file: 引导用户填写ssh接口信息.py desc: xxxxxx """# region 引入必要的依赖 impor…

腾讯云 小程序 SDK对象存储 COS使用记录,原生小程序写法。

最近做了一个项目&#xff0c;需求是上传文档&#xff0c;文档类型多种&#xff0c;图片&#xff0c;视频&#xff0c;文件&#xff0c;doc,xls,zip,txt 等等,而且文档类型可能是大文件&#xff0c;可能得上百兆&#xff0c;甚至超过1G。 腾讯云文档地址&#xff1a;https://c…

AI如何帮助IT领导者优化成本和降低风险

围绕AI的兴奋和好奇心-以及随之而来的可能性-让整个行业沸沸扬扬&#xff0c;结果不言而喻&#xff0c;32%的IT领导者表示&#xff0c;集成AI是2023年的首要任务&#xff0c;其次是降低安全风险(31%)和降低IT成本(29%)。 虽然在可预见的未来&#xff0c;AI可能是IT领导者的首要…

Navicat 技术指引 | 适用于 GaussDB 的备份与还原功能

Navicat Premium&#xff08;16.2.8 Windows版或以上&#xff09; 已支持对 GaussDB 主备版的管理和开发功能。它不仅具备轻松、便捷的可视化数据查看和编辑功能&#xff0c;还提供强大的高阶功能&#xff08;如模型、结构同步、协同合作、数据迁移等&#xff09;&#xff0c;这…

【QML】StackView上层页面半透明,显示下层页面

1、 应用场景 有时候需要模拟弹窗效果&#xff0c;需要下层的页面半透明显示。仅仅将上层页面背景设置为透明并不能实现这个效果&#xff0c;下层的页面依然被覆盖。Qt帮助文档中有如下代码&#xff0c;经测试有效果。 2、 代码 重点标记&#xff1a; 下层页面需要设置这个…

三、Keil安装芯片包、下载固件库、建立STM32工程模板

目录 一、首先在Keil软件上安装好芯片包 二、下载官方固件库 三、建立基于固件库的Keil5工程模板 一、首先在Keil软件上安装好芯片包 STM32有很多系列的芯片&#xff0c;我们平常用的最多的是STM32F1系列的&#xff0c;因此安装F1系列的芯片包在我们初学时&#xff0c;只按照…

2023亚太杯数学建模A题思路 - 采果机器人的图像识别技术

# 1 赛题 问题A 采果机器人的图像识别技术 中国是世界上最大的苹果生产国&#xff0c;年产量约为3500万吨。与此同时&#xff0c;中国也是世 界上最大的苹果出口国&#xff0c;全球每两个苹果中就有一个&#xff0c;全球超过六分之一的苹果出口 自中国。中国提出了一带一路倡议…