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

vue简述

news 2026/4/8 6:16:10

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

如何解决Oracle JDBC驱动版本的兼容性问题_ojdbc8.jar与JDK版本的对应关系

不是。ojdbc8.jar 支持JDK 8及以上&#xff08;含11/17/21&#xff09;&#xff0c;关键看运行时JVM版本≥8&#xff1b;它实现JDBC 4.2规范&#xff0c;兼容Oracle 11g至21c&#xff0c;非仅限JDK 8。ojdbc8.jar 真的只支持 JDK 8 吗&#xff1f;不是。ojdbc8.jar 是 oracle 官…...

编程新知 2026/4/8 5:23:25

使用C#代码将 HTML 转换为 PDF、XPS 和 XML

HTML 是网页和在线内容的标准格式。然而&#xff0c;在许多场景中&#xff0c;您可能需要将 HTML 文档转换为其他文件格式&#xff0c;例如 PDF、XPS 和 XML。无论是想生成网页的可打印版本&#xff0c;将 HTML 内容以更通用的格式分享&#xff0c;还是从 HTML 中提取数据以便进…...

编程新知 2026/4/8 4:50:53

专业的办公家具哪家技术强

在企业发展进程中&#xff0c;办公家具的优劣至关重要。专业办公家具不仅能提升办公环境舒适度&#xff0c;还能彰显企业形象与实力。然而&#xff0c;市场上办公家具品牌众多&#xff0c;究竟哪家技术强呢&#xff1f;今天&#xff0c;就为大家详细介绍佛山市豪亿办公家具&…...

编程新知 2026/4/8 4:46:43

cgm-remote-monitor开发者API：构建第三方血糖应用的技术细节

cgm-remote-monitor开发者API&#xff1a;构建第三方血糖应用的技术细节 【免费下载链接】cgm-remote-monitor nightscout web monitor 项目地址: https://gitcode.com/gh_mirrors/cg/cgm-remote-monitor 想要为糖尿病患者开发创新的血糖监控应用&#xff1f;cgm-remote…...

编程新知 2026/4/8 4:07:34

OpenClaw（小龙虾）Windows 11 一键部署教程｜2026 最新版｜零代码・免配置・解压即用

适用系统&#xff1a;Windows 11 专业版 / 家庭版 / 正式版&#xff08;全版本兼容&#xff09; 项目介绍&#xff1a;OpenClaw 是 GitHub 星标 28W 的开源本地 AI 智能体&#xff0c;可自动操控电脑、整理文件、浏览器自动化、办公自动化&#xff0c;被国内用户称为小龙虾&am…...

编程新知 2026/4/8 3:43:16

未发表！25年顶级SCI算法SOO优化CNN-LSTM-Attention一键实现多步预测！多步预测全家桶更新啦！

目录 多步预测案例 多步预测教程 创新点与原理 ①创新点一&#xff1a;基于CNN-LSTM的多尺度特征联合提取架构 ②创新点二&#xff1a;融合SE通道注意力机制的自适应特征重标定策略 ③创新点三&#xff1a;基于SOO智能算法的超参数自适应寻优 结果展示 全家桶目录 获取…...

编程新知 2026/4/8 3:27:05

不止是安装：在openEuler 22.03 LTS SP4上快速搭一个可用的开发/测试环境

从裸机到生产力&#xff1a;openEuler 22.03 LTS SP4半小时高效开发环境搭建指南 刚装完openEuler系统&#xff0c;看着空荡荡的终端界面&#xff0c;是不是有种"接下来该干嘛"的迷茫&#xff1f;作为开发者&#xff0c;我们需要的不是一个干净的操作系统&#xff0c…...

编程新知 2026/4/8 3:18:00

盘姬工具箱实用工具推荐：从文件恢复到批量重命名

在盘姬工具箱的众多功能中&#xff0c;有一些工具特别值得推荐。 这些工具都能切实解决用户在日常使用电脑过程中遇到的各种问题。 而且这些工具的操作都非常简单直观&#xff0c;不需要用户具备专业的技术知识。 无论是电脑新手还是资深用户&#xff0c;都能通过这些工具获…...

编程新知 2026/4/8 2:38:12

AD09实战：3分钟搞定BOM表导出与自动化分类（附模板下载）

AD09实战&#xff1a;3分钟高效生成智能分类BOM表的完整指南 在电子设计领域&#xff0c;BOM表&#xff08;物料清单&#xff09;是连接设计与生产的核心纽带。传统手工整理BOM表不仅耗时费力&#xff0c;还容易因人为疏忽导致元器件分类错误、数量统计偏差等问题。AD09作为业界…...

编程新知 2026/4/8 1:10:21

新手必看：在快马平台三步生成mobaxterm中文设置图文指南

今天想和大家分享一个超级实用的技巧——如何把Mobaxterm的界面设置成中文。作为一个过来人&#xff0c;我特别理解新手面对全英文界面的那种手足无措感。不过别担心&#xff0c;跟着下面这几个步骤操作&#xff0c;五分钟就能搞定&#xff01; 下载安装时就要注意 在官网下载安…...

编程新知 2026/4/8 0:03:04