北京哪家网站开发公司好,网站备案通讯地址,旅游网站开发方案ppt,大学生个人网页设计代码面试总结#xff08;2024/10/16#xff09; 面试11.闭包2.promise3.全局数据的保存4.多模板切换#xff0c;布局#xff0c;系统主题颜色5.同一个搜索#xff0c;不同的搜索条件#xff0c;输入框不同的校验方法6.自定义一个组件#xff0c;包括哪些属性7.多个父组件之间… 面试总结2024/10/16 面试11.闭包2.promise3.全局数据的保存4.多模板切换布局系统主题颜色5.同一个搜索不同的搜索条件输入框不同的校验方法6.自定义一个组件包括哪些属性7.多个父组件之间传值8.接口异常9.Vue性能优化方法 面试21.遇到的难点怎么解决的2.首屏加载缓慢怎么解决从编码方面怎么解决优化的角度3.[vue MVVM 双向绑定(数据劫持发布者-订阅者模式)](https://www.cnblogs.com/ceceliahappycoding/p/10604209.html)4.vue相比jquery的优点是啥5.v-if和v-show的区别两个怎么选择6.vue组件之间的传值7.组件的类不想让其他的页面使用8.防抖节流一般用的是什么9.vue插槽9.1 插槽的基本使用9.2 默认插槽9.3具名插槽9.4template标签9.5 作用域插槽 10.echarts怎么用的接收数据的格式是什么 面试1
1.闭包
闭包是指在嵌套定义的函数中一个内部函数引用了外部函数中的局部变量并且外部函数返回了这个内部函数对象。闭包可以保存和访问它创建时的环境即使在外部函数结束之后。
特点
访问内部变量闭包可以访问其外部函数中的局部变量即使外部函数已经执行完毕。内存占用闭包会占用一定的内存因为局部变量不会被垃圾回收机制回收。封装变量闭包可以用于创建私有变量封装内部实现细节。保持状态闭包可以保持某个状态使函数记住之前的操作。
应用场景
封装变量闭包可以用于创建私有变量封装内部实现细节避免全局变量的污染。保存状态闭包可以保持某个状态使函数记住之前的操作。函数工厂闭包可以用于创建具有特定功能的函数类似于工厂模式。异步操作闭包在异步编程中非常有用可以保存上下文信息避免回调地狱。
2.promise
3.全局数据的保存
用户信息 token 路由
数据保存有哪些方法 vuex localstorage sessionstorage
两者用法一致相比于cookie,存储容量增加到了5M之多区别点
localstorage是持久化存储除非自己手动删除关闭浏览器后依然存在而sessionstorage关闭浏览器后自动删除。localstorage作用范围是整个浏览器简单来说只要是用同一个浏览器打开的不同窗口还是不同网页之间都能够共享数据而sessionstorage只能在同一个窗口下共享数据。
4.多模板切换布局系统主题颜色
切换怎么把颜色带过去
在Vue.js中更改系统颜色通常涉及CSS变量的使用。你可以在全局样式文件中定义CSS变量并在组件中使用它们来实现颜色的动态更改。
在全局样式文件中定义CSS变量例如main.css:
:root {--primary-color: #3097d1; /* 默认主题颜色 */--accent-color: #e91e63; /* 默认辅助色 */
}在Vue组件中使用这些CSS变量
templatediv :style{ color: primaryColor }!-- 内容 --/div
/templatescript
export default {data() {return {primaryColor: var(--primary-color),// 如果需要更改颜色可以在这里设置新的值// 例如: #000000};},// 如果需要在运行时更改颜色可以添加方法来更新primaryColor的值methods: {changeColor(newColor) {this.primaryColor newColor;}}
};
/script如果要在用户交互时更改颜色可以添加事件监听器来触发changeColor方法
templatebutton clickchangeColor(#ff0000)Change to Red/button
/template每次调用changeColor方法时它都会更新primaryColor的值并且由于:style的绑定使用这个变量的所有元素都会自动更新它们的颜色。
在 Vue 项目中全局切换系统的深色和浅色模式你可以通过几种方式来实现。以下是一个设计思路包括使用 CSS 变量、Vuex或 Vue 的响应式数据来管理主题状态以及通过监听系统主题变化来自动切换主题。步骤 1: 定义 CSS 变量
首先在全局样式文件如 App.vue 的 style 或单独的 CSS 文件中定义一些 CSS 变量这些变量将用于控制颜色主题。css
:root { --primary-color: #007bff; --text-color: #000; --background-color: #fff; /* 其他颜色变量 */
} [data-themedark] { --primary-color: #6c757d; --text-color: #fff; --background-color: #343a40; /* 深色模式下的颜色变量 */
}
步骤 2: 使用 Vuex 管理主题状态可选
如果你的 Vue 项目使用了 Vuex那么将主题状态存储在 Vuex store 中会是一个很好的选择。这样你可以在任何组件中通过访问 store 来获取和设置主题。javascript
// store/index.js
import Vue from vue;
import Vuex from vuex; Vue.use(Vuex); export default new Vuex.Store({ state: { darkMode: false, // 初始设置为浅色模式 }, mutations: { toggleDarkMode(state) { state.darkMode !state.darkMode; }, }, actions: { // 如果需要可以在这里添加异步操作 }, getters: { isDarkMode: state state.darkMode, },
});
步骤 3: 监听系统主题变化并更新 Vuex 状态
在应用的入口文件如 main.js 或 main.ts中监听系统的 prefers-color-scheme 媒体查询并更新 Vuex store 中的主题状态。javascript
// main.js
import Vue from vue;
import App from ./App.vue;
import store from ./store; // 监听系统主题变化
function updateTheme() { const prefersDark window.matchMedia((prefers-color-scheme: dark)).matches; store.commit(toggleDarkMode, prefersDark);
} updateTheme(); // 初始设置 // 监听媒体查询变化
window.matchMedia((prefers-color-scheme: dark)).addListener(updateTheme); new Vue({ store, render: h h(App),
}).$mount(#app);
注意上面的 toggleDarkMode mutation 可能需要根据实际情况进行调整因为直接将其设置为 prefersDark 可能会导致与用户手动切换主题时的行为不一致。你可能需要引入一个额外的状态或逻辑来区分系统主题和用户自定义主题。步骤 4: 在 Vue 组件中应用主题
在你的 Vue 组件中你可以通过绑定一个类名到根元素或使用计算属性来动态地应用主题。vue
template div :class{ dark-theme: isDarkMode } !-- 组件内容 -- /div
/template script
import { mapGetters } from vuex; export default { computed: { ...mapGetters([isDarkMode]), },
};
/script
或者如果你更喜欢不使用 Vuex你也可以直接在根组件如 App.vue中监听系统主题变化并通过 provide / inject 或 $emit / $on 机制将主题状态传递给子组件。结论
通过结合 CSS 变量、Vuex或 Vue 的响应式数据以及媒体查询监听你可以在 Vue 项目中轻松地实现全局的深色和浅色模式切换。这种方法的优点是易于维护和扩展同时保持了代码的清晰和可重用性。5.同一个搜索不同的搜索条件输入框不同的校验方法
6.自定义一个组件包括哪些属性
在Vue中可以通过创建一个单文件组件.vue来定义一个自定义组件。这个文件包括template、script和style标签。 以下是一个简单的自定义Vue组件的例子
templatediv classmy-custom-componenth1{{ title }}/h1p{{ message }}/pbutton clickgreetSay Hi/button/div
/templatescript
export default {props: {title: String,message: String},methods: {greet() {alert(Hi!);}}
}
/scriptstyle scoped
.my-custom-component {/* 组件样式 */
}
/style要使用这个组件你需要先导入它然后在父组件中注册并使用它。例如
templatedivmy-custom-component titleWelcome messageHello there! //div
/templatescript
import MyCustomComponent from ./components/MyCustomComponent.vue;export default {components: {MyCustomComponent}
}
/script在这个例子中MyCustomComponent定义了两个属性title和message以及一个方法greet。在父组件中你可以通过属性传值的方式来设置这些属性并且可以通过注册的标签名来使用这个组件。
7.多个父组件之间传值
在Vue中多个父组件之间传值可以通过一个全局状态管理库如Vuex来实现或者使用事件总线Event Bus模式。
8.接口异常
api返回异常 http请求的状态码异常 对应的api挂了
在Vue中接口异常可能涉及以下几种情况
网络问题如无法连接到服务器或请求超时。服务器错误服务器内部错误如500等HTTP状态码。数据处理错误后端返回的数据格式不符合预期。请求参数错误向服务器发送了错误的请求参数。
解决方法
网络问题检查网络连接设置合理的超时时间使用try-catch处理网络请求。服务器错误在请求中添加错误处理比如使用axios的.catch方法或者vue-resource的error回调。数据处理错误确保数据处理逻辑正确检查后端返回的数据格式。请求参数错误验证请求参数的正确性并提供用户反馈。
当出现错误时需要在响应拦截提供异常提示
9.Vue性能优化方法
Vue 应用的性能优化可以从多个方面入手以下是一些关键的性能优化方法 使用v-if和v-show判断是否渲染元素v-if为真时才渲染v-show则总是渲染但可以通过CSS隐藏。 避免在列表渲染时使用v-if因为它会导致渲染函数的重新构建。 使用计算属性或监听器来缓存计算结果避免在模板中进行复杂的计算。 使用key属性来帮助Vue识别列表中各项的唯一性优化列表渲染的过程。 避免在模板中进行复杂的表达式可以将逻辑移到计算属性或方法中。 使用Webpack的terser-webpack-plugin插件和uglifyjs-webpack-plugin进行代码压缩和mangle。 使用路由懒加载来提升初始加载速度。 使用Vue的SSR服务器端渲染来提高非首屏页面的加载速度。 使用Vue Devtools进行性能分析并遵循其提出的优化建议。 对于大型应用考虑使用Vue的插件如Vuex和Vue Router的优化模式。 如果是大数据很长的列表全部渲染的话一次性创建太多 DOM 就会非常卡这时就可以用虚拟滚动只渲染少部分(含可视区域)区域的内容然后滚动的时候不断替换可视区域的内容模拟出滚动的效果 原理是监听滚动事件动态更新需要显示的 DOM并计算出在视图中的位移这也意味着在滚动过程需要实时计算有一定成本所以如果数据量不是很大的情况下用普通的滚动就行 v-for 遍历避免同时使用 v-if 为什么要避免同时使用 v-for 和 v-if
在 Vue2 中 v-for 优先级更高所以编译过程中会把列表元素全部遍历生成虚拟 DOM再来通过 v-if 判断符合条件的才渲染就会造成性能的浪费因为我们希望的是不符合条件的虚拟 DOM都不要生成
在 Vue3 中 v-if 的优先级更高就意味着当判断条件是 v-for 遍历的列表中的属性的话v-if 是拿不到的
第三方插件按需引入 比如 Element-UI 这样的第三方组件库可以按需引入避免体积太大特别是项目不大的情况下更没有必要完整引入组件库路由懒加载 我们知道 Vue 是单页应用所以如果没有用懒加载就会导致进入首页时需要加载的内容过多时间过长就会出现长时间的白屏很不利于用户体验SEO 也不友好
所以可以去用懒加载将页面进行划分需要的时候才加载对应的页面以分担首页的加载压力减少首页加载时间
keep-alive缓存页面 比如在表单输入页面进入下一步后再返回上一步到表单页时要保留表单输入的内容、比如在列表页详情页列表页这样来回跳转的场景等
我们都可以通过内置组件 来把组件缓存起来在组件切换的时候不进行卸载这样当再次返回的时候就能从缓存中快速渲染而不是重新渲染以节省性能
templatediv idappkeep-aliverouter-view//keep-alive/div
/template也可以用 include/exclude 来 缓存/不缓存 指定组件 可通过两个生命周期 activated/deactivated 来获取当前组件状态
事件的销毁 Vue 组件销毁时会自动解绑它的全部指令及事件监听器但是仅限于组件本身的事件
而对于定时器、 addEventListener 注册的监听器等就需要在组件销毁的生命周期钩子中手动销毁或解绑以避免内存泄露
script
export default {created() {this.timer setInterval(this.refresh, 2000)addEventListener(touchmove, this.touchmove, false)},beforeDestroy() {clearInterval(this.timer)this.timer nullremoveEventListener(touchmove, this.touchmove, false)}
}
/script图片懒加载 图片懒加载就是对于有很多图片的页面为了提高页面加载速度只加载可视区域内的图片可视区域外的等到滚动到可视区域后再去加载
Vue开发中的性能优化小技巧
面试2
1.遇到的难点怎么解决的
2.首屏加载缓慢怎么解决从编码方面怎么解决优化的角度
组件懒加载路由懒加载
3.vue MVVM 双向绑定(数据劫持发布者-订阅者模式)
4.vue相比jquery的优点是啥 简洁易学的MVVM架构 Vue采用了简洁、易于理解的MVVM架构这种架构使得开发者可以方便地进行视图和模型的分离而无需处理复杂的DOM操作特别是当我们需要处理的页面结构非常复杂时这可以帮助我们简化代码的编写提高代码的可维护性和可读性。 快速响应机制 Vue采用了高性能的响应机制这使得Vue可以更快地响应DOM的变化并对数据进行更新。这样可以提供更好的用户体验尤其在需要快速响应用户操作的场景中非常有用。 提供了丰富的生态系统 Vue拥有丰富的生态系统可以支持许多第三方组件和插件的使用。这使得开发者可以更轻松地实现各种功能和效果从而提高开发效率并且减少了重复造轮子的情况。 组件化开发的支持 Vue支持组件化开发开发者可以将复杂的页面结构分解为多个小的、可复用的组件这样可以使代码更清晰、更易于维护。同时Vue提供了多种使用过渡效果的方法让页面切换变得更加平滑增强用户体验。 强大的数据绑定功能 Vue支持双向数据绑定这意味着我们可以方便地将视图和模型进行绑定并且当视图或模型发生变化时对方也会自动更新减少了DOM操作的次数从而提高了性能。 与jQuery相比Vue是一个轻量级的框架 它的性能可能不如React或Angular但它却提供了与React或Angular相似的功能和特性这使得Vue成为了一个非常实用的前端框架特别是对于那些需要管理数据和组件状态的项目。
1、精力集中。
Jq偏重于对dom的操作由它的函数就很容易看出来$()、parent()、find()。我们用jq的时候经常要去考虑怎么去渲染数据怎么从视图中取到数据操作数据前必须对dom节点进行选取修改赋值等操作这其实分散了我们的本该放在业务逻辑上的精力。而Vue则是基于MVVM思想数据驱动双向绑定只需要定义好渲染规则如果数据发生改变vue会帮我们重新渲染整个页面所以我们只需将注意力放在数据操作上就可以了。
2、代码结构。
如果你用jq没有好的代码架构很容易就回出现一种情况就是js里写着html元素代码而且可能会遍布很多地方。因为增删改查你都需要对dom进行操作这里甚至可能会写多了些冗余代码。代码架构好一点的可能会写成一种简版框架即有专门的渲染函数增删改查都会调用这个函数依然是全域的需要闭包。而vue就没有这个问题方法全部写在methods中提供多种钩子函数对页面渲染过成进行精准操作。
3、操作性。
用jq去操作dom实际上是蛮麻烦的。比如说又个对象数组已经渲染成表格了这时你需要修改某一个id的那个对象的数据行jq的话最麻烦的做法就是在遍历里面先拿到id检查相等相等的话用index去拿到要改的那个dom再重新渲染。而用vue的话可以直接修改数据就可以了而且你甚至可以用Array.map Array.filter 方便快捷提升开发效率
4、模块化。
目前无论前端还是后端开发越来越倾向于模块化组件化以求降低不同模块不同功能区块之间的耦合度便于后期业务的修改与拓展vue完全cover上述特性而使用jq的时候如果你的js牛逼轰轰的写得已经超长了然后你又觉得需要分下模块了这时你有两选择1是用seajs,requirejs等2是用原生的import去管理你的代码。说实话我没怎么用过requirejs去分模块可能是我压根就想没到这些js要怎么分。
5、单页面实现。
单页面的实现原理估计大家都很熟了一般是几个div在来回切换。如果一开始已经写好html再来回切的话html是太长了。如果用js去写又拼的很麻烦。如果你想用jq、原生实现页面切换我能想到比较好的方式是用模版引擎…吗但其实单页面的实现我感觉没那么简单你不单单要考虑html能否单独写出来还要考虑js需不需要按需加载路由需不需要等等。。。用vue就不需要烦这些东西vue自动构建单页应用使用router模拟跳转。
6、组件的复用。
用vue最爽的莫过于使用别人写好的组件。目前vue的生态已经非常庞大主流的组件库有element-uiiview使用主流的组件库不仅避免了我们重复造轮子而且方便新员工快速接手项目某个大神的组件总结https://www.toutiao.com/i6718405521088446988/?timestamp1564450212appnews_articlegroup_id6718405521088446988req_id20190730093011010018026159736CF92其实如果你项目大的时候有些组件一些功能和视图的集合可能会复用。这些相对于jq就是插件了个人不喜欢script引入插件任性
7、性能。
vue使用了虚拟dom技术能够减少 dom的操作能提高一定的效率。
5.v-if和v-show的区别两个怎么选择
一、v-show与v-if相同点 视觉上来看两者都控制DOM元素在页面上的显示
都是接受一个布尔值当该值为true时则显示该元素
当该值为false不显示该元素且不会占用页面位置visibility: hidden会占据位置
二、v-show与v-if区别 v-show本质上则是为该元素添加一个css–display:nonedom元素一直存在。
v-if本质则为真正意义上的条件渲染销毁与创建dom元素会触发组件的生命周期因此频繁的使用会消耗性能。
三、延伸 如果涉及到频繁的切换 建议使用v-show
但是v-if同时还能搭配 v-elsev-else-if 会更加的灵活
如果有对组件重新渲染的需求也可以考虑使用v-if
6.vue组件之间的传值
使用props传递数据父组件可以通过属性的方式向子组件传递数据。
父组件
templateChildComponent :parentDatadata /
/templatescript
import ChildComponent from ./ChildComponent.vue;export default {components: {ChildComponent},data() {return {data: 这是父组件的数据};}
};
/script子组件
templatediv{{ parentData }}/div
/templatescript
export default {props: [parentData]
};
/script使用 e m i t 发射事件子组件可以使用 emit发射事件子组件可以使用 emit发射事件子组件可以使用emit方法触发一个事件并传递数据给父组件。
子组件
templatebutton clicksendToParent发送数据给父组件/button
/templatescript
export default {methods: {sendToParent() {this.$emit(sendData, 这是子组件的数据);}}
};
/script父组件
templateChildComponent sendDatareceiveData /
/templatescript
import ChildComponent from ./ChildComponent.vue;export default {components: {ChildComponent},methods: {receiveData(data) {console.log(data); // 这是子组件的数据}}
};
/script使用Vuex管理状态Vuex是一个专为Vue.js应用程序开发的状态管理模式。可以通过Vuex来集中管理组件间共享的状态。
// store.js
import Vue from vue;
import Vuex from vuex;Vue.use(Vuex);export default new Vuex.Store({state: {sharedData: 初始数据},mutations: {updateData(state, data) {state.sharedData data;}}
});父组件
templatediv{{ $store.state.sharedData }}/div
/templatescript
export default {methods: {updateSharedData() {this.$store.commit(updateData, 新的数据);}}
};
/script子组件
templatebutton clickupdateSharedData更新数据/button
/templatescript
export default {methods: {updateSharedData() {this.$store.commit(updateData, 子组件提供的新数据);}}
};
/script使用provide和inject这对选项需要一起使用以允许一个祖先组件向其所有子孙后代注入一个依赖不论组件层次有多深并在该后代组件里面通过inject选项来接收。
父组件
templateChildComponent /
/templatescript
import ChildComponent from ./ChildComponent.vue;export default {provide: {sharedData: 这是父组件的数据},components: {ChildComponent}
};
/script子组件
templatediv{{ sharedData }}/div
/templatescript
export default {inject: [sharedData]
}7.组件的类不想让其他的页面使用
scoped 在style
8.防抖节流一般用的是什么
一、防抖 多次触发 只执行最后一次 防抖策略debounce是当事件被触发后延迟n秒后再执行回调如果在这n秒内事件又被触发则重新计时。
作用 高频率触发的事件在指定的单位时间内只响应最后一次如果在指定的时间内再次触发则重新计算时间。
防抖的应用场景 登录、发短信等按钮避免用户点击太快以致于发送了多次请求需要防抖调整浏览器窗口大小时resize 次数过于频繁造成计算过多此时需要一次到位就用到了防抖文本编辑器实时保存当无任何更改操作一秒后进行保存防抖的实现思路、 // 防抖函数function debounce(fn, wait) {let timer;return function() {let _this this;let args arguments;if(timer) { clearTimeout(timer) }timer setTimeout(function(){fn.apply(_this, args)}, wait); }}// 使用window.onresize debounce(function() {console.log(resize)}, 500)
bodyinput typetext idinpscript// 1.封装防抖函数 **防抖重在清零 clearTimeout(timer)**function debounce(fn, time) {// 4.创建一个标记用来存放定时器的返回值let timeout null;return function () {// 5.每当用户触发input事件 把前一个 setTimeout 清楚掉clearTimeout(timeout);// 6.然后又创建一个新的 setTimeout, 这样就能保证输入字符后等待的间隔内 还有字符输入的话就不会执行 setTimeout里面的内容timeout setTimeout(() {// 7.这里进行防抖的内容fn();}, time);};}// 2.获取inpt元素var inp document.getElementById(inp);// 8. 测试防抖临时使用的函数function sayHi() {console.log(防抖成功);}// 3.给inp绑定input事件 调用封装的防抖函数 传入要执行的内容与间隔事件 inp.addEventListener(input, debounce(sayHi, 5000)); /script
/body
二、节流 规定时间内 只触发一次 节流策略throttle控制事件发生的频率如控制为1s发生一次甚至1分钟发生一次。与服务端(server)及网关(gateway)控制的限流 (Rate Limit) 类似。
作用 高频率触发的事件,在指定的单位时间内只响应第一次。
节流的应用场景 鼠标连续不断地触发某事件如点击单位时间内只触发一次 监听滚动事件比如是否滑到底部自动加载更多用throttle来判断。例如懒加载 浏览器播放事件每个一秒计算一次进度信息等节流的实现思路 // 方式1: 使用时间戳function throttle1(fn, wait) {let time 0;return function() {let _this this;let args arguments;let now Date.now()if(now - time wait) {fn.apply(_this, args);time now;}}}// 方式2: 使用定时器function thorttle2(fn, wait) {let timer;return function () {let _this this;let args arguments;if(!timer) {timer setTimeout(function(){timer null;fn.apply(_this, args)}, wait)}}} script// 1.封装节流函数使用定时器 节流重在加锁 timertimeoutfunction throttle(fn, time) {//3. 通过闭包保存一个 节流阀 默认为falselet temp false;return function () {//8.触发事件被调用 判断节流阀 是否为true 如果为true就直接trurn出去不做任何操作if (temp) {return;} else {//4. 如果节流阀为false 立即将节流阀设置为truetemp true; //节流阀设置为true//5. 开启定时器setTimeout(() {//6. 将外部传入的函数的执行放在setTimeout中fn.apply(this, arguments);//7. 最后在setTimeout执行完毕后再把标记节流阀为false(关键) 表示可以执行下一次循环了。当定时器没有执行的时候标记永远是true在开头被return掉temp false;}, time);}};}function sayHi(e) {// 打印当前 document 的宽高console.log(e.target.innerWidth, e.target.innerHeight);}// 2.绑定事件绑定时就调用节流函数 // 敲黑板 这里是重点 绑定是就要调用一下封装的节流函数 触发事件是触发封装函数内部的函数window.addEventListener(resize, throttle(sayHi, 2000));/script
总结 (简要答案) 防抖防止抖动单位时间内事件触发会被重置避免事件被误伤触发多次。代码实现重在清零 clearTimeout。防抖可以比作等电梯只要有一个人进来就需要再等一会儿。业务场景有避免登录按钮多次点击的重复提交。 节流控制流量单位时间内事件只能触发一次与服务器端的限流 (Rate Limit) 类似。代码实现重在开锁关锁 timertimeout; timernull。节流可以比作过红绿灯每等一个红灯时间就可以过一批。
9.vue插槽
默认插槽具名插槽作用域插槽
9.1 插槽的基本使用
如下所示一个父组件里面复用了子组件
templatediv classcontainerStudent/StudentStudent/StudentStudent/Student/div
/template
student的结构也非常简单
templatediv classstudenth3巧克力小猫猿/h3/div
/template
插槽其实很简单结合定义不难理解。我们可以在子组件中给父组件挖一个坑父组件把内容放入子组件的坑中
子组件中用slot标签挖坑
9.2 默认插槽
我们在使用插槽的时候可以看出给子组件挖了个slot的坑父组件中通过子组件名的标签内部填坑的内容。
如果父组件中未指定内容我们却需要一个默认值该怎么办
很简单给插槽设置一个默认值即可
templatediv classstudent!-- slot/slot --h3巧克力小猫猿/h3slot我是默认值/slot/div
/template
在父组件中只有第一个student的实例对象指定了插槽的内容其他没有
templatediv classcontainerStudent加油/StudentStudent/StudentStudent/Student/div
/template
9.3具名插槽
给插槽和对应的内容模块带上相同的标记。让vue知道把什么内容填充到什么插槽去。 在子组件中给插槽取一个名字
templatediv classstudentslot nameup/sloth3巧克力小猫猿/h3slot namejob/slot/div
/template
在父组件中为内容指定需要放入的插槽名
templatediv classcontainerStudenth3 slotup加油/h3h3 slotjob找到工作/h3/StudentStudent/StudentStudent/Student/div
/template
9.4template标签
我们可以设置一个div把所有的内容都装进去这样就可以只写一个slot了
templatediv classcontainerStudentdiv slotaddh3加油/h3div找到工作/div/div/StudentStudent/StudentStudent/Student/div
/template
template标签的使用
把刚刚外部的div替换为template标签
templatediv classcontainerStudenttemplate slotaddh3加油/h3div找到工作/div/template/StudentStudent/StudentStudent/Student/div
/template
结构上并未多出什么多余结构不生成真实DOM。
9.5 作用域插槽
作用域插槽的使用情景当数据在组件自身但根据数据生成的结构需要组件使用者来定我们则可以使用作用域插槽。
templatediv classstudentslot :studentstus/slot/div
/templatescript
export default {name: Student,data() {return {stus: [巧克力, 小猫, 猿]}}
}
/script
templatediv classcontainerStudenttemplate scopedata{{ data }}/template/Student/div
/template Studenttemplate scopedataulli v-fors in data.student :keys.index{{ s }}/li/ul/template/Student/div
10.echarts怎么用的接收数据的格式是什么
在开始之前我们需要引入 ECharts 的 JavaScript 文件并创建一个容器来展示图表。可以通过以下方式获取 ECharts
script srchttps://cdn.jsdelivr.net/npm/echarts5.1.1/script然后在 HTML 页面中创建一个
元素作为图表的容器 div idchart-container stylewidth: 600px; height: 400px;/div基本配置 创建一个基本的 ECharts 图表需要先创建一个 echarts.init 实例然后通过配置选项来定义图表的基本属性。
以下是一个简单的示例演示如何创建一个柱状图
// 创建图表实例
var chart echarts.init(document.getElementById(chart-container));// 配置选项
var option {title: {text: 柱状图示例},xAxis: {data: [A, B, C, D, E]},yAxis: {},series: [{name: 销量,type: bar,data: [5, 20, 36, 10, 15]}]
};// 使用配置选项设置图表
chart.setOption(option);在上面的示例中我们通过 echarts.init 方法创建了一个图表实例并通过 document.getElementById 获取了图表容器的 DOM 元素。然后我们定义了一个名为 option 的配置对象其中包含了图表的标题、X 轴数据、Y 轴和数据系列。
最后我们通过 chart.setOption 方法将配置选项应用到图表中从而创建出一个柱状图。
配置选项
ECharts 的配置选项是一个包含各种属性和值的 JavaScript 对象用于定义图表的各个方面例如标题、轴线、图例、数据系列等。下面是一些常用的配置选项
title图表的标题包括主标题和副标题。legend图例用于展示数据系列的名称。xAxis 和 yAxisX 轴和 Y 轴的配置包括类型、标签、刻度等。grid绘图区域的配置包括位置、大小等。tooltip鼠标悬停提示框的配置用于展示数据详细信息。series数据系列用于定义要展示的数据和图表类型。
除了上述常用选项外ECharts 还提供了众多其他选项可以根据实际需求进行配置。
