vue

最新推荐文章于 2024-10-09 16:29:08 发布
最新推荐文章于 2024-10-09 16:29:08 发布
阅读量140 收藏
点赞数
文章标签： xml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45484641/article/details/100029996
版权

Vue安装（了解）
去官网下载一键傻瓜式安装

Vue入门（掌握）
Vue表达式（掌握）
VUE基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //let = var 一样的意思
        //相同的赋值和java一样从上到下
       /* var a = "dd";
        var a = "xx";
        console.debug(a)//xx*/


       //只能赋值一次
      /* //let a = "11";
       let a = "22";
       console.debug(a)*/


        //执行顺序打印空
      /*  console.debug(a)//undefined
        var a ="sss";*/


      //跟java的循环一样
     /* for (let i = 0 ; i<10;i++){
          console.debug(i)
      }
      //不能这么写报错
      console.debug(i)*/
     //定义常量(必需赋值，且不允许修改)
     const a = "不能修改";
     //a = "不能重新定义只能定义一次";
     console.debug(a)


    </script>
</head>
    <body>


    </body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*let a = "王假惺";
        let b = "原虚";
        let c = "狗蛋";
        console.debug(a,b,c)*/

       /* let [a,b] = ["王假惺","原虚"];
        console.debug(a,b)*/

       //打印数组方式
      /* let x = ["王假惺","原虚"];
       //王假惺
       console.debug(x[0])
*/


       /* let x = ["王假惺","原虚"];
        let [a,b] = x;
        console.debug(a,b)//王假惺 原虚*/

       //对象解构
        //可以通过点的方式来取值
       /* let a ={x:"王假惺", c:"原虚"};
        console.debug(a.c)*/


        //取出a里两个值
       /* let a ={x:"王假惺", c:"原虚"};
        let {x,c} = a;
        console.debug(x,c)
*/

    </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
       /* function f(a) {
            console.debug("这")

        }
        f()//这*/


      /* //简化
        let say = (msg)=>console.debug("ss"+msg);
        say("秀儿")//ss+秀儿*/


      //定义个常量
        const person ={name:"原虚",age:"30"}

       /* function f(p) {
            console.debug("结果:"+p.name)
        }
        //通过person来使用里面的值和上面一
        f(person)//结果:原虚*/


       //简化function通过=>
      /*  let say = ({name,age})=>{
            console.debug("结果："+name)
        }
       say(person)*/

        //经常使用的方式
       //通过，的方式给里面加一条
        let user = {
            name:"aaa",
            x:()=>{
                console.debug("叼毛兽")
            },
            x1:()=>{
                console.debug("输出2")
            }

        }
        user.x()//叼毛兽
        user.x1()//s输出2



    </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /**
         *  resolve:成功后应该执行的函数
         *  reject：失败后应该执行的函数
         */
        let promise = new Promise((resolve,reject)=>{
            //延迟几秒执行
            setTimeout(()=>{
                let num = Math.random();
                //随机数
                if (num>0.5) {
                    //成功着
                    resolve("执行成功进入")
                }else {
                    reject("执行失败")
                }
            },3000)

        })
        promise.then((msg)=>{
            console.debug(msg)
        }).catch((msg)=>{
            console.debug(msg)
        })



    </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    //引入支持文件
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>

<!--准备容器-->
<div id="app">
    {{msg}}}
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"把这个丢上面去"
        }

    })

</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!--定义个-->
<div id="app">
 {{msg}}
</div>
<script>
    new Vue({
        le:"#app",
            data:{
            msg:"05简化版"
        }
    })

</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!--容器-->
<div id="app">
    {{msg}}
    {{hhh}}
    {{xxx}}---{{xxx[1]}}
    {{aaa}}-----{{aaa.id}}
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"赵日天",
            hhh:"22",
            xxx:["a","b","c"],
            aaa:{
                id:1,
                name:"上面"
            }
        }

    })


</script>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{msg}}
</div>
<script>
    let v = new Vue({
        le:"#app",
            data:{
            msg:"ss"

        },
        //定义方法
        methods:{
            say(){
                this.msg ="xx"
            }
        }
    })
    alert(0)
    v.say();
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{msg}}
</div>
<script>
    let v =new Vue({
        le:"#app",
        data:{
            msg:"xx"
        },
        created(){
            this.msg = "aa"
        },
        mounted(){
            alert(0)
            this.msg = "cc"
        }

    })


