摘要: 插槽(slot) 组件的插槽 组件的插槽也是为了让我们封装的组件更加具有扩展性 让使用者可以决定组件内部的一些内容到底展示什么 插槽的基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</t 阅读全文
posted @ 2021-06-02 17:06 彼岸舞 阅读(119) 评论(0) 推荐(0) 编辑
摘要: 从今天开始本人博客开始同步到CSDN 阅读全文
posted @ 2021-06-02 15:20 彼岸舞 阅读(19) 评论(0) 推荐(0) 编辑
摘要: 阶段案例 案例效果 新建index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div> <h1>需求: 阅读全文
posted @ 2021-06-02 14:55 彼岸舞 阅读(151) 评论(0) 推荐(0) 编辑
摘要: 父子组件的访问方式 有时候我们需要父组件直接访问子组件,子组件直接访问父组件,或者是子组件访问根组件 父组件访问子组件:使用$children或者$refs 子组件访问父组件:使用$parent 子组件访问根组件:使用$root 父组件访问子组件[$children] <!DOCTYPE html> 阅读全文
posted @ 2021-06-02 14:53 彼岸舞 阅读(74) 评论(0) 推荐(0) 编辑
摘要: 父子组件的通信 为什么需要通信 在开发中往往一些数据确实需要下面的子组件进行展示 比如在一个页面中,我们从服务器请求了很多的数据,其中一部分数据并不是页面的大组件来展示的,而是需要下面的子组件进行展示,这个时候肯定不会让子组件再次调用网络请求,而是直接让大组件(父组件)将数据传递给小组件(子组件) 阅读全文
posted @ 2021-06-02 14:47 彼岸舞 阅读(73) 评论(0) 推荐(0) 编辑
摘要: 组件数据的存放 组件无法直接访问页面的对象数据 组件对象也有自己的data属性(也可以有Methods方法) 只是这个data属性必须是一个函数 而且这个函数返回一个对象,对象内部保存着数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset= 阅读全文
posted @ 2021-06-02 14:43 彼岸舞 阅读(99) 评论(0) 推荐(0) 编辑
摘要: 组件分离写法 使用Script标签分离组件代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../../js/vue.js"></script> 阅读全文
posted @ 2021-06-02 14:42 彼岸舞 阅读(145) 评论(0) 推荐(0) 编辑
摘要: 语法糖优化组件注册 /** * 直接使用对象,省略掉使用Vue.extend */ Vue.component('my-cpn',{ // 在ES6中可以使用 `` 标识字符串 并且可以换行不需要拼接 template: ` <div> <h2>this is cpn</h2> <span>this 阅读全文
posted @ 2021-06-02 14:39 彼岸舞 阅读(68) 评论(0) 推荐(0) 编辑
摘要: 父组件与子组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../../js/vue.js"></script> </head> <body> 阅读全文
posted @ 2021-06-02 14:36 彼岸舞 阅读(71) 评论(0) 推荐(0) 编辑
摘要: 局部组件是通过components属性注册的,只能在当前注册的实例范围内调用 注册局部组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../. 阅读全文
posted @ 2021-06-02 14:33 彼岸舞 阅读(105) 评论(0) 推荐(0) 编辑
摘要: 全局组件是通过Vue.component在Vue实例声明之前注册的,可以在全局任意地方调用,只要是属于Vue接管的界面 注册全局组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> 阅读全文
posted @ 2021-06-02 14:31 彼岸舞 阅读(122) 评论(0) 推荐(0) 编辑
摘要: 注册组件的步骤 组件的使用分为三个步骤 创建组件构造器 注册组件 使用组件 作者:彼岸舞 时间:2021\06\02 内容关于:VUE 本文属于作者原创,未经允许,禁止转发 阅读全文
posted @ 2021-06-02 14:30 彼岸舞 阅读(86) 评论(0) 推荐(0) 编辑
摘要: Vue组件化思想 组件化是Vue.js中的重要思想 它提供了一种抽象,让我们可以出一个个独立可复用的小组件来构造我们的应用 任何的应用都会被抽象成一颗组件树 组件化思想的应用 有了组件化思想,我们在开发中就可以运用了 尽可能的将页面拆分成一个个小的,可复用的组件 这样让我们的代码更加方便组织和管理, 阅读全文
posted @ 2021-06-02 14:28 彼岸舞 阅读(129) 评论(0) 推荐(0) 编辑