1. 在利用cli3创建项目时,具名插槽的使用无法显示,也没有报错
在vue.2.6.3 版本以后插槽的使用方法略改,匹配name属性时:
- 必须在 template 中标注
- 形式 v-slot:xxx
<slot name="item-icon"></slot>
<template v-slot:item-icon></template>
2.当我想要将父组件中的图片填充进插槽该怎么做?
既然仅仅用 img 不能使用插槽,那么我将 template 标签包裹在 img 外,这样就能使图片显示,插槽的功能就能正常使用
<template v-slot:item-icon>
<img src = "xxxxx">
</template>
3.接下来的问题是,我怎么让template 标签具有 div 标签具有的块级元素的特点?怎么让其分两行显示
<template v-slot:item-text>分类</template>
解决:
<template v-slot:item-icon>
<div>
首页
</div>
</template>
总结:插槽的使用或者说组件的使用可以理解成直接面向对象的编程思想,将布局、排版、样式等统一定好之后,只需要调用某个组件或者某个插槽,将其中的内容直接调换即可,不必考虑其他的因素。
4.路由跳转中,push 和 replace 都无法使用的情况,报出
image.png这种情况,该怎么解决?
发现自己定义路由时,配置路由映射的routes 写成了 router,这时修改完之后仍会报错,经过查询CSD 后了解到应该是脚手架版本不同引发的,
在main.js 文件中
脚手架2 中创建 Vue 实例,引入router的方式如下
<script>
new Vue ({
el:'#app',
router,
render:h => h(app)
})
</script>
脚手架3 中创建的 Vue 实例的方式如下
<script>
//这里用到了生命周期函数,也可以用脚手架2创建vue实例的方法
creatApp(App).mount('#app')
</script>
脚手架4 中创建的 Vue 实例,引入router的方式如下
<script>
const app = creatApp(App)
app.use(router)
app.mount('#app')
</script>
在index.js 文件中
在脚手架2 中导入vue-router
<script>
//创建路由配置文件
import Router from 'vue-router'
import Vue from 'vue'
Vue.use(Router)
//脚手架3 的导入方式与2相同
</script>
脚手架4 中导入vue-router
<script>
//导入
import {creatRouter,createWebHistory} from 'vue-router'
//加载插件
const routerHistory = createWebHistory()
//创建 router
const router = createrRouter({
history:routerHistory,
routes:[{},{}.....]
})
</script>
安装cli4
npm install vue-router@4
5. route 的区别在哪?
router 为 VurRouter的实例,相当于一个全局的路由器对象,里面含有很多属性和子对象,
route 相当于当前正在跳转的路由对象,可以从里面获得name、path、query等
路由传参的方式:
-
可以手写完整的path
this.$router.push({path:'/user/${userId}'})
-
可以用parmas传递
this.$router.push({name:'user',parmas:{ userId: 123}})
-
也可以用query传递
this.$router.push({path:'register',query: { plan: 'private'}})
6.什么是依赖?
7.生命周期函数该怎么用?
8.history 和 hash 模式?
9.处理[Vue warn]: Failed to mount component: template or render function not defined. 错误解决方法
组件中没有添加 <template> 标签!!!!
10.Es6了解多少?
const声明对象里的值为什么可以改变?const 声明的值为什么不能改变?
11.变量和方法的增强写法
12.Mvvm?
13.生命周期
14.mustatch语法 里能写什么?
15.v-once
16.v-html
17.v-text
18.v-clock
19.动态绑定 v-bind
20.计算属性 computer与 方法methods的区别
21.v-on 语法糖?修饰符,用法
22.阻止默认事件prevent
23.v-if 和 v-show
24.v-for key值 遍历
25.v-module
26.filture()函数
27.了解vue的高阶函数
28.创建组件的步骤
29.父传子子传父
30.props
31.兄弟传
32.插槽
33.页面间传递参数 vuex
34.路由传参
35.this.$router
36.vuex
37.侦听属性
38.export default 中的 name 属性到底有啥用呢?
类型 : string
详情:
允许组件模板递归的调用自身。组件在全局用 app.component 注册时,全局ID自动为组件的name
指定 name 选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。另外,在有 vue-devtools ,未命名的组件将显示成<AnonymousComponent>
这很没有语义。通过提供name选项可以获得更有语义信息的组件树
39.data: function () 和 data()
40.什么是组件缓存?
41.为什么需要封装组件?
- 为了组件的复用
- 为了代码的可维护性和可读性
- 怎么实现组件的封装呢?主要是抽离思想和并联动态变化的思想
42.怎么封装一个轮播组件?
- 图片的话请求网络数据,最后将图片数据加载进框架里面
- 还是先搭建框架,外框和放置图片框架
- 其次是方法:第一个是定时器自动播放的方法、第二个是点击原点滚动的方法、第三个是拖动图片滚动的方法
- 最后是加载,怎么加载这些方法,需要用到生命周期函数
43.export default function 和 export function 的区别
export default function xxx (){
//..输出
}
import xxx from 'xxx';//输入
export function bbb (){
//..输出
}
import {bbb} from 'bbb';//输入
44.ref 和 children
ref 如果是绑定在组件中的,那么 通过 this.$refs.refname获得的是一个组件对象
ref 如果是绑定在普通的元素中,那么通过 this.$refs.refname获得的是一个元素对象
45.style 中的 scoped 属性有什么作用?
规定css 样式的作用域
网友评论