今天实习第二天 ，vue

已于 2023-07-14 08:30:08 修改
阅读量597 收藏
点赞数 1
分类专栏： vue前端 文章标签： vue.js 前端 javascript
于 2023-07-13 16:47:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38757863/article/details/131681415
版权

由于这是一次新的项目，有几个技术，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")
            }
        }

    });
万zp
关注
专栏目录
暑期实习第二天：vue项目的搭建配置、遇到的问题以及继续复习vue的知识
weixin_49768004的博客
07-14 320
1、vue项目的搭建配置 具体可见：如何搭建一个vue项目(完整步骤) - 对方屌丝正在输入中 - 博客园 (cnblogs.com) 里面足够详细，不再赘述 2、运行时遇到的问题： 其一： 原因：配置问题，在项目目录里找到package.json里的scriptss代码块 可以看到scripts代码块里没有dev属性 对应 vue-cli-service serve 的是serve属性。 解决方法：1、运行时使用 npm run serve 而不是npm run de...
vue 前端显示图片加token_手摸手，带你用vue撸后台 系列二(登录权限篇)
weixin_39562579的博客
10-20 1144
完整项目地址：vue-element-adminhttps://github.com/PanJiaChen/vue-element-admin前言拖更有点严重，过了半个月才写了第二篇教程。无奈自己是一个业务猿，每天被我司的产品虐的死去活来，之前又病了一下休息了几天，大家见谅。进入正题，做后台项目区别于做其它的项目，权限验证与安全性是非常重要的，可以说是一个后台项目一开始就必须考虑和搭建的基础核心功...
实习第二天
weixin_53491844的博客
07-13 228
实习第二天
第二天接触vue的心得
qq_38026000的博客
11-29 99
文章目录一、vue表单ps ：VUE单页应用二、vue事件修饰符三、vue生命周期四、vue动画 一、vue表单 单选框: <!-- 单选框的使用 绑定的属性一定要与value的值保持一致，提交还是会提交value的值--> <div> 性别: <input type="radio" name="sex" value="0" v-model='sex'>男 <input type="radio" name="sex" value="1" v-model
今天实习第三天，vue（vue-cli部分，webpack部分，vue-router部分，elementUI部分）
qq_38757863的博客
07-14 948
在项目中使用依赖包的代码之前，通常需要先运行 “npm install” 命令。第二步.运行官网下载的node.js的msi文件（记住所有的node.js文件的安装包都是msi文件的形式），一直都是next。最后检查是否安装成功，使用windows+r 打开cmd 运行末班，输入命令 node -s和 npm- v，如果出现结果的话，代表安装成功。在npm run dev的时候，首先会去项目的package.json文件里找scripts 里找对应的 dev ，然后执行 dev 的命令。
实习第四天
weixin_53491844的博客
07-18 71
实习第四天
学习Vue日记第五天
qq_43061473的博客
06-05 93
钩子函数实现动画（越来越难了@！–！@） Vue结合Velocity.js实现动画 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script src="velocity.min.js"></script> <script src="../vue.js"></script
前端开发实习生的第二天
weixin_33726943的博客
07-10 379
上午一到工位就打开昨天老师让我熟悉的项目，我想通过nginx来启动项目，从昨天安装nginx的博客里找到nginx的启动命令发现nginx启动失败，讲真我还不太清楚nginx的作用是什么，它在项目中起到了什么作用？通过这篇博客了解了大概：blog.csdn.net/wy757510722…，之后我就开始根据报错查找nginx无法启动的可能原因。结果还是没有解决，尴尬，毕竟我什么都没有搞清楚，这种东...
实习第十二天
weixin_30469895的博客
09-11 132
uni-app介绍 2019.02.21 14:15:32字数 350阅读 483   据官宣，uni-app是一个使用Vue.js开发跨平台应用的前端框架，开发者只需编写一套代码，可编译到iOS、Android、H5、小程序等多个平台，不仅能正确运行且能给用户带来优秀体验。  如今，是一个多端泛滥的时代。可能一套设计需要应用到多端平台上，按照传统的方式，H5、app、...
web前端实习第一天的内心os
qq_45737678的博客
03-14 1119
从上学期末开始就有有意找个实习，但是因能力不足，就也没投多少个简历。看着身边的好友已经开始实习，而且工资待遇很不错，内心就更为焦急，也想找个实习。然后，就去试了老师介绍的一个实习，面试经过这里先不说，反正就过了。但是这过的中间是有水分的，因为老师跟那个公司的老总认识，然后就好像想培养我们这几个学生，学科竞赛和毕业设计和实习一条龙服务那种，所以尽管我们水平不咋地，空闲时间也不多，这个公司还是要了我们。 今天就是第一天实习，早上9.-12.，去那里先是填写资料和合同签约，反正待遇就不咋地，虽然早有预想，但还.
【学习笔记】前端（I）—— Vue2（Ⅰ）
Eddie_hyh的博客
04-30 853
前端第一部分：Vue（Ⅰ）
实训总结，第一次vue+SpringBoot前后端分离开发，实现前后端分离登录注册及单表CRUD
qq_45702990的博客
07-03 7406
通过实训中对项目的搭建，将本学期所学到过的知识融会贯通起来，开发一个具有前后台的B/S业务系统，能实现一定的业务功能。作品包含但不限于SpringBoot后台、Vue前端技术、mybatis、mysql数据库.......
Vue 实现仿美团外卖APP的总结
老曹的博客
12-21 5942
一、前言 这个项目源自一个网上的一个Vue项目。但是他们那个项目是基于Vue Cli 2 并且采用了UI组件库。为了练手，我采用原生CSS写样式，然后自己封装了一套响应式方案。后台应用我是直接拿来用的，后期我也会自己用其他框架重构一下。做这个项目最重要的目的是把学过的理论知识实践一下，下面把我遇到的问题总结一下。 前端项目地址：vue-shop 后端项目地址：vue-shop-server 完成的...
vue中用websocket，用echarts展示曲线
LoveMe_LoveMyDog的博客
06-26 1738
实习考核的第3个：使用websocket订阅trade实时交易数据，展示曲线图(推荐使用Echats)。 记录下昨天学习的东西 现在大三下，只会前端3件套加vue，考核第三天好家伙，Echarts怎么用，我只听过这个名词，websocket是什么？这个名词我都没听过…，还是太菜了。 什么是websocket？ WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议，ok，它是这个通讯协议。 为什么要用websocket？ 对啊，我们不是有HTTP协议了吗？为啥要用web
jeecg3版本的vue，离线启动
sharesb的博客
10-16 256
jeecg的vue2版本已经停止维护，所以只能用vue3的版本。3版本中使用的是pnpm（npm的增强版本）下载依赖。使用pnpm安装的node_modules，不能直接复制到离线主机中（因为在 pnpm安装过程中，会给依赖的配置文件写死绝对路径，并且会在c盘生成缓存）。所以要在离线主机中启动，需要1.在联网机器上下载依赖保存到某个文件夹2.在离线主机中安装node，并配置环境变量3.在离线主机中，让npm加载第一步下载的依赖4.在离线主机中，npm正常安装。
vue2项目 实现上边两个下拉框,下边一个输入框 输入框内显示的值为[“第一个下拉框选中值“ -- “第二个下拉框选中的值“]
最新发布
xu_duo_i的博客
10-17 98
vue2项目 实现上边两个下拉框,下边一个输入框 输入框内显示的值为["第一个下拉框选中值" -- "第二个下拉框选中的值"]
vue3 Invalid value type passed to callWithAsyncErrorHandling()
w710537643的博客
10-11 390
vue3 提示警告。页面内点击按钮无响应。和 事件方法名 重名导致。
Vue3动态组件component不生效问题解决方法
Java_fenxiang的博客
10-14 756
问题：vue3循环渲染动态组件component不生效，页面空白在vue3使用component动态组件展示组件时，组件就是不展示显示空白。在vue2中使用动态变量component展示组件都是没问题。试了很多方法 踩了很多坑，所以记录下：登录后复制 <div class="preview-list" id="c...
Element-plus el-form、el-dialog 数据回显同时用时，重置失效问题
Mr. Zhang Xiaojian's Blog
10-12 536
当第一次打开网页并点击“编辑”按钮时，虽然对话框变量变为 true 使对话框可见，但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制，DOM 实际上还未更新，因此表单组件内绑定了这些有值的初始数据。这样，在后续调用 resetFields 方法时，表单将会重置为这些默认值而不是空值。编辑时表单的初始值被设置成了回显的数据，而不是空字符串。时，表单会回到上次设置的初始值，即回显的数据。
Vue.js二级路由配置详解
下面将详细讲解Vue二级路由的配置方法。 首先，我们需要在项目的`main.js`文件中导入Vue Router模块并安装它。例如： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值