今天实习第二天 ，vue

news2025/5/18 4:10:11

由于这是一次新的项目，有几个技术，docker，vue
老板要我学习vue。
这里我安装的是node.js，但是操作的时候用的是idea，因为vue插件集成在idea中。
01.vue的技术
vue是MVVM的履行者。
在这里插入图片描述
02.第一个vue程序
第一步：打开idea，创建一个空的project
在这里插入图片描述

第二步：打开file—setting----plugin-----下载vue.js插件

在这里插入图片描述

第三步：创建一个html的文件，导入代码 vue.js cdn

<!-- 引入 Vue.js -->  
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue01</title>
</head>
<body>
<div id="app">
<!--这里的变量就变成了view，mvc的视图层-->
  {{message}}}
</div>

<!-- 引入 Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script type="text/javascript">
<!--这里的变量就变成了model，mvc的数据层-->
  var vue=new Vue({
    el:"#app",
    data:{
      message:"hello , vue！"
    }
  })


</script>


</body>
</html>

vue的基本结构（用一个例子）：

<body>
<div id="app">
    <div>{ {message} }</div>
</div>
<script type="text/javascript">
    var vue = new Vue({
        "el":"#app",
        "data":{
            "message":"数据模型"
        },
       "methods"：{
           "函数名称":function(){
               //具体的业务操作
           }
       },
        "watch":{
            "监听的属性名称":function("监听的值"){
               //具体的业务操作
            }
        }
    });
</script>
</body>

在这里插入图片描述

第四步：vue的功能
可以同时同步页面上的数据。

在这里插入图片描述
第五步：vue的常见指令
01.绑定
v-bind的功能就等于{{}}
例如：

<div id="app">  
     <!-- 使用v-bind指令 --> 
     <!-- 添加v-bind绑定以后,className将不在是一个字符串,而是一个变量,data数据的中className，标签的div的值变成box -->   
      <div v-bind:class="className">你好</div>  
      <!-- 未使用v-bind指令 -->    
      <div class="className">Hello</div>
</div>
<script type="text/javascript">    
      var vm = new Vue({  
            el: "#app", 
            data: { 
               className:"box"        
               }    
       })
</script>

02.判断-循环
在这里插入图片描述

03.事件
在这里插入图片描述
举个例子，绑定点击事件click

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue01</title>
</head>
<body>
<div id="app" >
    <button v-on:click="sayHi">click me</button>
</div>
<!-- 引入 Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script type="text/javascript">
  var vue=new Vue({
    el:"#app",
    data:{
      message:"hello , vue！"
    }, 
    methods:{
      sayHi:function (event) {
          alert("111");
          
      }  
    }
  });

</script>


</body>
</html>片

04.双向绑定
在这里插入图片描述
也就是说不光是你通过在控制台改变vue对象，可以同时改变html中标签的值，还可以通过修改html标签的内容也就是值来改变vue对象的值。这个也就是双向绑定。
举个例子，例如用标签文本框，在这里就绑定了vue对象中的data中的message属性，开启页面的时候会显示message中的数据，也就是hello vue！。但是在这里用到了v-model，文本框中的内容也会同时的传到message属性上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue01</title>
</head>
<body>
<div id="app" >
    输入的文本：<textarea v-model="message"></textarea>{{message}}}
</div>
<!-- 引入 Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script type="text/javascript">
  var vue=new Vue({
    el:"#app",
    data:{
      message:"hello , vue！"
    },
  
  });

</script>


</body>
</html>

05.slot沟道
我认为这个是对于组件的一次升级，可以认为是组件的一次套娃行为，因为一个slot对应的就很可能是一个组件。
三个组件：第二个和第三个都绑定在第一个上，slot标签用name来绑定。

  Var.component("todo",{
        template:'<div>\
                     <slot name="totitle"</slot>\
                     <ul>\
                     <slot name="toitem"></slot>\
                     </ul>\
                   </div>'
    });
    Var.component("totitle",{
        props:['title'],
        template: '<div>{{title}}</div>'
    });
    Var.component("toitem",{
        props:['item'],
        template: '<li>{{item}}</li>'
    });

