随笔分类 - vue
摘要：实现路由跳转的3种方式 1.<a href="路径"> 首页 </a> a标签进行跳转 2.<router-link :to="路径"> 首页 </router-link> router-link进行跳转最终解析为a标签，在设置样式时，可直接对a进行设置 3.this.$router.push("路
阅读全文
摘要：1.路由传值的3种方式 1.params传值（传值时，必须使用name属性，不能使用path属性） 2.query传值 3.路由解耦（必须用params传值，否则props接收不到,必须配置props：true ） index.js路由配置项 path:"/details/:name/:price/
阅读全文
摘要：路由嵌套 一种是每个路由到的组件都有共有的内容，这时把共有的内容抽离成一个组件，变化的内容也是一个组件，两种组件组合嵌套，形成一个新的组件 案例： 对于共有的内容，典型的代表就是网页的侧边栏， 假设侧边栏在左边，我们点击其中的按钮时，右侧的内容会变化，但不管右侧的内容怎么变化，左侧的侧边栏始终存在。
阅读全文
摘要：配置项中的参数：path：路由的路径component:当路径匹配成功时渲染的组件redirect：重定向children：路由的嵌套(子路由) 值是一个数组，数组中的每一个对象都是子路由的配置项**匹配所有 1.path component { //设置路径 path:"/goods" ; //相
阅读全文
摘要：动画原理 1、如果想要给哪个元素添加动画那么必须给当前元素添加一个标签transitionn，name为动画的名称 <transition name=“”></transition> 2.如果需要一组元素进行动画的时候需要将transition标签换成 transition-group 切记设置一下
阅读全文
摘要：1.全局过滤器 可在所有的组件中进行使用 如果有数据需要过滤，就在该组件中使用过滤器 全局过滤器 参1：过滤器名称(函数名) 参2：过滤器实现的函数(数据处理函数) 使用的方式：通过管道符使用 | import Vue from "vue"; Vue.filter("过滤器名称",("参1"，"参2
阅读全文
摘要：1.slot插槽作用域：带参数的插槽(可进行子组件向父组件传值) 父组件中： 在组件标签内部加一个template标签 在template标签上加一个属性scope 值随意书写 子组件中： 在组件内部用slot进行传值，如果给slot加一个自定义属性，那么在组件标签的template的scope上面
阅读全文
摘要：slot插槽 使用场景： 当组件当作标签使用的时候，如果组件标签内部书写了一些需要进行嵌套的代码，就要用到插槽。 组件中： 如果solot没有名字，就会接收所有的嵌套标签， 如果slot有名字，就可以随便更改有名字的标签的显示的位置 app.vue <home-com>//组件当作标签使用 <p>我
阅读全文
摘要：keep-alive缓存（一般都要将首次创建的组件缓存，提高性能） 将需要缓存的组件缓存在内存当中，下次再次访问的时候，直接从缓存中读取，而不是重新创建或者销毁……提高了性能（只要组件会经历创建和销毁(v-if v-show)的时候，都可以使用keep-alive） 如果没有缓存，每点击一次导航，内
阅读全文
摘要：scoped: 独立的一个样式作用域，不会被其他样式所覆盖（给每个组件的style都添加一个scroped,这样可以保证该style中的样式不会被其他样式覆盖） <style scoped> </style> eg:header footer都为fixed定位，content区宽，高为100%，用p
阅读全文
摘要：动态组件 通过component标签 的is属性来进行组件的切换 is的属性值决定要显示的组件，所以将is的属性值设置为data中的值，以便于动态变化 <template> <div class="app"> <component :is="组件名称"> </component> </div> </
阅读全文
摘要：$nextTick eg: 图解： 其他应用场景 其他应用场景如下三例： 例子1： 点击按钮显示原本以 v-show = false 隐藏起来的输入框，并获取焦点。 修改为： 例子2： 点击获取元素宽度。 例子3： 使用 swiper 插件通过 ajax 请求图片后的滑动问题。
阅读全文
摘要：1. 3.0的响应式 采用了ES2015的Proxy来代替Object.defineProperty， 可以做到监听对象属性的增删和数组元素和长度的修改， 还可以监听Map、Set、WeakSet、WeakMap， 同时还实现了惰性的监听， 不会在初始化的时候创建所有的Observer，而是会在用到
阅读全文
摘要：什么是一个单项数据流: 父向子传值 当父组件给子组件进行数据传递的时候，子组件是不能够直接去修改父组件传递过来的值。 因为 父组件可能会给很多个子组件传递数据，如果其中一个子组件改变了数据，会导致其他子组件的数据也会发生改变，因此必须保证数据是单项传递的 （父向子传值，子组件直接使用的是父组件传来的
阅读全文
摘要：采用观察者模式 $on $off $emit $on：绑定事件 绑定事件，一个事件名称上面可能绑定多个函数 $on("事件名称",回调函数) 事件名称与函数之间的关系：key:[] $emit：触发事件 触发事件时，需要触发当前事件身上所有的函数 $emit("事件名称",[需要传递的值]) $of
阅读全文
摘要：组件之间传值方式 父组件 子组件 非父子组件 1.父 >儿子（注意：父不能向孙子传递） 2.儿子 >父 3.非父子传递（兄弟间，叔侄间） 1.父传子 传递方： 当子组件在父组件中当标签使用时，给子组件标签添加一个自定义属性，值为需要传递的值 ：属性名=“值”（值为父组件data中的属性） 即： <子
阅读全文
摘要：细则 使用两个空格进行缩进。 eslint: indent function hello (name) { console.log('hi', name) } 除需要转义的情况外，字符串统一使用单引号。 eslint: quotes console.log('hello there') $("<di
阅读全文
摘要：转载： 1.Vetur 2.Eslint 它会自动在你的项目根目录下生成.eslintignore和.eslintrc.js两个配置文件，package.json文件里增加下面的依赖： 正文 本文针对的开发工具是vscode, 配合vue-cli创建的项目，告诉你安装什么插件，每个插件的作用，每行配
阅读全文
摘要：1.安装node.js (http://www.runoob.com/nodejs/nodejs-install-setup.html) 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd里直接输入：npm install -g cnpm --registry=https://registry.npm.taobao.org，回车，等待安装... 3.安装 全...
阅读全文
浙公网安备 33010602011771号