vue--6.slot插槽、组件中的自定义事件、网络请求、Sass和Less、单向数据流

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

目录

文章目录

1.slot插槽

2.组件中的自定义事件

3.网络请求

(3.1)自己配置

(3.2)baseURL

4.Sass和Less

5.单向数据流



1.slot插槽

        语法:v-slot:插槽名

        语法糖:#插槽名

        没有指定插槽名就是默认插入到插槽,不给插槽插入数据的话,就会使用组件的slot标签的尖括号中的数据

        插槽名不用使用引号引起来,直接写变量名

        插入的内容必须是template标签或者组件 不能是原生的元素

设计组件里面:

        默认槽位:< slot> < /slot>

        具名槽位:< slot name="s1"> < /slot> < slot name="s2"> < /slot>

使用组件时:

        < 组件名> 尖括号中的东西插入默认槽位 < /组件名>

        < 组件名> < template v-slot:s2>插入东西必须放这个标签中,老版本不用< template>

                        < template #s1>插入东西必须放这个标签中,老版本不用< template>

        < /组件名>

总结: v-slot:s2 是具名插槽的用法  #s1是插槽的语法糖

示例如下:

(1)主页的图片

(2)子页的图片

 

2.组件中的自定义事件

自定义事件 在组件内部触发事件 this.$emit("事件名",参数1,参数2.....)

使用组件时 绑定监听器,内部触发事件时 监听器就会调用

示例如下:

主页面

 子页面

 

3.网络请求

(3.1)自己配置

(1)组件中写入端口

(2)配置后端(重新创建一个文件夹并命名):

                使用脚手架快速创建项目 npm init egg --type=simple

                npm i

                npm i --save egg-cors

                2.开启插件
                config/plugin.js文件
                cors:{
                     enable: true,
                     package: 'egg-cors',
                  }


                3.配置插件   
                config/config.default.js文件
                config.cors = {
                        origin: '*',
                        allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH'
                  }

(3)在后端router.js和home.js文件里面去注册相应的端口

(4)配置8080服务的代理

vue.config.js文件:

         lintOnSave: false, //关闭eslint的严格模式检测,
        devServer: {
             port: 8080,

             proxy:{ 

                          '/hqyj': {

                                        target: 'http://192.168.101.109:7001',
                                        secure: true, //如果代理的target是https接口,需要配置它 
                                        pathRewrite: {'^/hqyj': '/' }, 

                                }

                  }

        }

示例如下:

 

(3.2)baseURL

(1)组件的原型链上配置axios工具,并配置公共网址

main.js文件中:

        import axios from "axios"

        Vue.prototype.$axios=axios

        Vue.prototype.$axios.defaults.baseURL="http://ip:8080/api"

(2)配置8080服务的代理

vue.config.js文件:

         lintOnSave: false, //关闭eslint的严格模式检测,
        devServer: {
             port: 8080,

             proxy:{ 

                          '/hqyj': {

                                        target: 'http://192.168.101.109:7001',
                                        secure: true, //如果代理的target是https接口,需要配置它 
                                        pathRewrite: {'^/hqyj': '/' }, 

                                }

                  }

        }

(3)组件中使用:

       this.$axios("/ajax1")

示例如下:图片是连续的

(1)

(2)

(3) 

 

4.Sass和Less

vue create init 选择帮我们配置sass的加载器

5.单向数据流

单向数据流: 数据自向上 由底层流向顶层 但是不能反向

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值