</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{usernameVal}}
    用户名：<input type="text" v-model="usernameVal">
</div>
<script>
    let v = new Vue({
        le:"#app",
        data:{
            usernameVal:"xxx"
        }

    })


</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div v-html="msg"></div>
    <div v-html="msg"></div>
</div>
<script>
    new Vue({
        le:"#app",
        data:{
            msg:"<h1>xxxxx</h1>"
        }

    })

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(item,index) in hobbys">
            {{index}}-----{item}}
        </li>
    </ul>
    <div v-for="(val, name, index) in employee">{{name}}：{{val}}</div>
    <!--遍历字符串-->
    <div v-for="v in msg">{{v}}</div>
    <!--遍历数字-->
    <div v-for="i in num">{{i}}</div>
    </div>
<script>
    new Vue({
        le:"#app",
        data:{
            hobbys:["aaa","bbb","ccc"],
            msg:"abcdefg",
            num:10,
            employee:{
                name:"xxx",
                age:22,
                sex:true
            }
        }
    })
</script>
</div>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--bind的简写形式-->
    <img src="imgUrl" :width="width" :height="height">
    <img v-bind="imgAttr">
</div>
<script>
    new Vue({
        le:"#app",
        data:{
            imgUrl:"img/sj.jpg",
            width:200,
            height:500,
            imgAttr: {
                src: "img/sj.jpg",
                width: 200,
                height: 300
            }
        }

    })


</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <select>
        <option v-for="v in countrys" :value="v.id">{{v.name}}</option>
</select>
</div>
<script>
    new Vue({
        le:"#app",
        data:{
            countrys:[
                {id:1,name:"洗"},
                {id:2,name:"剪"},
                {id:3,name:"吹"}
            ]
        }

    })
