自学Vue seven day！！！

最新推荐文章于 2024-07-20 23:54:17 发布
最新推荐文章于 2024-07-20 23:54:17 发布
阅读量134 收藏 1
点赞数
分类专栏： 小白自学Vue 文章标签： javascript vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49105225/article/details/117857104
版权

弹框案例：

要求：

将弹窗内的内容在页面中展示；

点击按钮将弹窗关闭；

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
     * {
       margin: 0;
       padding: 0;
     }
     html,body, #app1{
       width: 100%;
       height: 100%;
     }
     
     .wrapper {
       display: flex;
       justify-content: center;
       align-items: center;
       width: 100%;
       height: 100%;
       background-color: rgba(0,0,0, 0.3);
       position: fixed;
       top:0;
       left: 0;
     }
     .content {
       width: 220px;
       height: 160px;
       background-color: #fff;
     }
     .title {
       height: 40px;
       line-height: 40px;
       text-align: center;
     }
     .msg {
       display: flex;
       align-items: center;
       justify-content: center;
       box-sizing: border-box;
       padding: 5px 10px;
       border-top: 1px solid #eee;
       border-bottom: 1px solid #eee;
       height: 80px;
       text-align: center;
       color: gray;
       font-size: 14px;
     }
     .bottom {
       display: flex;
       height: 40px;
       line-height: 40px;
       text-align: center;
     }
     .bottom div {
       flex: 1;
       color: green;
     }
     .bottom div:nth-of-type(1) {
       border-right: 1px solid #eee;
       color: red;
     }
   </style>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 </head>
 <body>
   <div id="app1">
         <p>点击结果：{{clickResult}}</p>
 ​
         <div class="wrapper">
             <div class="content">
             <p class="title">bug提示</p>
             <div class="msg">亲，你还有53633个bug，是否要处理?</div>
             <div class="bottom">
                 <div>忽略，下班</div>
                 <div>加班处理</div>
             </div>
             </div>
         </div>
         
   </div>
 </body>
 ​
 ​
 <script>
 ​
 ​
     // 现有以上布局，把wrapper抽取成子组件，通过传值的方式往内部传递数据
     new Vue({
         el: '#app1',
         data: {
             textObj: {
                 title: 'bug提示',
                 msg: '亲，你还有53633个bug，是否要处理?',
                 cancelTxt: '忽略，下班',
                 submitTxt: '加班处理'
             },
             clickResult:""
         },
         
     })
 </script>
 ​
 </html>

 

完成之后的代码：

整体思路：

1、将整个弹窗编辑为一个组件；

2、在页面中使用组件，并将父级的textObj的对象传入组件中接收；

3、设置点击效果，将盒子wrapper设置一个v-show的参数来控制弹窗的显现；