vue的数据源对象

   var vue=new Vue({
        el:"#app",
        data:{
         items:['kuanghsengn01','kuanghseng02','ks'], 
         title:"这个是标题"
         }
    });

以上都是model层

view层：

  <todo>
      <totitle v-slot="totitle" :title="title"></totitle>
      <toitem  v-slot="toitem" v-for="item in items" :item="item"></toitem>
  </todo>

整个html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue01</title>
</head>
<body>
  <todo>
      <totitle v-slot="totitle" :title="title"></totitle>
      <toitem  v-slot="toitem" v-for="item in items" :item="item"></toitem>
  </todo>
<!-- 引入 Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script type="text/javascript">
    var vue=new Vue({
        el:"#app",
        data:{
         items:['kuanghsengn01','kuanghseng02','ks'],
         title:"这个是标题"
         }
    });
    Var.component("todo",{
        template:'<div>\
                     <slot name="totitle"</slot>\
                     <ul>\
                     <slot name="toitem"></slot>\
                     </ul>\
                   </div>'
    });
    Var.component("totitle",{
        props:['title'],
        template: '<div>{{title}}</div>'
    });
    Var.component("toitem",{
        props:['item','index'],
        template: '<li>{{item}}</li>'
    });
</script>


</body>
</html>

06.组件
可以现在认为是自定义的标签，有的时候你打开vue的html文件，会有很多的自定义标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue01</title>
</head>
<body>
<div id="app" >
    <my-firstcomponent></my-firstcomponent>
</div>
<!-- 引入 Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script type="text/javascript">
    Vue.component("my-firstcomponent",{
        template:'<li>hello li</li>'
    })
    var vue=new Vue({
    el:"#app",
    data:{
      message:"hello , vue！"
    },
  
  });

</script>


</body>
</h一个tml>

首先在script标签中去定义组件，这里用到的方法是Vue.component（第一个参数是组件的名字，{其中还有关键字template 这个是实际的内容，也就是html文件的标签+内容
}）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue01</title>
</head>
<body>
<div id="app" >
    <my-firstcomponent v-for="item in items" v-bind:qin="item"></my-firstcomponent>
</div>
<!-- 引入 Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script type="text/javascript">
    Vue.component("my-firstcomponent",{
        props:['qin'],
        template:'<li>{{qin}}</li>'
    })
    var vue=new Vue({
    el:"#app",
    data:{
     items:["hello , vue！","Linux","前端"]
    },

  });

</script>


</body>
</html>

详细描述：
第一步.先在vue中去声明一个对象，在data中去声明一个数组，叫做items。
第二步.在自定义的组件中,用v-for来循环，v-bind来绑定对象，这里的对象是for循环中数组的一个对象，也就是item
第三步.在组件中去写一个props来去接受数据，因为要在组件去显示item，props的值是和v-bind的第一个值是一样的,注意的是v-bind的用法是来绑定属性，是v-bind：第一个属性名（这里用的是qin）=“for循环中的对象名字或者是vue中的data属性名”

07.通信
前端的通信之前一直都是js中的ajax请求，例如$.get()，这个就是ajax的get请求。
在vue中的ajax请求是axios框架。这里需要的是和钩子函数配合使用。

第一步.创建data.json数据源来作为数据源

{
“name”:"kuangshengshuojava",
"url":"https://blog.kuangshenstudy.com",
"page":1,
"isNonProfit":true,
"address":{
"street":"含光门",
"city":"西安";
"country":"中国"
}，
"links"：[
{
"name":"bili"
"url":"https://space.bilibili.com/9525449"
},
{
"name":"kuanghsengshuojava"
"url":"https://blog.kuangshen.com"
},
{
"name":"biadu"
"url":"https://www.baidu.com/"
}
]
}

html文件代码

第一步.先导入axios cdn

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

