vue基础知识总结

1. 父传子有哪些方式
首先在子组件中输入prop属性进行接收父组件传值的内容。
然后可以通过my-component-a 标签进行一种静态和两种动态绑定，详细绑定如下；
<!-- 静态属性设置 -->
    <my-component-a 
      title="这是静态的标题"
      content="这是静态的内容"
    ></my-component-a>

    <!-- 动态属性绑定 -->
    <my-component-a
      v-bind:title="'这是静态的标题，这是演示'"
      :content="'这是静态内容'"
    ></my-component-a>

    <!-- 动态属性绑定：常用操作 -->
    <my-component-a
      :title="item.title"
      :content="item.content"
    ></my-component-a>

2. 子传父有哪些方式
发送者  modifyName 发送标识 this.$emit("modifyName",this.itemObj);
 接收者，自定义一个组件  modifyName 接收标识 <common-table @modifyName="modifyName"></common-table>

3. 如何让 CSS 只在当前组件中起作用

当前组件<style>写成<style  scoped>

4. keep-alive 的作用是什么

动态组件，适用于多个组件频繁操作，keep-alive 可以保留组件的状态或者避免重新渲染。

5. vue中如何获取DOM
     方法一：
         直接给相应的元素加id,然后再document.getElementById("id");获取，然后设置相应属性或样式
     方法二：
         使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素
注意：在获取相应元素之前，必须在mount钩子进行挂载，否则获取到的值为空
　　   如果是给子组件加id并修改自定义属性，则直接会加载改子组件对应的外层div上，并不会改变该子组件原本的自定义属性的值。
         如果给子组件加ref,然后获取到该DOM元素之后改变相应的自定义属性的值，vue会报错；

6. 请说出 Vue CLI 项目中src目录每个文件夹的文件的用法
     assets文件夹是放静态资源；
     components是项目组件；
     router是定义路由相关的配置;
     view视图；
     app.vue是一个应用主组件；
     main.js是入口文件

7. 单页面应用的优缺点

         单页面：只有一个主页面的应用，浏览器一开始要加载所有必须的 html,css,js。
     所有的页面内容都包含在这个所谓的主页中。但是写的时候，还是会分开写（页面片段），然后在交互的时候由 路由程序动态载入，
     单页面的页面跳转，仅刷新局部资源。多应用于 PC 端。
    优点：用户体验好，快，内容的改变不需要加载整个页面，基于这一点 SPA 对服务器压力较小。
    前后端分离。
   页面效果会比较好（比如切换页面内容时的专场动画）
   缺点 ：不利于SEO；初次首屏加载速度慢；页面复杂度比较高。

8. $router和$route的区别
        1.$router是VueRouter的实例方法,可以认为是全局的路由对象，包含了所有路由的对象和属性。
          2.$route是一个跳转的路由对象，可以认为是当前组件的路由管理，指当前激活的路由对象，包含当前url解析得到的数据，可以从对象里获取一些数据。如name,path等。

9.  怎么定义 vue-router 的动态路由? 怎么获取传过来的值？
  
   query通过url传参，刷新页面还在    params刷新页面不在了
    params的类型:

   配置路由格式:/router/:id
  传递的方式:在path后面跟上对应的值
    传递后形成的路径:/router/123
   <!-- 动态路由-params -->
 
   //在APP.vue中
    <router-link :to="'/user/'+userId" replace>用户</router-link>    
 
   //在index.js
     {
    path: '/user/:userid',
    component: User,
    },
   跳转方法:

   // 方法1：
   < router-link :to="{ name: 'users', params: { uname: wade }}">按钮</router-link>
   // 方法2：
   this.$router.push({name:'users',params:{uname:wade}})
   // 方法3：
   this.$router.push('/user/' + wade)
  可以通过$route.params.userid 获取你说传递的值

   query的类类型

   配置路由格式:/router,也就是普通配置
  传递的方式:对象中使用query的key作为传递方式
  传递后形成的路径:/route?id=123
  <!--动态路由-query -->
   //01-直接在router-link 标签上以对象的形式
  <router-link :to="{path:'/profile',query:{name:'why',age:28,height:188}}">档案</router-link>
  /*
    02-或者写成按钮以点击事件形式
    <button @click='profileClick'>我的</button>    
   */
 
   //点击事件
   profileClick(){
   this.$router.push({
        path: "/profile",
        query: {
          name: "kobi",
          age: "28",
          height: 198
        }
      });
  }
  跳转方法:

  // 方法1：
   <router-link :to="{ name: 'users', query: { uname: james }}">按钮</router-link>
  // 方法2：
  this.$router.push({ name: 'users', query:{ uname:james }})
  // 方法3：
  <router-link :to="{ path: '/user', query: { uname:james }}">按钮</router-link>
  // 方法4：
  this.$router.push({ path: '/user', query:{ uname:james }})
  // 方法5：
  this.$router.push('/user?uname=' + jsmes)
  可以通过$route.query 获取你说传递的值

10. vue-router有几种模式，分别是什么

   vue-router有3种路由模式：hash，history，adstract.
         history:依赖HTML5 History API和服务器配置，具体查看HTML5 History模式。
         history实现原理：
        HTML5提供了History API来实现URL的变化
   hash:使用URL hash值来做路由。支持所有浏览器，包括不支持HTML5 History Api 的浏览器。

  hash实现原理：
  早期的前端路由的实现就是基于location.hash来实现的，location.hash的值就是URL中的#后面的内容，
   特性：
  URL中的hash值只是客户端的一种状态，
  hash值的改变，都会在浏览器的访问历史中增加一个记录，
  可以通过a标签，并设置href属性，
  我们可以使用hashchange事件来监听hash值的变化，从而对页面进行跳转（渲染）

 
  abstract:支持所有JavaScript运行环境，如Node.js服务器端，如果发现没有浏览器的API，路由会自动强制进入这个模式。