随笔分类 - Vue
摘要：嵌套路由是一个很常见的功能 比如在home页面中, 我们希望通过/home/news和/home/message访问一些内容. 一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件. 一、路径和组件的关系如下: 二、实现嵌套路由有两个步骤: 创建对应的子组件, 并且在路由映射中配置对应的子路由
阅读全文
摘要：像vue这种单页应用，不做懒加载就会把所有资源打包成一个文件，当项目越做越大时打包出来的文件也越大。造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，
阅读全文
摘要：beforeCreate( 创建前 ) 在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。 created ( 创建后 ） 实例已经创建完成之后被调用，在这一步，实例
阅读全文
摘要：我们知道，vue函数的渲染其实是由render函数的回调函数createElement 来创建的虚拟dom，那么它到底是怎么创建组件的？ 尚未理解透彻[捂脸]，有待补充，参考如下： https://www.jianshu.com/p/709fc34e27b9 https://blog.csdn.ne
阅读全文
摘要：一、选择Runtime-Compiler和Runtime-only不同模式的时候main.js文件的区别 二.vue程序运行过程 1.解析： 第一步，当把vue模板template传给Vue实例的时候，vue内部会保存在options里面，第二部，进行解析，解析成ast（抽象语法树），第三步会进行编
阅读全文
摘要：<div id="app"> <cpn $ref="item"></cpn> <cpn></cpn> <cpn></cpn> <button @click="btnClick">按钮</button> </div> <template> <div>我是子组件</div> </template> </
阅读全文
摘要：有时候我们希望子组件的内容由父组件决定如何展示，这个时候子组件的数据父组件并不能访问到，而作用域插槽的关键之处就在于，父组件能接收来自子组件的slot传递过来的参数。 <div id="app"> <cpn></cpn> <cpn> <!--目的是获取子组件的数据并且按照父组件想要的形式展示-->
阅读全文
摘要：为了让我们的组件更加具有扩展性，可以使用插槽 <div id="app"> <cpn> <span>返回</span> <input type="text" placeholder="搜索"> <span>...</span> </cpn> </div> <template id="cpn"> <d
阅读全文
摘要：1 <div id="app"> 2 <cpn :number1="num1" 3 :number2="num2" 4 @num1change="numchange1" 5 @num2change="numchange2" 6 > 7 8 </cpn> 9 </div> 10 11 12 <temp
阅读全文
摘要：props用于父组件向子组件传递数据，还有一种比较常见的是子组件传递数据或事件到父组件中。我们应该如何处理呢？这个时候，我们需要使用自定义事件来完成。什么时候需要自定义事件呢？当子组件需要向父组件传递数据时，就要用到自定义事件了。我们之前学习的v-on不仅仅可以用于监听DOM事件，也可以用于组件间的
阅读全文
摘要：在组件中，使用选项props来声明需要从父级接收到的数据。props的值有两种方式：方式一：字符串数组，数组中的字符串就是传递时的名称。方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。 1 <div id="app"> 2 <!--<cnp :cinfo="info" :childMyM
阅读全文
摘要：本文链接：https://segmentfault.com/a/1190000012789253
阅读全文
摘要：vue项目中引用mui.js，我是在main.js中这样引入的， 结果报错 查找资料，最后在mui.js的最后添加了这样一句 这是因为mui并不能像jquery那样作为全局对象存在，加上window.mui = mui表示全局存在，后面插件也能正常使用
阅读全文
摘要：解决：在mui.js的源文件后最后加上 window.mui = mui;
阅读全文
摘要：本文链接：https://blog.csdn.net/Sophie_U/article/details/76223978 问题： 在vue的main.js中引入mui.min.js时，报错。 如上，单独在main.js或者任意组件中通过import 方式引入mui时都会报这个错。 原因：babel在
阅读全文
摘要：做vue项目的时候，向template模板添加元素的时候报错 Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if t
阅读全文
摘要：利用 Vue-Awesome-Swiper插件来做轮播效果，github地址：https://github.com/surmon-china/vue-awesome-swiper 安装 npm install vue-awesome-swiper --save 页面中引用 import 'swipe
阅读全文