美文网首页后浪 · 正青春青春志
一些已解决和未解决的问题,一些已回顾和未回顾的问题

一些已解决和未解决的问题,一些已回顾和未回顾的问题

作者: Guangchao | 来源:发表于2021-08-29 11:04 被阅读0次

    1. 在利用cli3创建项目时,具名插槽的使用无法显示,也没有报错

    在vue.2.6.3 版本以后插槽的使用方法略改,匹配name属性时:

    1. 必须在 template 中标注
    2. 形式 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. router 和route 的区别在哪?

    router 为 VurRouter的实例,相当于一个全局的路由器对象,里面含有很多属性和子对象,
    
    route 相当于当前正在跳转的路由对象,可以从里面获得name、path、query等
    
    路由传参的方式:
    1. 可以手写完整的path

      this.$router.push({path:'/user/${userId}'})
      
    1. 可以用parmas传递

      this.$router.push({name:'user',parmas:{ userId: 123}})
      
    2. 也可以用query传递

      this.$router.push({path:'register',query: { plan: 'private'}})
      
    image.png

    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.为什么需要封装组件?

    1. 为了组件的复用
    2. 为了代码的可维护性和可读性
    3. 怎么实现组件的封装呢?主要是抽离思想和并联动态变化的思想

    42.怎么封装一个轮播组件?

    1. 图片的话请求网络数据,最后将图片数据加载进框架里面
    2. 还是先搭建框架,外框和放置图片框架
    3. 其次是方法:第一个是定时器自动播放的方法、第二个是点击原点滚动的方法、第三个是拖动图片滚动的方法
    4. 最后是加载,怎么加载这些方法,需要用到生命周期函数

    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 样式的作用域

    相关文章

      网友评论

        本文标题:一些已解决和未解决的问题,一些已回顾和未回顾的问题

        本文链接:https://www.haomeiwen.com/subject/thpwiltx.html