当前位置： 首页 > news >正文

vue简述

news 2026/1/25 1:16:03

vue为渐进式框架：vmmv

1.易用

        有html、css、javascript基础，即可学习vue框架

2.高效、开发前端页面 非常高效

        1.vue的体积小、压缩完只需要20k的大小

        2.超快的虚拟dom操作js中非常多的dom操作，vue设计虚拟dom非常快

        3.设计时vue底层深度优化

3.灵活、开发灵活、多样性

vue的入门开发 ：

1.下载vue.js并引用

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">

vue对象的基础认识：

vue语法极其严格：

空格、标点符号、语法不正确、极小的语法错误都会导致viem视图无法显示

<body>

        <div id="#app">

                {{msg}} //vue中mvvm的数据形参写法

        </div>

</body>

<script>

const app = new Vue({

        el:"#app", //element 用来给Vue实例定义一个作用范围，可操作id为app标签内的内容

        data:{ //用来给Vue实例定义一些相关数据

                msg:"百知欢迎你,期待你的加入!",

                username:"hello Vue!",

                pwd :"12345"}

});

</script>

 vue中各对象获取参数的写法：

<body>
        <div id="app">

                        //对象数据
                <h4>{{user.id}}--{{user.name}}--{{user.age}}--{{user.sex}}--{{user.salary}}</h4>
                <h4>

                        //数组数据
                        {{hobbies[0]}}--{{hobbies[1]}}--{{hobbies[2]}}--{{hobbies[3]}}--{{hobbies[4]}}
                </h4>
                <h4>

                        //集合对象
                        {{users[0].id}}--{{users[0].name}}--{{users[0].age}}--
                        {{users[0].sex}}-- {{users[0].salary}}
                </h4>
                <h4>
                        {{users[1].id}}--{{users[1].name}}--{{users[1].age}}--
                        {{users[1].sex}}-- {{users[1].salary}}
                </h4>
                <h4>
                        {{users[2].id}}--{{users[2].name}}--{{users[2].age}}--
                        {{users[2].sex}}-- {{users[2].salary}}
                </h4>
        </div>
</body>
</html>

<script>
        //创建vue实例
        new Vue({
                el:"#app",
                data:{
                        user:{id:1,name:"cpx",age:20,sex:true,salary:2000.0},
                        hobbies:["吃饭","喝水","睡觉","游山","玩水"],
                        users:[
                                {id:1,name:"cpx",age:20,sex:true,salary:2000.0},
                                {id:2,name:"zhang3",age:22,sex:false,salary:3000.0},
                                {id:3,name:"li4",age:23,sex:true,salary:4000.0},
                        ]
                        }
        })
</script>

v-text和v-html的使用和区别 

 <div id="#app">

        //获取vue对象中key为msg的value

        <h3>{{msg}}</h3>

        //在标签内获取vue对象中key为msg的value值，直接获取内部文本信息

        <h4 v-text="msg"></h4>

        //在标签内获取vue对象中key为content的value值，但是如果值中有html标签则可以解析html标签中的信息，输出其中的样式和内容

        <h4 v-text="content"></h4>

</div>

 vue中的绑定事件

事件的三要素：事件源、事件、监听器

        1.事件源：发生特定动作的html

        2.事件：发生特定动作 单击事件、双击事件、鼠标移出移入等

        3.监听器：当标签上发生特定事件时处理的程序一般在js中称为事件处理函数

 vue中绑定事件基本语法,事件处理函数的写法

<div id="app">

   //js中事件的写法为：οnclick="method()"，vue中双向绑定的写法为：v-on:事件  名               ="function()"，可省略为@事件名v-on:click="clickMethod"等同于@click="clickMethod",且如果方法没有形参列表，可省略扩号

        <button v-on:click="clickMethod"></button>

</div>

<script>

