Vue知识点！！

Posted 橘子笔录

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue知识点！！相关的知识，希望对你有一定的参考价值。

一、vue的二大特点？

      1.数据的双向绑定

       2.虚拟DOM

一、vue的两个核心是什么？

      1.数据驱动

       2. 组件

二、vue-show和v-if的区别？

      1.v-show:操作的是元素的display属性，block或none

       2.v-if：按照条件是否渲染

三、对比computed与watch之间的区别？

       1.computed是一个计算属性，是实时响应的，只要data中的属性发生了          变化那么就会触发computed，计算属 性是基于属性的依赖进行缓存的             而computed调用的时候是不需要加()

       2.watch属性监听，watch用来监听属性的变化，当值发生变化的时候                来执行特定的函数，watch监听属性的时候 会有2个参数newVal和                   oldVal 一个新值一个旧值

四、vue中的过滤器（filter）

        Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。                    过滤器 可以用在两个地方：双花括号插值和 v-bind 表达式 过滤器应          该被 添加在 javascript 表达式的尾部，由“管道”符号指示：

<!-- 在双花括号中 -->{{ message | capitalize }}
<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId"></div>

       1.全局过滤器       

Vue.filter('capitalize', function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1)})
new Vue({ // ...})

       2.局部过滤器

new Vue({ el:"#warp",        data:{        }, filters:{ // 过滤器。过滤的是你的数据。过滤器分为全局与局部过滤器两种 // 用在{{}}当中以及属性绑定值当中 // 用法：在要过滤的数据右侧添加一条竖线，在竖线右侧加上你的过滤器名字 currency(v,n=2){// currency 过滤器的名字 // 第一个参数是你要过滤的值.其它参数是使用该过滤器时额外传递的参数。 console.log(v,n); return "$"+v.toFixed(n);// 返回的内容，即是你过滤以后的结果 } } })

五、vue中自定义指令如何使用？

 

// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() }})

    如果想注册局部指令，组件中也接受一个 directives 的选项：

directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } }}

六、vue组件传值？

       1.父向子传值是通过属性来传递的。子组件通过props来进行接收

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="lib/vue.js"></script></head><body><div id="warp"> <one :a="age"></one></div></body><script> new Vue({ el:"#warp", data:{ age:12 }, components:{ // 父向子传值是通过属性来传递的。 one:{ props:["a"],// 接收属性a template:`<div><input type="button" :value="a" @click="a++">one组件{{a}}</div>` } } })</script></html>

        2.子向父通过自定义事件来进行传值

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="vue.js"></script></head><body> <div id='app'> <ll></ll> </div> <template id='hmm'> <div> 韩梅梅组件1 <button @click='hmmClick'> show/show</button> </div> </template>  <template id='ll'> <div> <hmm @custom='showDiv'></hmm> <hr> <hr> 李雷组件2 <div v-if='show'> 这里是测试div </div> </div> </template> <script> Vue.component('hmm',{ template:'#hmm', methods:{ hmmClick(){ console.log(this) this.$emit('custom') } }  }) Vue.component('ll',{ template:"#ll", data(){ return{ show:true } }, methods: { showDiv(){ this.show=!this.show } }, }) new Vue({ el:'#app' })</script>
<!-- 自定义事件 子到父 子组件控制父组件1. 父组件 div显示隐藏2. 子组件 按钮
通过@声明自定义事件 就可以在当前对象下的 events 找到自定义事件通过this.$emit('自定义事件的名字触发')
 --></body></html>

        3.非父子传值

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="vue.js"></script></head><body> <div id='app'> <hmm></hmm> <hr> <ll></ll>
 </div>
 <template id='hmm'> <div> <!-- 韩梅梅组件1 --> <button @click='hmmClick'> show/show</button> </div> </template>
 <template id='ll'> <div> <!-- 李雷组件2 --> <div v-if='show'> 这里是测试div </div> </div> </template> <script> let ang=new Vue() Vue.component('hmm',{ template:'#hmm', methods:{ hmmClick(){ /* console.log('点到我了') console.log(ang) */ ang.$emit('toggle') } } }) Vue.component('ll',{ template:"#ll", data(){ return{ show:true } }, methods:{ divShow(){ this.show=!this.show } }, mounted() { ang.$on('toggle',this.divShow)  } })
 new Vue({ el:'#app' })</script>
<!--  2个组件 组件1按钮 控制组件2的div显示隐藏 非嵌套关系 组件2 控制显示隐藏函数 组件1 触发 --></body></html>


七、vue的生命周期？

        


     1.什么是生命周期？

            Vue实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

    2.vue生命周期的作用是什么？

            它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

    3.vue生命周期总共有几个阶段？

            它可以总共分为4个阶段：创建, 挂载,更新,销毁。

    4.第一次页面加载会触发哪几个钩子？

        会触发下面这几个beforeCreate, created, beforeMount, mounted 

    5.DOM 渲染在 哪个周期中就已经完成？

        DOM 渲染在 mounted 中就已经完成了。

八、vue中的单向数据流的理解?

        数据从父级组件传递给子组件,只能单向绑定，子组件不能直接修改从父级传递过来的数据,数据只能从一个方向来修改状态,如果父组件给N个子组件进行了数据传递。那么某一个子组件中修改了这个数 据，那么就会导致其他组件的数据也会发生改变。因此数据只能从一个方向来修改状态


九、请说一下什么是动态组件，如何使用，以及keep-alive的作用？

        动态组件:让多个组件使用同一个挂载点，并动态进行切换。这就是动态组件

        通过保留<component></component> 元素，动态的绑定它的is特性，可以实现动态组件

         keep-alive    包裹动态组件(组件)时，会缓存不活动的组件实例，而不是销毁它们组件切换调用的时候本身会被销毁掉的，只要加上keep-alive进行包裹，就不会被销毁，而是被缓存起来， 下一次使用的时候直接从缓存中调用   

十、vue中solt的使用方式，以及匿名插槽 命名插槽 插槽作用域？

      1.当组件当做标签进行使用的时候，用slot可以用来接受组件标签包裹的内容，当给solt标签添加name属性的时候，可以调换响应的位置

十一、组件中的data为什么是函数而不是对象？

        1.如果是对象，会导致数据发生引用，因为对象是引用类型，而当data为函数时，每次 data执行完毕都会返回一个新对象，不会被引用

十二、什么是路由？

十三、路由跳转的方式有哪几种？

        1.a标签进行跳转。例如:<a href="#/home">首页</a>

      2.router-link进行跳转例如:<router-link to="/home">首页    </router-link>

        3.编程式路由  例如:this.$router.push()

十四、路由传值的方式有哪几种

        1、path路径属性传值。例如：path:"/home/:id/name";  接受的时候通过 this.$route.params
         2、query传值。因为在url中？后面的参数不会被解析，因此我们可以通过query进行传值。接受的时候通过 this.$route.query
         3、编程式导航  this.$router.push({path:"/home",query:{}});

         4、路由解耦。在配置路由的时候添加props属性为true,在需要接受参数的组件页面通过props进行接受

十五、请说出路由配置项常用的属性及作用

        path : 跳转路径
        component : 路径相对于的组件 
        name:命名路由
        children:子路由的配置参数(路由嵌套)
        alias:别名

        props：路由解耦
        redirect : 重定向路由

十六、编程式导航使用的方法以及常用的方法

            路由跳转 ： this.$router.push()

            路由替换  : this.$router.replace()
            后退： this.$router.back()
            前进 ：this.$router.forward()

十七、如何重定向路由？

          通过配置路由项中的redirect进行重定向

十八、什么是路由守卫？路由的钩子函数有哪些？分别说出使用的场景，及用法

         1.什么是路由守卫？路由跳转前后做的一些验证

         2. 路由常见的钩子函数：beforeRouterEnter、beforeRouterUpdate、beforeRouterLeave

         3.使用场景：beforeRouterEnter：当路由进入之前（to,from,next）：登陆验证、热力图的记录

          beforeRouterUpdate：当路由进行更新的时候。如果当前路由发生了变化，但是当前组件没有经历创建和销毁的时候，如果我们需要接收路由传递过来的数据时我们就需要用到了beforeRouterUpdate

          beforeRouterLeave：路由离开的时候。信息没有填写完成的时候，如答题系统、支付

十九、双向数据绑定的原理？

        vue实现双向数据绑定的原理就是利用了Object.defineProperty()这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实的。Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性,并返回这个对象。

二十、Vue中如何解决跨域问题，有什么确定，如何改进。

        就是在config下的index.js中配置相关代码。

module.exports = { devServer:{ host:"127.0.0.1", port:8081, open:true, // cnpm install http-proxy-middleware -D // 代理设置完之后，要重启。 // 代理只是在开发环境当中起效果。 proxy:{ "/ele":{// 当你访问的地址是以/ele开头的话，就会使用该代理服务器 target:"http://127.0.0.1",// 所要代理的服务器是谁 http://127.0.0.1/login changeOrigin:true,// 是否允许代理 pathRewrite:{ "^/ele":"" } } } }}

二十一、vue.set()函数有什么用?

           当vue的data里面声明或者已经赋值过的对象或者数组(数组里边的值是对象)时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。set用法可以实现改变数据渲染在网页上

二十二、vue. nextTick()函数作用?

            在下次DOM更新循环结束之后执行延迟回调，在修改数据之后立即使用这个方法获取更新后的DOM。

二十三、列举vuex中的辅助函数

            ...mapStates([xxxx])

            ...mapGetters([xxx])

            ...mapmutations([xxxxx])

            ...mapAcyions([xxx])

二十四、简述vuex的数据传递流程?

        当组件需要修改state中的数据的时候必须通过dispatch来触发actions里面的方法，actions每一个方法里面都会有一个commit方法，用来触发mutations里面的方法，mutations用来修改state中的数据，当mutations里面的方法触发的时候就会发生改变，因为数据是响应式的因此组件中的数据也会发生改变

二十五、vuex有哪几种属性?

        state、actions、mutations、getters、module

以上是关于Vue知识点！！的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段(vue主模板)

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段2——.vue文件的模板

VSCode自定义代码片段13——Vue的状态大管家