</script>
</body>
</html>
全村最靓那个仔
关注
Vue3通透教程【一】Vue3现状—必然趋势？
官方推荐
01-30 6万+
凉哥作为 Vue 的忠诚粉丝输出过大量的 Vue 文章，应粉丝要求开始更新 Vue3 的相关技术文章，Vue 框架目前的地位大家应该都晓得，所谓三大框架使用人数最多，公司选型最多的框架，凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因，和 Vue 框架相比其他框架的巨大优势，有兴趣的伙伴可以看一下Vue框架背后的故事。
Vue3通透教程【四】Vue3组合API初体验
官方推荐
02-20 4万+
初步了解Vue的组合API和Vue2的选项式API视觉差距！
vue lang_Vue.js从零开始——模块化项目（1）
weixin_39581719的博客
10-27 135
从这个章节开始，就可以来看看真正用 Vue.js 的优势了，也就是所谓的中大型 / 模块化 / 规模化项目，原生 JavaScript 的部分并没有深入来看这个方面，因为那个更多的需要 Node.js 的相关知识，所以我个人倾向于放在后面结合 Node.js 来看。不过 Vue.js 的最重要的部分也是绕不过的，所以一起来看看吧，如果有更多涉及了 Node.js 以及 webpack 之类的部分，...
如何搭建一个vue项目(完整步骤)
热门推荐
没有在适当的年纪做正确的事，非刻意而为之，知识后知后觉!
04-17 18万+
这里注意：安装vue-cli对node.js的版本是有要求的。出现版本号则说明安装成功（最新的以官网为准）查看安装的版本（显示版本号说明安装成功）如果你原来有版本或者版本比较低，可以升级。装的两种方式：输入cmd命令。
Vue 脚手架
Errol's Blog
03-30 8541
Vue 脚手架
（Vue）Vue课后题
博客皆笔记
01-20 4万+
vue九章课后题
vue 3.0 使用ref获取dom元素
好巧的博客
09-24 13万+
答：检查是在哪里进行的console.log，setup函数相当于vue2中的beforeCreate, created阶段，如果直接在setup中直接使用console.log获取ref，返回的自然是null。当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。最后，希望在提出疑问前请创建一个新项目，将文章中的示例代码完完整整的拷贝到新项目的app.vue中，运行后可直接查看效果。// 存储dom数组。
Vue2和Vue3
秋书一叶的博客
08-26 7444
Vue.js 2（通常称为Vue 2）是一款流行的JavaScript前端框架，用于构建现代、交互式、响应式的用户界面。它由Evan You开发，于2016年发布，是Vue.js框架的第二个主要版本。Vue 2的核心思想是将数据驱动和组件化开发相结合，使开发者能够更轻松地构建复杂的Web应用程序。Vue 2主要包含以下特点和特性：组件化架构： Vue 2采用组件化的开发方式，将界面拆分为多个可重用的组件。每个组件具有自己的状态、模板、方法和生命周期钩子，使得开发更具模块化、可维护性更高。
Vue组件
溪斜山遮的博客
01-25 1万+
Vue组件（一）      Vue组件介绍      Vue组件使用步骤      Vue组件的使用      组件中data 和 el 选项      使用 <script> 或 <template> 标签 V组件 组件系统是Vue
vue下拉框多选
weixin_48860638的博客
04-20 5119
v-model绑定的value2就是你下拉框要多选的参数，例：1，2 <el-select v-model="value2" allow-create filterable multiple collapse-tags default-first-option placeholder="请选择文章标签"> <el-option v-for="item in options" :key="item.
基于SpringBoot+Vue的学生选课管理系统的毕业设计，Vue+SpringBoot+MybatisPlus+MySQL
03-24
本文主要介绍基于SpringBoot+Vue的学生选课管理系统的源码实现。该系统实现了学生选课、退课、课程管理、学生管理等功能,采用前后端分离的模式,前端使用Vue框架,后端使用SpringBoot框架。 后端使用SpringBoot+...
vue项目demo（asp.net mvc5+vue2.5）
02-13
本项目是asp.net mvc5+vue2.5的项目，花了很长时间做的。 实现的功能如下： 1.不仅有vue的基本功能，而且设计到vue的组件功能。 2.实现了增删改查的功能，而且是一对多的。 3.后台使用了EF进行操作数据库，EF使用的...
vue中组件的props属性（详）
蜗牛~~
10-28 17万+
今天这篇文章，让你彻底学会props属性…… props主要用于组件的传值，他的工作就是为了接收外面传过来的数据，与data、el、ref是一个级别的配置项。
python xml的读取和写入
最新发布
雪剑封心
10-09 287
目的是方便检测单类别标注的正确性。例子：将xml拆分多个xml文件。将拆分的xml合并为1个。
使用XML实现MyBatis的基础操作
WHabc2002的博客
10-08 734
接下来我们会使用的数据表如下：对应的实体类为：UserInfoMapper所有的准备工作都在如下文章。MyBatis 操作数据库入门-CSDN博客什么是MyBatis?
XSLT 实例：掌握 XML 转换的艺术
wjs2024的博客
10-02 821
XSLT 是一种用于转换 XML 文档的语言。它允许您定义一系列的规则，这些规则描述了如何将输入的 XML 文档转换为另一种格式。XSLT 使用 XPath（一种在 XML 文档中查找信息的语言）来定位和处理 XML 元素。
手写mybatis之Mapper XML的解析和注册使用
CSDN_LiMingfly的博客
10-04 740
你是怎么面对功能迭代的？很多程序员在刚开始做编程或者新加入一家公司时，都没有多少机会可以做一个新项目，大部分时候都是在老项目上不断的迭代更新。在这个过程你可能要学习N个前人留下的各式各样的风格迥异的代码片段，在这些纵横交错的流程中，找到一席之地，把自己的ifelse加进去。但说回来，其实不能逐步清理一片屎山，让代码在你的手上逐步清晰、整洁、干净，很多时候也是作为码农自身经验的不足，不懂得系统重构、不了解设计原则、不熟悉业务背景、不清楚产品走向等等原因造成的。
PCB缺陷检测数据集 xml 可转yolo格式 ，共10688张图片
阿利同学的博客
10-09 936
PCB缺陷检测数据集（yolov5,v7,v8） 数据集总共有两个文件夹，一个是pcb整体标注，一个是pcb部分截图。 整体标注有6个分类，开路，短路等都已经标注，标注格式为xml，每个文件夹下有100多张的图片，可转yolo格式，跑过效果很好，北京大学PCB数据集。 第二个是第一个的部分和增强，共10688张图片，多篇pcb论文用的是这个数据集（共6类），训练集和检测集总共有10688张，看最后一张图。标注格式为txt，可直接yolov5,v7,v8检测。
输电线路缺陷图像检测数据集，导线散股，塔材锈蚀两类，分别为581张和1407张，标注为xml和txt格式 1988张
阿利同学的博客
10-08 810
输电线路缺陷图像检测数据集，导线散股，塔材锈蚀两类，分别为581张和1407张，标注为xml和txt格式 1988张
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值