第二步.在创建的vue对象中用钩子函数
mounted

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue01</title>
</head>
<body>
<div id="app" >
{{info.name}}
</div>
<!-- 引入 Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script type="text/javascript">
    var vue=new Vue({
    el:"#app",
    data(){
        return{
            info:{
                name: null,
                address: {
                    street: null,
                    city: null,
                    country: null,
                },
                url: null
            }
        }

    },
    mounted(){
     axios.get('../data.json').then(response=>(this.info=response.data));
    }

  });

</script>


</body>
</html>

info是一个自己声明的对象。

08.钩子函数
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
09.自定义事件内容分发
一个组件

 Var.component("toitem",{
        props:['item','index'],
        template: '<li>{{item}}<button v-on:click="remove"></button></li>',
        methods:{
            remove:function (){
                alert("1111111")
            }
        }

    });

那组件如何去操作vue对象的数据呢？可以访问，这个上一小节已经写好了，用v-for来完成。
01.组件可以控制组件内部声明的方法。

    Var.component("toitem",{
        props:['item','index'],
        template: '<li>{{item}}<button v-on:click="remove"></button></li>',
        methods:{
            remove:function (){
                alert("1111111")
            }
        }

    });

这里的v-on 是remove（自定义函数remove）。
而vue对象中也有一个自定义函数removeitems(index)，组件不能运行这个vue的自定义函数：

 var vue=new Vue({
        el:"#app",
        data:{
         items:['kuanghsengn01','kuanghseng02','ks'],
         title:"这个是标题"
         },
        methods:{
           removeitems:function (index){
                this.items.splice(index,1)
            }
        }
    });

在这里插入图片描述
02.修改view层

  <todo>
      <totitle v-slot="totitle" :title="title"></totitle>
      <toitem  v-slot="toitem" v-for="(item,index) in items" :item="item" :index="index"></toitem>
  </todo>

修改v-for循环的接收数据的部分props

    Var.component("toitem",{
        props:['item','index'],
        template: '<li>{{index}}-------------{{item}}<button v-on:click="remove"></button></li>'，
        methods:{
            remove:function (){
                alert("1111111")
            }
        }

    });

在这里插入图片描述

03.view的方法会调用vue中的方法
修改view层
添加v-on

  <toitem  v-slot="toitem" v-for="(item,index) in items" 
               :item="item" :index="index" v-on:remove="removeitems(index)"></toitem>

此时，第一个remove是组件中的方法名，第二个打引号的方法是vue对象中的方法
修改组件：在组件方法中添加this.$emit

  Var.component("toitem",{
        props:['item','index'],
        template: '<li>{{item}}<button v-on:click="remove"></button></li>',
        methods:{
            remove:function (){
                this.$emit("remove")
            }
        }

    });

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C基础day9（2023.7.11）

C基础day9（2023.7.11）

一、Xmind整理&#xff1a; 二、课上练习&#xff1a; 练习1&#xff1a;实现字符串逆置 #include <stdio.h> #include <string.h> #include <stdlib.h> int main(int argc, const char *argv[]) {char str[]"hello";char *pstr;char *qstrstrlen…
阅读更多...
UE编辑器灯光颜色，能量传入Shader流程

UE编辑器灯光颜色，能量传入Shader流程

编辑器界面&#xff1a; 代码流程&#xff1a; FLinearColor ULightComponent::GetColoredLightBrightness() const {// Brightness in Lumensfloat LightBrightness ComputeLightBrightness();FLinearColor Energy FLinearColor(LightColor) * LightBrightness;if (bUseTem…
阅读更多...
数学建模-拟合算法

数学建模-拟合算法

这里的线性函数指的是参数为线性&#xff0c;而不是变量为线性。 yabx^2是线性的 用的比较多的是多项式拟合和自己定义的 拓展资料&#xff1a;工具箱曲线拟合类型评价解释 文件-导出代码 自动生成的代码修改图名和标签 如果不收敛&#xff0c;自己要修改初始值&#xf…
阅读更多...
ES 跨集群搜索 Cross-cluster search (CCS)

