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