Vue核心技术-优快云博客

本文链接：https://blog.youkuaiyun.com/lzDevastator/article/details/109524375

文章目录

面试题

面试题

vue中路由导航钩子函数有哪些？简要说明它们的参数及作用。

全局导航钩子：router.beforeEach((to,from,next)=>{})//跳转前进行判断拦截 Router.afterEach((to,from,next)=>{}) 路由内导航：beforeEnter() 组件内导航：beforeRouteEnter(); beforeRouteUpdate(); beforeRouteLeave() To：目标位置；from：当前导航正要离开的路由；next():必须调用，向下执行

在vue中使用axios时如何解决跨域问题？

在config文件夹中的index.js中的Dev中填写
ProxyTable：{
‘/api’:{
Target：’代理服务器的目标地址’，
changeOrigin: true,
PathRewrite: {“^/api”:” ”}
}
}

vue中如何同时获取事件传入的参数和事件对象？

<button @click="show(11,$events)"></button>

methods:{
    show(x,ev){
        // x就是参数
       // ev就是事件对象
     }
}

如何实现动态组件、且实现组件的缓存？

<keep-alive> <component is="组件名"></component> </keep-alive>

过滤器的作用是什么？如何注册过滤器？如何使用过滤器？

作用: 对数据进行一些加工处理，比如 数字保留几位小数 
// 全局注册
    // console.log(Vue.filter);
    // 定义：Vue.filter('过滤器名',过滤器函数)  
                // 过滤器函数一定要有返回值
            /*
            Vue.filter('过滤器名',functon(变量值,传入的参数){
                // 过滤处理
                return  处理后的结果
            })
            */
    // 局部注册：

        /*
            new Vue({
                el:""
                ...,
                filters:{
                    过滤器名:function(变量值，传入的参数=参数默认值){
                        // 过滤处理
                         return  处理后的结果
                    }
                }
            })


        */        

    // 使用：{{ 变量 | 过滤器名 }}
    // 使用：{{ 变量 | 过滤器名(参数1，参数2) }}
    // 使用：{{ 变量 | 过滤器名1 | 过滤器名2 | 过滤器名3 |... }}

简单运用一下作用域插槽？

<body>
    <!-- 作用域插槽是一种特殊类型的插槽，用作一个 (能被传递数据的) 可重用模板，来代替已经渲染好的元素。-->
    <div class="parent">
        <child>
            <!--在父级中，具有特殊特性 slot-scope 的 <template> 元素必须存在，表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 prop 对象：-->
            <template scope="props"> <!--这里很奇怪的一点是官文写了slot-scope但却报错 找了一些资料发现用scope却生效了，很奇怪-->
                <span>hello from parent</span>
                <span>{{ props.text }}</span>
            </template>
        </child>
    </div>
    <script>
        // 在子组件中，只需将数据传递到插槽，就像你将 prop 传递给组件一样：
        Vue.component('child',{
            template:'\
                <div class="child">\
                    <slot text="hello from child"></slot>\
                </div>\
            '
        })
        new Vue({
            el:'.parent'
        })
</script>
</body>

vue如何注册自定义指令，常用钩子有哪些，做什么？

全局注册：
Vue.directive('指令名',{
    bind(el,binding){},
    inserted(el,binding){
     }
     ...
})
局部注册：
  directivs:{
     '指令名':{
         bind(el,binding){},
             inserted(el,binding){
         }
         ...
    }
  }
el 就是使用的指令的节点，binding.value 就是指令绑定的值。
我们一般用来拓展对dom的操作，比如已进入页面让input获取焦点，input失去焦点进行数据校验

vue表单的核心内容是什么？表单修饰符有哪些？需要注意什么？

核心指令： v-model 修饰符：.numer .lazy .trim 注意：单选功能的时候，每个input都要有 value值；多选功能的时候，绑定的是一个数组，每个input也必须要有value值

vue如何注册一个组件，需要有哪些注意点？

全局注册 Vue.component(‘组件名’,{配置对象}) 局部注册：components:{ 组件名:{ 配置对象 } } 注意点：组件名注意驼峰命名小坑，不要取html有的标签名；data是一个函数，且必须返回一个对象 template 模板只可以有一个根标签，且可以简化，通过选择器绑定body里面的template模板