前端面试积累Day four

Vue数据绑定的方式

1. 单向绑定
   双大括号{{}} --> 主要用于html内字符串的绑定。
   v-bind绑定 --> 主要用于html属性的绑定，可直接简写为一个冒号:
2. 双向绑定 v-model
   （有一点需要避坑，:model与v-model的区别。:model是v-bind:model的缩写，说到底也还是单向绑定。v-model实现的是双向绑定。）

v-once

v-once 也是一个不需要表达式的指令，作用是定义它的组件或者元素只是渲染一次，包括元素或者组件所有的子节点。首次渲染之后，不再随着数据的变化重新渲染，将被视作静态内容。

Vue中如何注册全局组件和局部组件

Vue注册组件的方式有两种，全局组件和局部组件，全局组件的使用最多，局部组件主要用于一些特定页面的展示。

1. 注册全局组件
   在src文件夹中新建components文件夹，components文件夹中一般存放组件文件。
   然后在components文件夹中新建一个components.js文件。
   在components.js文件中引入所有要注册的全局组件。

       import 组件名字A from '@/components/组件名字A' 
       import 组件名字B from '@/components/组件名字B ' 
   
       export default (Vue)=>{
         Vue.component("A", 组件名字A )  // 前者必须是字符串格式,就是<A></A>
         Vue.component('B', 组件名字B )  
       }
   

   在main.js中引入components.js文件并使用Vue.use()进行全局注册。

       import components from '@/components/components.js'
       Vue.use(components)
       new Vue({
       // ...
       })
   

2. 注册局部组件
   一旦全局注册一个组件，就不管这个组件使用与否，它都会随着Vue的加载而加载。因此，对于一些并不频繁使用的组件，可以采集用局部注册的方式。

   // 局部子组件
   const hello = {
       template:"<div>打个招呼：我是{{name}}</div>",
       data(){
           return{
               name:"张学友"
           }
       }
   }
   // 在父组件中注册定义好的局部子组件
   const app = new Vue({
       el:"#app",
       components:{
           // 列出所有使用到的局部子组件
           hello1: hello
       }
   })
   

   使用的时候，直接在父组件中使用注册的名字即可：

   <div id="app">
       <hello1></hello1>
   </div>
   

Vue的路由钩子函数/路由守卫有哪些

详细见： blog.csdn.net/weixin_3808…