<template>
    <div>
      <button @click="back">返回</button>
        <pre>       
      当前页面作为vue简洁版文档攻略，以及需要注意到的地方
      1. v-if 与 v-show 的区别使用
      -v-if 是“真正”的条件渲染，因为它会确保在切换过程中
      条件块内的事件监听器和子组件适当地被销毁和重建。
      -v-show不管初始条件是什么，元素总是会被渲染，并且
      只是简单地基于 CSS 进行切换。即通过设置元素的 
      display:none ,达到显示隐藏的作用。
      -如果频繁的切换元素的状态，v-if的开销会比较大，
      因为它涉及到条件块内各组件的重建和销毁，而 v-show 
      只是切换元素的 css，v-show 的开销比较小。
      -考虑到开销的问题，如果我们有非常频繁的切换
      建议采用 v-show当然如果我们不想让别人看到这些 dom，
      还是需要采用 v-if
      2. v-for 中唯一标识 key
      -如果不使用 key，Vue 会使用一种最大限度减少动态元素
      并且尽可能的尝试就地修改/复用相同类型元素的算法，
      也就是所谓的就地复用策略。
      -而使用 key 时，它会基于 key 的变化重新排列元素顺序，
      并且会移除 key 不存在的元素。key 的作用是辅助判断
      新旧 vdom 节点在逻辑上是不是同一个对象。
      -渲染列表时，key 值需要一个唯一确定的 id 来赋值。
      key 的作用主要是为了高效的更新虚拟 DOM。
      3. v-for 和 v-if 在同一组件使用
      -在vue2中 v-for 的优先级大于 v-if 也就是说每次挂载
      该组件都会每一次循环都会进行一次判断，想要杜绝此类现象，
      需要在外层包裹一个元素来放置 v-if
      4. $router 与 $route 的区别
      -this.$router：全局的 router 实例。通过 vue 根实例中
      注入 router 实例，然后再注入到每个子组件，从而让整个
      应用都有路由功能。其中包含了很多属性和对象
      （比如 history 对象），任何页面也都可以调用其 push(),
       replace(), go() 等方法。
      -this.$route：当前激活的路由的信息对象。每个对象都是
      局部的，可以获取当前路由的 path, name, params, query
      等属性。
      5. router 路由
      -在vue-router中, 我们看到它定义了两个标签 router-link
      和 router-view 来对应点击和显示部分。router-link 就是定义
      页面中点击的部分，router-view 定义显示部分，就是点击后，
      区配的内容显示在什么地方。所以 router-link 还有一个非常
      重要的属性to，定义点击之后，要到哪里去
      -配置路由：首先要定义route,  一条路由的实现。它是一个对象，
      由两个部分组成： path和component.  path 指路径，
      component 指的是组件。如：{path:’/home’,component:home}
      这里推荐路由懒加载模式，详细写法在Router文件夹下index中
      已经配置，可以进行参考
      -路由模式 
        -Hash: 使用URL的hash值来作为路由。支持所有浏览器。
        -History: 以来HTML5 History API 和服务器配置。参考官网中
        HTML5 History模式
      6.style里的scoped属性
      -加scoped后，生成一个data-v-XXXXX的唯一标识，给所在组件的
      父级全部加唯一标示，达到样式私有化，不污染全局的作用
      -通过给 dom 增加一个动态属性，然后 css 选择器也额外添加
      对应的属性来选择该 dom ，达到该样式只作用于含有该
      属性的 dom，实现组件样式的模块化
      7. v-on 事件绑定
      -v-on是用来绑定事件监听器，用在普通元素上时，
      只能监听原生 DOM 事件。用在自定义元素组件上时，
      也可以监听子组件触发的自定义事件。
      - v-on 可以简写为@
      8. v-bind 属性绑定
      -可以绑定对象，可以绑定对象的形式，
      {属性1:boolean,属性2:boolean …}这种形式，我们通过动态绑定
      这些布尔值，如果布尔值是true的话，说明就会绑定到这个对象的
      属性名,如果是false的话就不会绑定这个对象的属性名。
      -还可以写成绑定数组的形式，这种形式[‘active’,‘line’]
      -还可以绑定方法，方法返回对象或者数组，也就是上两种形式的数据
      -v-bind 可以用冒号简写
      9. v-html 与 v-text 
        </pre>
    </div>
</template>

<script>
    export default {
      methods:{
        back(){
          window.history.back()
        }
      }
        
    }
</script>

<style scoped>

</style>