vue简述

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>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

免费使用GPT的网站

登录ChatGPT系统 登录ChatGPT系统 登录ChatGPT系统

ArkTs变量类型、数据类型基础语法

可以参考官网学习路径学习HarmonyOS第一课|应用开发视频教程学习|HarmonyOS应用开发官网 ArkTS是华为自研的开发语言。它在TypeScript&#xff08;简称TS&#xff09;的基础上&#xff0c;匹配ArkUI框架&#xff0c;扩展了声明式UI、状态管理等相应的能力&#xff0c;让开发者以…

浅谈安科瑞ASJ继电器在菲律宾矿厂的应用

摘要&#xff1a;对电气线路进行接地故障保护&#xff0c;方式接地故障电流引起的设备和电气火灾事故越来越成为日常所需。针对用户侧主要的用能节点&#xff0c;设计安装剩余电流继电器&#xff0c;实时监控各用能回路的剩余电流状态。通过实时监控用能以及相关电力参数、提高…

ESP32-Web-Server编程- 通过 Highcharts 创建图表(Chart)实时显示设备信息

ESP32-Web-Server编程- 通过 Highcharts 创建图表&#xff08;Chart&#xff09;实时显示设备信息 概述 上节讲述了通过 Server-Sent Events&#xff08;以下简称 SSE&#xff09; 实现在网页实时更新 ESP32 Web 服务器的传感器数据&#xff0c;并通过表格显示传感器的数据。…

操作系统--中断异常

操作系统第一章易错总结 1.操作系统的功能 ⭐ 编译器是操作系统的上层软件&#xff0c;不是操作系统需要提供的功能。 ⭐注意&#xff1a; 1.批处理的主要缺点是缺乏交互性 2.输入/输出指令需要中断操作&#xff0c;中断必须在核心态下执行 3.多道性是为了提高系统利用率和…

【Spring MVC】Filter 过滤器异常处理 HandlerExceptionResolver 分析

文章目录 前言版本说明测试 Demo1、自定义过滤器 DemoFilter2、自定义业务异常 ServiceException3、自定义异常处理类 DemoExceptionHandler4、DemoController5、请求测试 问题分析1、日志打印记录2、Debug 方法 解决方案1、修改自定义过滤器2、请求测试 解决方案分析1、日志打…

提升技能素养,AMCAP做出合适的决策

近年来&#xff0c;智能配置投资与理财逐渐受到关注并走俏。这是一种简单快捷的智慧化理财方式&#xff0c;通过将个人和家族的闲置资金投入到低风险高流动性的产品中。 国际财富管理投资机构AMCAP集团金融分析师表示&#xff1a;智能配置投资与理财之所以持续走俏&#xff0c…

6.3 Windows驱动开发:内核枚举IoTimer定时器

内核I/O定时器&#xff08;Kernel I/O Timer&#xff09;是Windows内核中的一个对象&#xff0c;它允许内核或驱动程序设置一个定时器&#xff0c;以便在指定的时间间隔内调用一个回调函数。通常&#xff0c;内核I/O定时器用于周期性地执行某个任务&#xff0c;例如检查驱动程序…

在Linux上安装KVM虚拟机

一、搭建KVM环境 KVM&#xff08;Kernel-based Virtual Machine&#xff09;是一个基于内核的系统虚拟化模块&#xff0c;从Linux内核版本2.6.20开始&#xff0c;各大Linux发行版就已经将其集成于发行版中。KVM与Xen等虚拟化相比&#xff0c;需要硬件支持的完全虚拟化。KVM由内…

使用 kubeadm 部署 Kubernetes 集群(一)linux环境准备

一、 初始化集群环境 准备三台 rocky8.8 操作系统的 linux 机器。每台机器配置&#xff1a;4VCPU/4G 内存/60G 硬盘 环境说明&#xff1a; IP 主机名 角色 内存 cpu 192.168.1.63 xuegod63 master 4G 4vCPU 192.168.1.64 xuegod64 worker 4G 4vCPU 192.168.1.62 xuegod62 work…