4、在父组件定义一个需要修改内容的函数，并将此函数自定义在子组件中，在子组件调用； 5、将所需要的textObj.cancelTxt、textObj.submitTxt两个参数，通过子组件传入父组件进行修改，完成整个流程即可；

 

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
     * {
       margin: 0;
       padding: 0;
     }
 ​
     html,
     body,
     #app1 {
       width: 100%;
       height: 100%;
     }
 ​
     .wrapper {
       display: flex;
       justify-content: center;
       align-items: center;
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.3);
       position: fixed;
       top: 0;
       left: 0;
     }
 ​
     .content {
       width: 220px;
       height: 160px;
       background-color: #fff;
     }
 ​
     .title {
       height: 40px;
       line-height: 40px;
       text-align: center;
     }
 ​
     .msg {
       display: flex;
       align-items: center;
       justify-content: center;
       box-sizing: border-box;
       padding: 5px 10px;
       border-top: 1px solid #eee;
       border-bottom: 1px solid #eee;
       height: 80px;
       text-align: center;
       color: gray;
       font-size: 14px;
     }
 ​
     .bottom {
       display: flex;
       height: 40px;
       line-height: 40px;
       text-align: center;
     }
 ​
     .bottom div {
       flex: 1;
       color: green;
     }
 ​
     .bottom div:nth-of-type(1) {
       border-right: 1px solid #eee;
       color: red;
     }
   </style>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 </head>
 ​
 <body>
   <div id="app1">
     <p>点击结果：{{clickResult}}</p>
     <wrapper :text-obj='textObj' @fn='changeResult'></wrapper>
   </div>
 </body>
 ​
 <template id="tmp">
   <div class="wrapper" v-show='isShow'>
     <div class="content">
       <p class="title">{{textObj.title}}</p>
       <div class="msg">{{textObj.msg}}</div>
       <div class="bottom">
         <div @click='handleClick(textObj.cancelTxt)'>{{textObj.cancelTxt}}</div>
         <div @click='handleClick(textObj.submitTxt)'>{{textObj.submitTxt}}</div>
       </div>
     </div>
   </div>
 </template>
 ​
 <script>
   let wrapper = {
     template: '#tmp',
     data() {
       return {
         isShow: true
       }
     },
     props: ["textObj"],
     methods: {
       handleClick(val) {
         this.isShow = false;
         this.$emit('fn', val)
       }
     }
   }
 ​
   // 现有以上布局，把wrapper抽取成子组件，通过传值的方式往内部传递数据
   new Vue({
     el: '#app1',
     data: {
       textObj: {
         title: 'bug提示',
         msg: '亲，你还有53633个bug，是否要处理?',
         cancelTxt: '忽略，下班',
         submitTxt: '加班处理'
       },
       clickResult: ""
     },
     components: {
       wrapper
     },
     methods: {
       changeResult(val) {
         this.clickResult = val
       }
     },
 ​
   })
 </script>
 ​
 </html>

 

1、兄弟组件传参

使用中央事件总线 用法总结： ​

1、建立一个空的Vue对象 ​；

2、在被修改的的组件中，定义mounted函数，在函数中通过bus发起自定义事件监听； ​

3、在需要修改值的地方，触发这个自定义事件，bus.$emit(“事件名”，参数1，参数2...)

     <div id='app'>
         <button1></button1>
         <button2></button2>
     </div>
     <template id="tpm1">
         <div>
             <button :style="{backgroundColor: bgc}">按钮1</button>
         </div>
     </template>
     <template id="tpm2">
         <div>
             <button @click='add()'>按钮2</button>
         </div>
     </template>
     <script>
         // 中央事件总线     用法总结：
         // 1、建立一个空的Vue对象
         // 2、在被修改的的组件中，定义mounted函数，在函数中通过bus发起自定义事件监听
         // 3、在需要修改值的地方，触发这个自定义事件，bus.$emit(“事件名”，参数1，参数2.。。)
 ​
 ​
         // 1、建立一个空的Vue对象
         let bus = new Vue()
         let button1 = {
             template: '#tpm1',
             data() {
                 return {
                     bgc: 'green'
                 }
             },
             mounted() {
                 // 2、在被修改的的组件中，定义mounted函数，在函数中通过bus发起自定义事件监听
                 bus.$on("changeBgcEvent", (val) => {
                     this.bgc = val
                 })
             },
         }
         let button2 = {
             template: '#tpm2',
             data() {
                 return {
                     newColor: 'pink'
                 }
             },
             methods: {
                 add() {
                     // 3、在需要修改值的地方，触发这个自定义事件，bus.$emit(“事件名”，参数1，参数2.。。)
                     bus.$emit("changeBgcEvent", this.newColor)
                 }
             },
         }
         new Vue({
             el: '#app',
             data: {
 ​
             },
             components: {
                 button1,
                 button2
             }
         })
     </script>

 

2、插槽

2.1、匿名插槽；

1、组件标签内部手写HTML标签的时候，默认不做渲染；

2、需要把这些HTML标签展示在组件内部，需要用slot标签来接收；

3、slot便签出现的位置，就是将来这些HTML标签所在的位置，这种slot标签就成为插槽；

4、插槽加上name属性，称为具名插槽，反之称为匿名插槽；

 ​
     <div id='app'>
         <comp>
             <a href="">a标签</a>
             <button>按钮</button>
         </comp>
     </div>
     <template id="tmp">
         <div>
             <slot></slot>
             <p>p标签</p>
         </div>
     </template>
     <script>
         let comp = {
             template: '#tmp'
         }
         new Vue({
             el: '#app',
             data: {
 ​
             },
             components: {
                 comp
             }
         })
     </script>

 

 

