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

vue简述

news 2026/2/9 20:12: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

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2026/2/8 4:37:24

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

编程新知 2026/1/12 10:41:22

无法与IP建立连接，未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2026/1/22 21:24:01

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

编程新知 2026/1/28 15:17:32

Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

编程新知 2026/1/30 0:09:51

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/11/9 19:17:07

Linux离线（zip方式）安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

编程新知 2025/11/23 23:50:53

TSN交换机正在重构工业网络，PROFINET和EtherCAT会被取代吗？

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...

编程新知 2026/1/26 5:57:43

uniapp 小程序 学习（一）

利用Hbuilder 创建项目 运行到内置浏览器看效果 下载微信小程序 安装到Hbuilder 下载地址 &#xff1a;开发者工具默认安装 设置服务端口号 在Hbuilder中设置微信小程序 配置 找到运行设置&#xff0c;将微信开发者工具放入到Hbuilder中&#xff0c; 打开后出现 如下 bug 解…...

编程新知 2026/2/5 4:29:00

Leetcode33（ 搜索旋转排序数组）

题目表述 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...

编程新知 2026/1/17 19:18:25