ES 跨集群搜索 Cross-cluster search (CCS)

跨集群查询 跨集群搜索(cross-cluster search)使你可以针对一个或多个远程集群运行单个搜索请求。 例如&#xff0c;你可以使用跨集群搜索来筛选和分析存储在不同数据中心的集群中的日志数据。 环境准备 角色IP系统dev172.16.122.244CentOS 7.9prod172.16.122.245CentOS 7.9 ES…
阅读更多...
记忆——记忆宫殿——地点桩

记忆——记忆宫殿——地点桩

地点桩图片 室内物品放置方法——时钟放置法 https://www.zhihu.com/question/34549534 地点桩的扩展和记忆 我告诉你一个让记忆宫殿数量翻125倍的方法&#xff0c;以后用一个地点桩就扔一个。 这方法是我在背了几本书后才在偶然中发现的&#xff0c;我叫他“五行推演法”&a…
阅读更多...
ES（1）简介和安装

ES（1）简介和安装

文章目录 简介倒排索引 安装 简介 ES是面向文档型数据库&#xff0c;一条数据在这里就是一个文档。 和关系型数据库大致关系如下: ES7.x中废除掉Type&#xff08;表&#xff09;的概念 倒排索引 要知道什么是倒排索引&#xff0c;就要先知道什么是正排索引 idcontent100…
阅读更多...
判断数组中所有元素是否均为True numpy.alltrue()

判断数组中所有元素是否均为True numpy.alltrue()

【小白从小学Python、C、Java】 【计算机等级考试500强双证书】 【Python-数据分析】 判断数组中所有元素是否均为True numpy.alltrue() [太阳]选择题 请问关于以下代码的说法错误的是&#xff1f; import numpy as np print(【执行】np.alltrue([True, True, True])) print(n…
阅读更多...
C/C++图形库EasyX保姆级使用教程（四） 图片的展示与缩放

C/C++图形库EasyX保姆级使用教程（四） 图片的展示与缩放

C/C图形库EasyX保姆级使用教程 第一章 Microsoft Visual Studio 2022和EasyX的下载及安装使用 第二章 图形化窗口设置以及简单图形的绘制 第三章 图形颜色的填充及相关应用 第四章 图片的展示与缩放 文章目录 C/C图形库EasyX保姆级使用教程前言一、图片的展示1.变量存储图片2.…
阅读更多...
安全测试方法介绍（下）渗透测试

安全测试方法介绍（下）渗透测试

安全主要测试方法主要有&#xff1a;静态源代码审查&#xff0c;这个在编码阶段就可以进行&#xff0c;这个阶段如果出现问题&#xff0c;修复起来成本也比较低。程序发布之后可以进行渗透测试。前面的文章中我们为大家介绍了静态源代码审查的方法和策略&#xff0c;接下来本文…
阅读更多...
【milvus】向量数据库，用来做以图搜图+人脸识别的特征向量

【milvus】向量数据库，用来做以图搜图+人脸识别的特征向量

1. 安装milvus ref:https://milvus.io/docs 第一次装东西&#xff0c;要把遇到的问题和成功经验都记录下来。 1.Download the YAML file wget https://github.com/milvus-io/milvus/releases/download/v2.2.11/milvus-standalone-docker-compose.yml -O docker-compose.yml看…
阅读更多...
微信小程序中常见组件的使用

微信小程序中常见组件的使用

文章目录 微信小程序中常见组件的使用视图组件viewscroll-viewswipermovable-area 基础组件icontextrich-textprogress 表单组件buttoncheckbox、checkbox-grouplabelforminputpicker单列选择器多列选择器时间选择器&日期选择器&地区选择器 picker-viewradiosliderswit…
阅读更多...
人工智能-神经网络

人工智能-神经网络

