前端常见问题 - vue

vue的常见指令有哪些

• v-bild(:)
• v-on(@)
• v-if
• v-else-if
• v-else
• v-show
• v-for
• v-once
• v-model
• v-html

vue中的v-if和v-show的区别

• 注：v-if是惰性的，当初始条件为假时，则什么也不做，直到条件为真时才开始渲染条件块

vue中v-on:click阻止冒泡事件

• v-on:click.stop = yourFunction

vue-router中有哪些钩子函数

• beforeRouteUpdate
• beforeResolve
• afterEach
• beforeEnter
• beforeRouteEnter
• beforeRouteUpdate
• beforeRouteLeave

vue中 input 的 value 和 v-model 有什么异同

• 相同：随着data的更改，视图都会更新
• 不同：input里的值被更改后，通过v-model绑定的data里的数据会改变，通过value绑定的data里的数据不会改变。
• 原因：
  • value为input原生属性，为input的value绑定data中的值后，页面视图会随数据更改而更改，但input输入框内的值更改后组件的data里对应的值并不会更改（即value属于单项绑定）
  • v-model：双向绑定（vue监测input的input事件，在input事件触发后更改data中对应的值，从而实现数据的双向绑定），所以其实v-model就是一种语法糖

  •   <input v-model="test">
      等价于
       <input v-bind:value="test" v-on:input="test=$event.target.value"> 
    

• 在vue中不能同时为input添加以上两个属性，会有冲突

组件间的数据传递怎么做

• 父传子
  1. slot
  2. props
  3. vuex
• 子传父
  1. 自定义事件（$emit）
  2. .sync (语法糖)
  3. vuex
  4. v-model
  5. $refs（在父组件中直接获取子组件）
• 任意组件间通信
  1. bus总线（类似于vuex）
  2. vuex

vue的数组是怎么实现响应式的

• 详见官方文档：数组更新检测

怎么实现vue-router效果

• 掘金上有很多这样的文章，这里不做赘述，这里列举出来这个点是告诉自己这个点需要掌握~~