Python 异常处理(try except)

文章目录 1 概述1.1 异常示例 2 异常处理2.1 捕获异常 try except2.2 抛出异常 raise 3 异常类型3.1 内置异常3.2 自定义异常 1 概述 1.1 异常示例 异常&#xff1a;程序执行中出现错误&#xff0c;若不处理&#xff0c;则程序终止 示例代码&#xff1a; v 6 / 0 # 除数不…

基于matlab的图像去噪算法设计与实现

摘 要 随着我们生活水平的提高&#xff0c;科技产品飞速更新换代&#xff0c;在信息传输中&#xff0c;图像传输所占的比重越来越大。但自然噪声会在图像传输时干扰其传输过程&#xff0c;甚至会使图片不能表达其原来的意义。去噪处理就是为了去除图像中的噪声&#xff0c;从而…

CG 函数

函数 与C#函数的语法一致 无返回值函数 void FunctionName(参数类型 参数…){} 有返回值 type FunctionName(参数类型 参数){return type} in关键字 in关键字可以修饰参数类型 修饰的参数作为输入参数 在函数内部使用 函数内部不能修改 void Test(in int a){ ba10;} Test(2…

【数据清洗 | 数据规约】数据类别型数据 编码最佳实践,确定不来看看?

&#x1f935;‍♂️ 个人主页: AI_magician &#x1f4e1;主页地址&#xff1a; 作者简介&#xff1a;CSDN内容合伙人&#xff0c;全栈领域优质创作者。 &#x1f468;‍&#x1f4bb;景愿&#xff1a;旨在于能和更多的热爱计算机的伙伴一起成长&#xff01;&#xff01;&…

tex2D使用学习

1. 背景&#xff1a; 项目中使用到了纹理进行插值的加速&#xff0c;因此记录一些自己在学习tex2D的一些过程 2. 代码&#xff1a; #include "cuda_runtime.h" #include "device_launch_parameters.h" #include <assert.h> #include <stdio.h>…

Maven的安装和使用

Maven是一个基于项目对象模型&#xff08;POM&#xff09;&#xff0c;可以管理项目构建、依赖管理、项目报告等的工具&#xff0c;使构建Java项目更容易。可以说Maven是一个项目管理和构建工具&#xff0c;它可以从管理项目的角度出发&#xff0c;将开发过程中的需求纳入进来&…

FFmpeg架构全面分析

一、简介 它的官网为&#xff1a;https://ffmpeg.org/&#xff0c;由Fabrice Bellard&#xff08;法国著名程序员Born in 1972&#xff09;于2000年发起创建的开源项目。该人是个牛人&#xff0c;在很多领域都有很大的贡献。 FFmpeg是多媒体领域的万能工具。只要涉及音视频领…

软文推广如何自然融入品牌?媒介盒子有妙招

软文推广作为一种柔性推广方式&#xff0c;能将品牌信息融入到用户日常浏览的内容中&#xff0c;让用户不知不觉接触品牌&#xff0c;从而产生好感&#xff0c;这种方式既可以避免广告带来的反感&#xff0c;又可以提高广告的有效性。那么在推广中应该如何自然融入品牌信息呢&a…

Spring中的SmartLifecycle与Lifecycle

在Spring框架中&#xff0c;SmartLifecycle和Lifecycle是两个接口&#xff0c;用于管理组件的生命周期。这两个接口提供了不同级别的生命周期管理功能&#xff0c;适用于不同类型的组件。 SmartLifecycle接口 SmartLifecycle接口是Spring框架中用于管理可自动启动和停止的组件…

leetCode 78.子集 + 回溯算法 + 图解

给你一个整数数组 nums &#xff0c;数组中的元素 互不相同 。返回该数组所有可能的子集&#xff08;幂集&#xff09;。解集 不能 包含重复的子集。你可以按 任意顺序 返回解集 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3] 输出&#xff1a;[[],[1],[2],[1,2],[3],[1…