const app = new Vue({

        el:"#app",   //element 用来给Vue实例定义一个作用范围，可操作id为app标签内的内容

        data:{    //用来给Vue实例定义一些相关数据

                msg:"百知欢迎你,期待你的加入!",

                username:"hello Vue!",

                pwd :"12345",

                content:"<h4 stely='color:red'>内容</h4>"

        }，

        methods:{

                "clickMethod":{   //在methods中定义事件所需要的方法   

        }

});

</script>

 this的使用

<div id="app">

       <h4> {{msg}}</h4>

        <button @click="clickMethod">单击事件</button>

       

         <button @dbclick="dbclickMethod("名字想好了")">双击事件</button>

</div>

<script>

const app = new Vue({

        el:"#app",   //element 用来给Vue实例定义一个作用范围，可操作id为app标签内的内容

        data:{    //用来给Vue实例定义一些相关数据

                msg:"百知欢迎你,期待你的加入!"，

                username:"名字没想好"

        }，

        methods:{

                clickMethod(username){   //在methods中定义事件所需要的方法   

                        this.msg="改变后的数据"；//通过this可调用data中双向绑定的数据

                        this.username=username;

                },

                dbclickMethod(username){    //通过this可调用methods中的方法

                        this.clickMethod(username);

                }

        }

});

</script>

v-show和v-if、v-bind的使用

v-show 底层通过先创建此标签然后控制标签css样式的display属性实现页面原始展示或隐藏

v-if 底层通过控制dom树的元素节点实现（增删改查操作）页面元素展示或隐藏

v-show和v-if的选择：

        v-show：有更高的初始渲染，通过css样式的display实现隐藏，需要频繁切换，则使用

        v-if：有更高的切换消耗，通过删除、添加dom元素，运行时条件很少改变，则使用v-if

v-bind可操作标签中的css样式属性，例：

  //v-bind

<img v-bind:width="width" v-bind:height="height" v-bind:src="src"     @mouseover="changeImage1" @mouseout="changeImage2"/>

'<script>

//创建vue实例

        let app = new Vue({

                 el:"#app", //用来指定vue实例的作用范围

                data:{//用来给vue实例绑定数据                 

                        msg:"hello ", //虽然还是写死的路径 但是根据双向绑定的原理 将来通过修改属性的值改变图片路径

                        src:"images/1.jpg",

                        width:170,

                        height:200 

                }

})

 v-for的使用

v-for遍历对象:

<标签名 v-for="(value,key,index) in vue实例的data属性中的哪个变量"></标签名>

<span v-for="(value,key,index) in user">

{{index}}--{{key}}--{{value}}<br/>

</span>

v-for遍历数组:

标签名 v-for="(item,index) in vue实例的data属性中的哪个变量">

<ul>

         <li v-for="(item,index) in hobbies">{{index+1}}-{{item}}</li>

</ul>

v-for遍历集合:

标签名 v-for="(item,index) in vue实例的data属性中的哪个变量">

<table border="1px" cellspacing="0" width="100%">

         <tr align="center">

                <td>序号</td>

                <td>编号</td>

                <td>名字</td>

                <td>年龄</td>

                <td>工资</td>

                <td>操作</td>

        </tr>

        //集合对象的遍历需要:key便于vue内部做重用和排序

        <tr v-for="(user,index) in users" :key="user.id" align="center">

                 <td>{{index+1}}</td>

                 <td>{{user.id}} </td>

                 <td>{{user.name}}</td>

                 <td>{{user.age}}</td>

                 <td>{{user.salary}}</td>

                 <td><a href="">删除</a>|<a href="">修改</a></td>

         </tr>

</table>

相关文章：

vue简述

vue为渐进式框架&#xff1a;vmmv 1.易用 有html、css、javascript基础&#xff0c;即可学习vue框架 2.高效、开发前端页面 非常高效 1.vue的体积小、压缩完只需要20k的大小 2.超快的虚拟dom操作js中非常多的dom操作&#xff0c;vue设计虚拟dom非常快 3.设计时vue底层深度优化 …...

编程日记 2023/11/27 21:44:57

YOLOv8 训练自己的分割数据集

之前写过一篇 使用YOLOv8训练自己的【目标检测】数据集-【收集数据集】-【标注数据集】-【划分数据集】-【配置训练环境】-【训练模型】-【评估模型】-【导出模型】&#xff0c;里面带大家整个流程走过一遍了&#xff0c; 这篇文章我们来介绍如何使用 YOLOv8 训练分割数据集&a…...

编程日记 2023/11/27 21:43:56

Python实现DDos攻击实例详解

文章目录 SYN 泛洪攻击Scapy3k 基本用法代码实现DDos 实现思路argparse 模块socket 模块代码实现Client 端程序测试后记关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品Python学习书籍四、Python工具包项目源码合集①Python工具包②Python实战案…...

编程日记 2023/11/27 21:42:55

微信小程序实现【点击 滑动 评分 评星（5星）】功能

wxml文件&#xff1a; <view class"wxpl_xing"><view class"manyidu">{{scoreContent}}</view><view><block wx:for{{scoreArray}} wx:for-item"item"><view classstarLen bindtapchangeScore data-sy"{{…...

编程日记 2023/11/27 21:41:54

堡垒机的用途

堡垒机的用途 堡垒机&#xff0c;即在一个特定的网络环境下&#xff0c;为了保障网络和数据不受来自外部和内部用户的入侵和破坏&#xff0c;而运用各种技术手段监控和记录运维人员对网络内的服务器、网络设备、安全设备、数据库等设备的操作行为&#xff0c;以便集中报警、及时…...

编程日记 2023/11/27 21:40:52

超全超实用行业解决方案合集，覆盖十大行业数据应用需求

现代企业面对复杂的业务需求&#xff0c;对数据分析的需求日益增加。 从实时销售到市场趋势&#xff0c;从客户行为到产品优化&#xff0c;每个环节都依赖于数据支持。然而&#xff0c;传统的数据分析平台常分散在不同系统和团队中&#xff0c;形成数据孤岛&#xff0c;降低了…...

编程日记 2023/11/27 21:38:50

一盏茶的时间，入门 Node.js

一、.什么是 Node.js&#xff1f; Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时&#xff0c;用于构建高性能、可伸缩的网络应用。 它采用事件驱动、非阻塞 I/O 模型&#xff0c;使其在处理并发请求时表现出色。 二、安装 Node.js 首先&#xff0c;让我们从 Node.…...

编程日记 2023/11/27 21:37:49

关于Java多线程的一些随笔

Synchronized与ReentrantLock有哪些相同点和不同点&#xff1f; 在Java中&#xff0c;synchronized关键字和ReentrantLock类都用于管理线程间的同步&#xff0c;但它们在实现方式、功能和灵活性方面存在一些差异。以下是它们的相同点和不同点&#xff1a; 相同点 互斥性&…...

编程日记 2023/11/27 21:36:48

Answering difficult questions in other way

I’m not (too) sure Q&#xff1a;Do you think computers make life easier&#xff1f; A&#xff1a;I’m not (too) sure, to be honest, but I reckon they do make life easier because… I can’t say for sure, but … Q&#xff1a;Do you think computers make lif…...

编程日记 2023/11/27 21:35:46

RabbitMQ教程：Linux下安装、基本命令与Spring Boot集成

RabbitMQ教程&#xff1a;Linux下安装、基本命令与Spring Boot集成 1. RabbitMQ简介 RabbitMQ是一个开源的消息代理和队列服务器&#xff0c;用于通过轻量级消息传递协议&#xff08;AMQP&#xff09;在分布式系统中传递消息。它支持多种编程语言&#xff0c;包括Java、Pytho…...

编程日记 2023/11/27 21:32:43

王者荣耀小游戏

第一步是创建项目 项目名自拟 第二部创建个包名 来规范class 然后是创建类 GameFrame 运行类 package com.sxt; package com.sxt;import java.awt.Graphics; import java.awt.Image; import java.awt.Toolkit; import java.awt.event.ActionEvent; import java.awt.event.…...

编程日记 2023/11/27 21:30:42

JAVA小游戏“简易版王者荣耀”

第一步是创建项目 项目名自拟 第二部创建个包名 来规范class 然后是创建类 GameFrame 运行类 package com.sxt;import java.awt.Graphics; import java.awt.Image; import java.awt.Toolkit; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; im…...

编程日记 2023/11/27 21:29:41

Nginx高级

Nginx高级 第一部分&#xff1a;扩容 通过扩容提升整体吞吐量 1.单机垂直扩容&#xff1a;硬件资源增加 云服务资源增加 整机&#xff1a;IBM、浪潮、DELL、HP等 CPU/主板&#xff1a;更新到主流 网卡&#xff1a;10G/40G网卡 磁盘&#xff1a;SAS(SCSI) HDD&#xff08;机械…...

编程日记 2023/11/27 21:28:40

深度学习中小知识点系列(三) 解读Mosaic 数据增强

前言 Mosaic数据增强&#xff0c;这种数据增强方式简单来说就是把4张图片&#xff0c;通过随机缩放、随机裁减、随机排布的方式进行拼接。Mosaic有如下优点&#xff1a; &#xff08;1&#xff09;丰富数据集&#xff1a;随机使用4张图片&#xff0c;随机缩放&#xff0c;再随…...

编程日记 2023/11/27 21:26:34

telnet-MISC-bugku-解题步骤

——CTF解题专栏—— 题目信息&#xff1a; 题目&#xff1a;这是一张单纯的图片 作者&#xff1a;未知 提示&#xff1a;无 解题附件&#xff1a; 解题思路&#xff1a; (⊙﹏⊙)这是个什么文件pcap文件分析_pcap文件打开-CSDN博客查了一下&#xff0c;但没看懂&#xff0c…...

编程日记 2023/11/27 21:25:33

大数据Doris（二十九）：数据导入（Insert Into）

文章目录 数据导入（Insert Into） 一、​​​​​​​创建导入...

编程日记 2023/11/27 21:23:30

jmeter测试dubbo接口

本文讲解jmeter测试dubbo接口的实现方式&#xff0c;文章以一个dubbo的接口为例子进行讲解&#xff0c;该dubbo接口实现的功能为&#xff1a; 一&#xff1a;首先我们看服务端代码 代码架构为&#xff1a; 1&#xff1a;新建一个maven工程&#xff0c;pom文件为&#xff1a; 1…...

编程日记 2023/11/27 21:22:29

分类预测 | Matlab实现基于DBN-SVM深度置信网络-支持向量机的数据分类预测

分类预测 | Matlab实现基于DBN-SVM深度置信网络-支持向量机的数据分类预测 目录 分类预测 | Matlab实现基于DBN-SVM深度置信网络-支持向量机的数据分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.利用DBN进行特征提取&#xff0c;将提取后的特征放入SVM进行分类…...

编程日记 2023/11/27 21:21:27

android系统新特性——用户界面以及系统界面改进

用户界面改进 Android用户界面改进最明显的就是MD了。MD是Google于2014年推出的设计语言&#xff0c;它是一套完整的设计系统&#xff0c;包含了动画、样式、布局、组件等一系列与设计有关的元素。通过对这些行为的描述&#xff0c;让开发者设计出更符合目标的软件&#xff0c…...

编程日记 2023/11/27 21:19:25

电量计驱动代码

外部电量计驱动代码，直接上代码了，懒，不做细节分析。。。。。 /** Fuelgauge battery driver** This package is free software; you can redistribute it and/or modify* it under the terms of the GNU General Public License version 2 as* published by the Free Soft…...

编程日记 2023/11/27 21:18:24

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

编程新知 2026/1/24 7:58:39

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

编程新知 2025/8/23 5:51:08

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

编程新知 2026/1/23 7:15:40

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

编程新知 2026/1/19 2:12:06

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

编程新知 2026/1/18 22:23:28

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

编程新知 2025/12/28 14:49:14

第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

编程新知 2026/1/22 16:30:11

JVM虚拟机：内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...

编程新知 2026/1/24 13:16:33

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

编程新知 2026/1/22 8:08:31

Bean 作用域有哪些？如何答出技术深度？

导语&#xff1a; Spring 面试绕不开 Bean 的作用域问题&#xff0c;这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开&#xff0c;结合典型面试题及实战场景&#xff0c;帮你厘清重点&#xff0c;打破模板式回答&#xff0c…...

编程新知 2025/11/12 21:44:33