2.2、具名插槽

具名插槽需要name属性，值要和需要放在这里的标签的slot属性一致

 <div id='app'>
         <comp>
             <a href="" slot="link">a标签</a>
             <button slot="btn">按钮</button>
         </comp>
     </div>
     <template id="tmp">
         <div>
             <slot name='link'></slot>
             <p>p标签</p>
             <slot name='btn'></slot>
         </div>
     </template>
     <script>
         let comp = {
             template: '#tmp'
         }
         new Vue({
             el: '#app',
             data: {
 ​
             },
             components: {
                 comp
             }
         })
     </script>

 

2.3、京东导航栏案例

先预设好所有的插槽，然后在slot的位置切换名字，就可以切换相对应的内容

 <style>
         * {
             margin: 0;
             padding: 0;
             list-style: none;
         }
 ​
         .dh {
             margin: 100px auto;
             width: 400px;
             height: 50px;
             line-height: 50px;
             text-align: center;
             display: flex;
             border: 1px solid #000;
         }
 ​
         .l,
         .r {
             width: 50px;
             font-size: 30px;
         }
 ​
         .r {
             line-height: 30px;
         }
 ​
         .c {
             flex: 1;
         }
 ​
         ul {
             display: flex;
             justify-content: space-around;
         }
     </style>
 </head>
 ​
 <body>
     <div id='app'>
         <daoh>
             <input type="text" slot="inp">
             <h3 slot="h3">购物车</h3>
             <ul slot="ul">
                 <li>商品</li>
                 <li>评价</li>
                 <li>详情</li>
             </ul>
         </daoh>
     </div>
     <template id="tmp">
 ​
         <div class="dh">
             <div class="l">&lt;</div>
             <div class="c">
                 <!-- 切换slot的名字，就可以切换相对应的内容 -->
                 <slot name='ul'></slot>
             </div>
             <div class="r">...</div>
         </div>
 ​
     </template>
     <script>
         let daoh = {
             template: '#tmp'
         }
         new Vue({
             el: '#app',
             data: {
 ​
             },
             components: {
                 daoh
             }
         })
     </script>

 

2.4、导航栏功能切换

 <style>
         * {
             margin: 0;
             padding: 0;
             list-style: none;
         }
 ​
         .all {
             margin: 100px auto;
 ​
         }
 ​
         .dh {
             width: 400px;
             height: 50px;
             line-height: 50px;
             text-align: center;
             display: flex;
             border: 1px solid #000;
         }
 ​
         .l,
         .r {
             width: 50px;
             font-size: 30px;
         }
 ​
         .r {
             line-height: 30px;
         }
 ​
         .c {
             flex: 1;
         }
 ​
         ul {
             display: flex;
             justify-content: space-around;
         }
     </style>
 </head>
 ​
 <body>
     <div id='app'>
         <daoh>
             <input type="text" slot="inp">
             <h3 slot="h3">购物车</h3>
             <ul slot="ul">
                 <li>商品</li>
                 <li>评价</li>
                 <li>详情</li>
             </ul>
         </daoh>
     </div>
     <template id="tmp">
 ​
 ​
         <div class="all">
             <div class="dh">
                 <div class="l">&lt;</div>
                 <div class="c">
                     <!-- 切换slot的名字，就可以切换相对应的内容 -->
                     <slot :name='thisName'></slot>
                 </div>
                 <div class="r">...</div>
             </div>
             <button @click='add("inp")'>搜索</button>
             <button @click='add("h3")'>购物</button>
             <button @click='add("ul")'>详情</button>
         </div>
 ​
     </template>
     <script>
         let daoh = {
             template: '#tmp',
             data() {
                 return {
                     thisName: 'ul'
                 }
             },
             methods: {
                 add(val) {
                     this.thisName = val
                 }
             },
         }
         new Vue({
             el: '#app',
             data: {
 ​
             },
             components: {
                 daoh
             }
         })
     </script>

 