目录 1 神经元 2 MP模型 3 激活函数 3.1 激活函数 3.2 激活函数作用 3.3 激活函数有多种 4、神经网络模型 1 神经元 神经元是主要由树突、轴突、突出组成&#xff0c;树突是从上面接收很多信号&#xff0c;经过轴突处理后传递给突触&#xff0c;突触会进行选择性向下一级的…
阅读更多...
[项目实战] 使用Idea构建单页面Vue3项目（不使用node、npm）

[项目实战] 使用Idea构建单页面Vue3项目（不使用node、npm）

前言 某天张三对小花说&#xff0c;我需要在一台新电脑上实现一个前端的漂亮页面&#xff1a;比如京东手机首页(m.jd.com)。 小花这时吭哧吭哧的去新电脑上安装nodejs、npm&#xff0c;然后在本地使用npm构建vue3项目&#xff0c;在项目里下载安装element-plus、axios。下一步…
阅读更多...
常用异常检测算法总结与代码实现[统计学方法/K近邻/孤立森林/DBSCAN/LOF/混合高斯GMM/自编码器AutoEncoder等]

常用异常检测算法总结与代码实现[统计学方法/K近邻/孤立森林/DBSCAN/LOF/混合高斯GMM/自编码器AutoEncoder等]

这篇博文主要是延续前文系列的总结记录&#xff0c;这里主要是总结汇总日常主流的异常检测算法相关知识内容。 &#xff08;1&#xff09;基于统计方法的异常值检测 基于统计方法的异常值检测是一种常用的异常检测算法&#xff0c;它基于样本数据的统计特性来识别与其他样本显…
阅读更多...
【RS】ENVI5.6 栅格数据坐标转换

【RS】ENVI5.6 栅格数据坐标转换

ENVI是一个完整的遥感图像处理平台&#xff0c;广泛应用于科研、环境保护、气象、农业、林业、地球科学、遥感工程、水利、海洋等领域。目前ENVI已成为遥感影像处理的必备软件&#xff0c;包含辐射定标、大气校正、镶嵌裁剪、分类识别、阈值分割等多种功能。ENVI针对绝大部分的…
阅读更多...
【三相STATCOM】使用D-Q控制的三相STATCOM技术【三相VSI STATCOM为R-L负载提供无功功率】（Simulink实现）

【三相STATCOM】使用D-Q控制的三相STATCOM技术【三相VSI STATCOM为R-L负载提供无功功率】（Simulink实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
COMEN 科曼C60、C80心电监护仪协议对接

COMEN 科曼C60、C80心电监护仪协议对接

通过网口&#xff0c;成功对接到参数&#xff1a; HR、NibpDia、NibpMean、NibpSys、Spo2、Resp、Sys、Dia、Mean、Temp、PR等数值
阅读更多...
flutter开发实战-flutter二维码条形码扫一扫功能实现

flutter开发实战-flutter二维码条形码扫一扫功能实现

flutter开发实战-flutter二维码条形码扫一扫功能实现 flutter开发实战-flutter二维码扫一扫功能实现&#xff0c;要使用到摄像头的原生的功能&#xff0c;使用的是插件&#xff1a;scan 效果图如下 一、扫一扫插件scan # 扫一扫scan: ^1.6.01.1 iOS权限设置 <key>NSCa…
阅读更多...
移动互联网时代的网络口碑营销怎么做

移动互联网时代的网络口碑营销怎么做

从人类开始交换商品的时代开始&#xff0c;口碑营销就已经存在&#xff0c;是靠口耳传播的营销方式。小马识途认为进入当今移动互联网时代&#xff0c;口碑营销又有了新的发展&#xff0c;网络口碑营销推广开始普及。营销人员将传统口碑营销与移动互联网营销相结合&#xff0c;…
阅读更多...
在arm平台上安装qt

在arm平台上安装qt

qt官网上如果没有找到对应的安装包&#xff0c;就需要下载源代码自行编译安装qt&#xff0c;时间会久一点 qt下载 进入官网下载 如下图步骤选择源代码包&#xff08;以5.12.12为例&#xff09; 可以复制链接地址在迅雷上创建下载任务&#xff0c;下载速度会快些 qt的编译与…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023