Vue学习（slot、axios）-学习笔记

文章目录

Vue学习（slot、axios）-学习笔记
- slot 插槽
- axios 交互

Vue学习（slot、axios）-学习笔记

slot 插槽

父：

<template>
<div>testA组件：{{title}}<part2><!-- 匿名插槽 --><ul slot><li>12313</li><li>12313</li></ul><!-- 具名插槽 --><ul slot='s1'><li>s1</li><li>s1</li></ul><ul slot='s2'><li v-for="(v,i) in arr" :key="i">{{v}}</li></ul><!-- 作用域插槽 --><!-- 相当于父组件提供了一套模板，数据是子组件的 --><!-- obj ==== { "title": "testB" } --><!-- <div slot-scope='obj'>  {{obj.title}}</div> --><ul slot-scope='obj'>  <li v-for="(v,i) in obj.arr" :key="i">{{v}}</li></ul></part2>
</div>
</template><script>
import part2 from './part2.vue'export default {name:'',data(){return{title:'testA',arr:[1,2,4,5,2]}},components:{part2}
}
</script>

子：

<template>
<div>testB组件：<!-- 匿名插槽 --><slot></slot><!-- 具名插槽 --><slot name="s2"></slot><!-- 作用域插槽 --><slot :arr="arr"></slot></div>
</template><script>export default {name:'',data(){return{title:'testB',arr:[1,2,2,2,2,2]}}
}
</script>

axios 交互

axios相当于是对Promise的一种封装。

//main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import './assets/font/iconfont.css'  //字体图标
import 'bootstrap/dist/css/bootstrap.css'Vue.config.productionTip = false
Vue.prototype.$http= axios;axios.defaults.baseURL = 'http://127.0.0.1:3333' //axios自带属性defaults.baseURLnew Vue({router,store,render: h => h(App)
}).$mount('#app')

<template>
<div><button> 发送</button><ul><li v-for="(v,i) in abc" :key="i" >{{v.name}}</li></ul>
</div>
</template><script>
export default {name:'',data(){return{title:'testA',flag:false,arr:[],obj:{id:1,name:2}}},watch:{  //异步请求,数据不能实时渲染    法2 监听arr:function(newValue,oldvalue){this.arr = newValue;}},mounted(){this.send();},computed:{  //异步请求,数据不能实时渲染   法1 计算属性abc:function(){if(this.flag){return this.arr}}},methods:{send(){var self = this;// this.$http({//   method:'get',//   url:'/get_table'// }).then(function(res){//   console.log(res)// }).catch(function(){// });///get_table?id=1&name=2this.$http.get('/get_table',{params:this.obj}).then(res=>{console.log(res)this.arr = res.data.result;this.flag = true;}).catch(function(){})// this.$http.post('/get_table',this.obj// ).then(function(res){//   console.log(res)// }).catch(function(){// })//  this.$http({//   method:'post',//   url:'/get_table',//   data:this.obj// }).then(function(res){//   console.log(res)// }).catch(function(){// });}}}
</script>

突然想到echarts的引入，是否axios的引入也可以这样而不用原型继承呢，顺便插个图记一下，免得今后忘记了

Vue学习（slot、axios）-学习笔记相关推荐

后端小白程序员的axios学习笔记
文章目录 axios 写在前面一.入门了解 1.1.什么是axios? 1.2.为什么学习axios? 1.3.前置内容与环境准备 1.3.1.json-server安装使用 1.3.2.axios ...
vue学习以及部分项目笔记
Vue 渐进式js框架简化js操作通过很少的js操作完成功能前后端分离的核心技术系统 :后端系统(rest接口) 前端系统(用户界面) vue入门 <div id="app- ...
Vue.js学习系列七——Vue服务器渲染Nuxt学习
我又回来啦~这次我们来学习Vue的服务器渲染SSR. 关于SSR的文章网上很多,一开始看得我云里雾里.然后去Vue.js 服务器渲染指南和nuxt官网看了看,发现文章大多都是搬运官网的内容,真正讲的清 ...
React学习:入门实例-学习笔记
文章目录 React学习:入门实例-学习笔记 React的核心需要引入三个库什么是JSX react渲染三步骤 React学习:入门实例-学习笔记 React的核心 1.组件化:把整一个网页的拆分 ...
Vue+Django搭建网页学习
Vue+Django搭建网页学习 1 简介 1.1 Vue Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐 ...
【项目实战】springboot+vue舞蹈课程在线学习系统-java舞蹈课程学习打卡系统的设计与实现
注意:该项目只展示部分功能,如需了解,评论区咨询即可. 本文目录 1.开发环境 2 系统设计 2.1 背景意义 2.2 技术路线 2.3 主要研究内容 3 系统页面展示 3.1 学生 3.2 教师页面 ...
高效学习方法论的学习笔记
Author:鲁力(地山) 0.前言与致谢如何提高学习效率?这一问题长期以来都是网上讨论的热点话题,就这一问题网上很多大咖以书籍.博客.知乎回答.视频等不同形式都发表过自己的观点见解和方法论.笔者在 ...
Yann Lecun纽约大学《深度学习》2020课程笔记中文版，干货满满！
关注上方"深度学习技术前沿",选择"星标公众号", 资源干货,第一时间送达! [导读]Yann Lecun在纽约大学开设的2020春季<深度学习>课 ...
使用html记笔记,开始学习HTML,并记下笔记
开始学习HTML,并记下笔记. 外边距(不影响可见框大小,影像盒子位置) margin-top(上) right(右) bottom(下) left(左) "外边距也可以为一个负值,元素会反 ...
操作系统进程学习(Linux 内核学习笔记)
操作系统进程学习(Linux 内核学习笔记) 进程优先级并非所有进程都具有相同的重要性.除了大多数我们所熟悉的进程优先级之外,进程还有不同的关键度类别,以满足不同需求.首先进程比较粗糙的划分,进程可 ...

Vue学习（slot、axios）-学习笔记

文章目录

Vue学习（slot、axios）-学习笔记

slot 插槽

axios 交互

Vue学习（slot、axios）-学习笔记相关推荐

最新文章

热门文章