2.5、作用域插槽

组件标签comp内部想要去使用组件中data数据时，不能直接使用，原因是不在作用域范围内。

解决办法：

1、把组件中的data中的数据传给对应的slot便签的标签属性 :mynum='num'；

2、在slot所对应的标签上添加slot-scope属性，值是一个对象（名字自定义），这个对象接收了他所对应的slot标签的标签属性；

3、在这个标签上使用插值语法{{obj.mynum}} 就可以使用到子组件中的data数据；

 <div id='app'>
         <comp>
             <button slot="btn" slot-scope='obj'>按钮{{obj.mynum}}、{{obj.tit}}</button>
         </comp>
     </div>
     <template id="tmp">
         <div>
             <p>p标签</p>
             <slot name='btn' :mynum='num' tit='ssss'></slot>
         </div>
     </template>
     <script>
         let comp = {
             template: '#tmp',
             data() {
                 return {
                     num: 20
                 }
             }
         }
         new Vue({
             el: '#app',
             data: {
 ​
             },
             components: {
                 comp
             }
         })
     </script>

 

2.6、作用域插槽的多种写法

     <!-- 
             1、基本写法
             <comp>
             <button slot="btn" slot-scope='obj'>按钮{{obj.mynum}}、{{obj.tit}}</button>
         </comp> -->
 ​
         <!-- 2、基本写法之模板写法 -->
         <comp>
             <template slot="btn" slot-scope='obj'>
                 <button>按钮{{obj.mynum}}、{{obj.tit}}</button>    
             </template>
         </comp>
 ​
         <!-- 
             3、指令写法
             <comp v-slot:btn="obj">
             <button>按钮{{obj.mynum}}、{{obj.tit}}</button>
         </comp> -->
 ​
         <!-- 
             4、指令写法之模板写法
             <comp>
             <template v-slot:btn="obj">
                 <button>按钮{{obj.mynum}}、{{obj.tit}}</button>        
             </template> -->
