Vue.js 求和案例-纯Vue实现
摘要：纯Vue实现视频106 #纯Vue版本 ##components ###Count.vue <template> <div> <h1>当前求和为：{{sum}}</h1> <select v-model.number="n"> <!-- 收集到的是字符串类型， v-model.number="n"强
阅读全文
posted @
2023-03-23 22:01
垂序葎草
阅读(140)
推荐(0) 编辑
Vue.js 作用域插槽
摘要：视频 #components ##Categray.vue <template> <div class="category"> <h3>{{title}}分类</h3> <slot :games="games" msg="hello">我是默认的一些内容</slot> </div> </templa
阅读全文
posted @
2023-03-23 10:23
垂序葎草
阅读(17)
推荐(0) 编辑
Vue.js 具名插槽
摘要：视频 #components ##Categray.vue <template> <div class="category"> <h3>{{title}}分类</h3> <!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） --> <slot name="center">我是一些默认值，当使用
阅读全文
posted @
2023-03-22 21:34
垂序葎草
阅读(20)
推荐(0) 编辑
Vue.js 默认插槽
摘要：默认插槽视频 #components ##Categray.vue <template> <div class="category"> <h3>{{title}}分类</h3> <!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） --> <slot>我是一些默认值，当使用者没有传递具体结构时
阅读全文
posted @
2023-03-22 21:26
垂序葎草
阅读(26)
推荐(0) 编辑
Vue.js vue-resource（vue1.0使用多，axios已替代）
摘要：视频 用的不多插件得了解，对xhr的封装，xhr和fecth同级 main.js Search.vue修改，和前一章用法一模一样 #components ##List.vue <template> <div class="row"> <!-- 展示用户列表 --> <div v-show="info
阅读全文
posted @
2023-03-21 02:13
垂序葎草
阅读(39)
推荐(0) 编辑
Vue.js github案例（p98~p100）
摘要：视频98 视频99 视频100 #components ##List.vue <template> <div class="row"> <!-- 展示用户列表 --> <div v-show="info.users.length" class="card" v-for="user in info.u
阅读全文
posted @
2023-03-21 02:03
垂序葎草
阅读(27)
推荐(0) 编辑
Vue.js 配置代理vue-cli
摘要：视频96 视频97 三次握手四次挥手 vue.config.js中写 vue脚手架配置代理 方法一 在vue.config.js中添加如下配置： devServer:{ proxy:"http://localhost:5000" } 说明： 优点：配置简单，请求资源时直接发给前端（8080）即可
阅读全文
posted @
2023-03-21 01:31
垂序葎草
阅读(125)
推荐(0) 编辑
Vue.js TodoList动画
摘要：视频95 MyItem.vue 改过又改到MyList.vue上面去了 #components ##MyFooter.vue <template> <div class="todo-footer" v-show="total"> <label> <!-- <input type="checkbox"
阅读全文
posted @
2023-03-21 00:29
垂序葎草
阅读(17)
推荐(0) 编辑
Vue.js 动画效果（p91~p94）
摘要：视频91 视频92 视频93 集成第三方动画视频94 animate.css Vue封装的过度与动画 作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。 图示： 写法： 准备好样式： 元素进入的样式： v-enter：进入的起点 v-enter-active：进入过程中 v-e
阅读全文
posted @
2023-03-21 00:02
垂序葎草
阅读(32)
推荐(0) 编辑
Vue.js TodoList案例-编辑& $nextTick
摘要：编辑部分功能视频 $nextTick视频 本节遗留问题， 点击input框才有焦点，写逻辑的时候是绑定在blur上面的。如果不点击input再点击其他地方，不能触发input框转换到文字的逻辑。 MyItem.vue App.vue修改 nextTick 语法：this.$nextTick(回调函数
阅读全文
posted @
2023-03-20 18:19
垂序葎草
阅读(25)
推荐(0) 编辑
Vue.js TodoList案例pubsub
摘要：视频 MyItem.vue App.vue修改 #components ##MyFooter.vue <template> <div class="todo-footer" v-show="total"> <label> <!-- <input type="checkbox" :checked="i
阅读全文
posted @
2023-03-20 17:42
垂序葎草
阅读(14)
推荐(0) 编辑
Vue.js 消息订阅与发布
摘要：视频 npm i pubsub-js 该技术在vue中被事件总线完全替代 消息订阅与发布（pubsub） 一种组件间通信的方式，适用于任意组件间通信。 使用步骤： 安装pubsub：npm i pubsub-js 引入: import pubsub from 'pubsub-js' 接收数据：A组件
阅读全文
posted @
2023-03-20 17:35
垂序葎草
阅读(36)
推荐(0) 编辑
Vue.js TodoList事件总线
摘要：视频 Myitem.vue App.vue修改 #components ##MyFooter.vue <template> <div class="todo-footer" v-show="total"> <label> <!-- <input type="checkbox" :checked="i
阅读全文
posted @
2023-03-20 11:06
垂序葎草
阅读(6)
推荐(0) 编辑
Vue.js 全局事件总线（任意组件间通信）
摘要：视频84 视频85 现有东西整合的东西 全局事件总线（GlobalEventBus） 一种组件间通信的方式，适用于任意组件间通信。 安装全局事件总线： new Vue({ ...... beforeCreate() { Vue.prototype.$bus = this //安装全局事件总线，$bu
阅读全文
posted @
2023-03-20 10:42
垂序葎草
阅读(79)
推荐(0) 编辑
Vue.js TodoList自定义事件
摘要：视频 MyFooter MyHeader App.vue均有改变 #components ##MyFooter <template> <div class="todo-footer" v-show="total"> <label> <!-- <input type="checkbox" :check
阅读全文
posted @
2023-03-19 02:53
垂序葎草
阅读(10)
推荐(0) 编辑
Vue.js 组件自定义事件
摘要：绑定组件视频80 解绑组件视频81 总结视频 组件的自定义事件 一种组件间通信的方式，适用于：子组件 > 父组件 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。 绑定自定义事件： 第一种方式，在父组件中：<Demo @atguigu="tes
阅读全文
posted @
2023-03-19 02:44
垂序葎草
阅读(57)
推荐(0) 编辑
Vue.js TodoList本地存储
摘要：视频 App.vue中有所改变 #components ##MyFooter.vue <template> <div class="todo-footer" v-show="total"> <label> <!-- <input type="checkbox" :checked="isAll" @c
阅读全文
posted @
2023-03-19 02:01
垂序葎草
阅读(13)
推荐(0) 编辑
Vue.js 浏览器本地存储
摘要：视频 webStorage 存储内容大小一般支持5MB左右（不同浏览器可能还不一样） 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。 相关API： xxxxxStorage.setItem('key', 'value')
阅读全文
posted @
2023-03-19 01:50
垂序葎草
阅读(88)
推荐(0) 编辑
Vue.js TodoList案例
摘要：静态组件视频70 展示动态数据视频71 添加todo视频72 nanoid--> npm i nanoid todo前勾选视频73 删除todo功能视频74 底部统计功能视频75 底部交互功能视频76 总结视频 总结TodoList案例 组件化编码流程： (1).拆分静态组件：组件要按照功能点拆
阅读全文
posted @
2023-03-19 01:31
垂序葎草
阅读(106)
推荐(0) 编辑
