向前走。

2021年1月20日

摘要：准备好两个组件在根组件中引入注册方式1：全局注册注册方式2：局部组件注册实现在navbar组件中，控制sidebar组件的显示和隐藏 navbar组件中留一个插槽 sidebar组件添加一些内容在根组件中写控制逻辑以上案例有个问题，子组件的css被主组件的css覆盖了解决方案：在子组件阅读全文

posted @ 2021-01-20 21:26 向前走。阅读(432) 评论(0) 推荐(0) 编辑

vue二十八：Vue-Cli之环境搭建之node安装脚手架和使用脚手架创建vue项目

摘要：一、安装node和vue脚手架 1.下载node：http://nodejs.cn/download/ 双击安装，一路下一步到安装成功，打开cmd，执行node -v，出现版本号，则说明安装成功 2.配置使用淘宝镜像： npm的服务器在国外。那么可以安装一下cnpm，并且指定镜像为淘宝的镜像：npm 阅读全文

posted @ 2021-01-20 21:25 向前走。阅读(1258) 评论(0) 推荐(0) 编辑

vue二十七：vue基础之过滤器

摘要：过滤器：过滤器就是数据在真正渲染到页面中的时候，可以使用这个过滤器进行一些处理，把最终处理的结果渲染到网页中。1. 使用：`{{username|strip}}`、`<a :href="url|strip">百度</a>`。2. 定义：都是定义一个函数，这个函数的第一个参数永远都是被过滤的那个变量阅读全文

posted @ 2021-01-20 21:22 向前走。阅读(122) 评论(0) 推荐(0) 编辑

vue二十六：vue基础之vue生命周期

摘要：生命周期函数：1. 创建阶段： * beforeCreate：Vue已经创建了，但是data和methods都还没有被创建好。 * created：data和methods已经被创建好了。 * beforeMount：模板经过编译，还没有挂载到网页中。 * mounted：模板已经经过编译，并且已经阅读全文

posted @ 2021-01-20 21:21 向前走。阅读(117) 评论(0) 推荐(0) 编辑

vue二十五：vue基础之单个元素过渡和多个元素过渡

摘要：基础的展示和隐藏，无过渡效果 vue提供了组件transition，用来控制元素过渡，css需自定义，但是css名字的后缀(绿色部分)是固定的 1.单个元素过渡 2.多个元素过渡如果直接写多个元素，会报错改为互斥，且不同标签，否则vue会认为标签没变，不会重新创建节点或者相同标签，key值不同阅读全文

posted @ 2021-01-20 21:19 向前走。阅读(250) 评论(0) 推荐(0) 编辑

2021年1月19日

vue二十五：vue基础之slot插槽和具名插槽

摘要：定义组件使用场景1：如果想要动态的给child组件的dom结构添加节点，则需使用插槽。直接添加是无效的定义插槽使用场景1：如定义一个轮播组件，不固定轮播的内容，轮播内容按使用的场景临时添加使用使用场景2：使用插槽实现在组件1上控制组件2是否展示具名插槽，在预留了多个插槽时使用 <!DOC 阅读全文

posted @ 2021-01-19 22:03 向前走。阅读(651) 评论(0) 推荐(0) 编辑

vue二十四：vue基础之动态组件

摘要： component组件，动态的绑定多个组件到它的is属性上在component组件的is属性上绑定组件动态绑定组件状态保留在正常情况下，动态绑定的状态是不会保留的输入内容切换组件切回输入内容的页面，内容没有了 vue提供了组件keep-alive，来保持动态组件的状态一直存活，不会因为阅读全文

posted @ 2021-01-19 22:02 向前走。阅读(386) 评论(0) 推荐(0) 编辑

vue二十三：图书管理器案例实现

摘要：实现效果 <!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-eq 阅读全文

posted @ 2021-01-19 22:01 向前走。阅读(236) 评论(0) 推荐(0) 编辑

vue二十二：vue基础之事件总线实现非父子通信

摘要：事件总线工作原理在代码中实现创建非父子关系的组件创建中央事件总线(空的vue实例) mounted生命周期函数，在当前组件的dom创建完后就会调用在mounted生命周期中绑定订阅事件总线绑定发布事件总线获取发布的状态 <!DOCTYPE html><html lang="en"><he 阅读全文

posted @ 2021-01-19 21:55 向前走。阅读(119) 评论(0) 推荐(0) 编辑

vue二十一：vue基础之ref实现父子通信

摘要： ref存在于vue实例中 ref放在标签上，拿到的是原生节点获取vue实例下，ref中，inputText输入框的值 ref放在组件上，拿到的是组件对象访问子组件的状态和方法（子传父）父传子 <!DOCTYPE html><html lang="en"><head> <meta charset 阅读全文

posted @ 2021-01-19 21:51 向前走。阅读(517) 评论(0) 推荐(1) 编辑

公告