Jason_HeSL
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
电子邮件链接mailto_“ 3个链接”电子邮件的历史记录以及曾经发送的每个链接的存档...
cumi7754的博客
07-17 3万+
电子邮件链接mailtoby Quincy Larson 昆西·拉尔森(Quincy Larson) “ 3个链接”电子邮件的历史记录以及曾经发送的每个链接的存档 (The history of the “3 links” email and an archive of every link ever sent) It was March 2016. The freeCodeCamp comm...
vue学习资料！！！！
03-27
vue学习资料！！！！
每月两个小小项目——CSS3实现可爱动画加载页面
AIWWY的博客
02-23 457
目录 项目实现图片GIF 项目思想 详细版（带大量解释） HTML代码 CSS代码 JS代码 简洁版（不带解释） HTML代码 CSS代码 JS代码 项目实现图片GIF 项目思想 首先我们2个页面是通过设置absolute或fixed让一个页面，脱离文档流，并覆盖到另一个页面上面，这样就不会有滚动条。也就是说我们的loading页面要设置absolute或fixed先显示覆盖，所以我们为了方便编写应该先编写第二个页面，再编写第一个页面就是loading页面，进度条我们可以.
Vue中的v-slot如何使用
在那山的那边海的那边，有一群程序猿
04-26 1万+
今天看了看Vue的文档，发现了v-slot这个指令，生怕掉队的我赶紧补习了一下 直接上代码！！！ //父组件 <template> <!--在此处添加渲染的内容--> <div> <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 D...
Vue中v-slot、插槽详解（看完这篇插槽对你来说很简单）
子时不睡的博客
09-27 8598
目录不使用插槽默认插槽具名插槽作用域插槽动态插槽名和具名插槽的缩写 不使用插槽 领导让小睡做一个小样式，那就用这个小案例作为引入， 看看在不使用插槽的时候、使用插槽时候的区别。下次就知道什么时候使用插槽能更方便了。 看到上面的样式，首先会想到使用组件，然后再App.vue中把标题和内容数据传给子组件即可。 样式的代码没展示，完整代码在最后 <!-- category组件--> <template> <div class="category"> <h3
Vue slot插槽的基本使用
m0_57076093的博客
07-14 96
Slot插槽 插槽，可以实现在组件标签中写内容，然后渲染到组件中。默认情况下是不支持这种操作的，使用slot可以实现 默认slot Child.vue <template> <div> <slot>默认值 如果标签中没写内容，这显示默认内容</slot> </div> </template> <script> export default { } </script> Parent.
uni-app 高度100%无效
热门推荐
如果人生就像一场梦，那就希望你做个好梦！
12-05 1万+
相信大家都有遇到这个奇葩的问题，首相说我的架构，我用的是 uni-app,标签用的是 pug 相信大家也不陌生 1.先看我的scss文件，高度和宽度都设置了100% 但是用goolge浏览器查看的时候，高度的确有100%，就是没有生效 2.网上有说在 App.vue 里面添加 html,body,#app {height: 100%;}，我尝试了是不行的，因为我用的是pug，估计用在普通的ht...
设计师如何学习前端？
10-13 555
笔者的经历在知乎就可以看到，大学专业是数字媒体艺术，大一实习过动效设计师，大二拿到了人生第一个大公司 offer 是阿里的交互设计，后来转岗到淘宝旅行的前端团队，现在在微信电影票做前端研发。 也是走过了不少野路子，不过还好有小右哥 @尤雨溪 这样艺术/设计转前端的大神在前面做典范，也证明这条路是玩的通的
字符串第一个出现的单个字符_如何在不编写单个应用程序的情况下找到我的第一个开发人员工作
cumi6497的博客
08-17 1129
字符串第一个出现的单个字符I've read a lot of different stories from other self-taught developers who've made a successful transition into the field of software development. It was always great motivation and inspi...
设计师该如何学习前端？
weixin_34092370的博客
08-01 166
笔者的经历在知乎就可以看到，大学专业是数字媒体艺术，大一实习过动效设计师，大二拿到了人生第一个大公司的 offer 是交互设计师，后来转岗到淘宝旅行的前端团队，现在在微信电影票做前端研发。也是走过了不少野路子，不过还好有小右哥 @尤雨溪 这样艺术/设计转前端的大神在前面做典范，也证明这条路是玩的通的 接下来就说说自己的学习建议吧，一个小教程，也是...
vue安装包！！！！免费
05-31
Vue.js 是一款非常流行的前端JavaScript框架，由尤雨溪（Evan You）开发，用于构建用户界面。Vue的核心理念是简单易用、可维护性和高效性能。它采用组件化的开发方式，让开发者能够轻松地创建可复用的UI组件，提高了...
分享当下较新的30道Vue面试题！.docx
07-23
分享当下较新的30道Vue面试题！.docx分享当下较新的30道Vue面试题！.docx分享当下较新的30道Vue面试题！.docx分享当下较新的30道Vue面试题！.docx分享当下较新的30道Vue面试题！.docx分享当下较新的30道Vue面试题！....
vue.js！！！！！！！！
06-14
Vue.js 是一款非常流行的前端JavaScript框架，由尤雨溪（Evan You）开发，它以其易学易用、高效和可扩展性而受到广大开发者喜爱。Vue2是Vue.js的一个重要版本，它在Vue1的基础上进行了诸多改进和优化，使得框架更加...
vue面试题！！！！！！！！！！！！！
06-01
vue面试题
Next.js静态导出与动态路由优化
最新发布
天涯学馆
07-20 803
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1134
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 645
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
vue执行npm install问题idealTree:yudao-ui-admin-vben: sill idealTree buildDeps
yuan5025的博客
07-17 1100
目前这个问题只在芋道源码yudao-ui-admin-vben碰到了，其他vue项目没用遇到过。
vue3 使用!importent优先级
05-26
在 Vue3 中，`.vue` 单文件组件中的 `<template>`、`<script>` 和 `<style>` 都被视为单独的模块，并且可以使用 `import` 导入其他模块。 当存在多个模块时，可以使用 `import` 关键字指定模块的导入顺序。如果同一...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Jason_HeSL

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值