vue视频跟学
关注
分享
扫一扫
reaaal
每天进步一点点
展开
-
pubsub.js（消息订阅）
对于vue中多层组件的传值情况，如果多个组件的关系都是父子关系，使用消息订阅的方式可以直接进行跨层传递，而不再需要层层传递。 消息订阅的使用方式 首先下载pubsub npm install pubsub-js 项目中引入pubsub import PubSub from 'pubsub-js' 在mounted中去订阅消息 var token = PubSub.subscribe('MY TOPIC', mySubscriber); 第一个参数：消息，事件的名称 第二个参数：回调函数原创 2020-07-28 09:57:12 · 592 阅读 · 0 评论 -
day2-vue脚手架搭建
vue脚手架搭建方法 vue脚手架主要有两种常见方式进行搭建： vue create 项目名称 vue init webpack 项目名称 通过上面这两种进行搭建，都需要对vue进行全局安装。使用以下命令： npm install -g @vue/cli-init 两者的区别主要有下： vue-create是vue-cli3.x的初始化方法，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与vue-cli2项目结构不同，配置方法不同，具体配置方法参考文档链接。 vue-in原创 2020-07-24 15:10:11 · 94 阅读 · 0 评论 -
day2-自定义插件
自定义插件的用途 插件通常用来给Vue添加全局功能。插件的功能范围一般没有严格的限制，主要有下面几种： 添加全局方法或property 添加全局资源 通过全局混入来添加一些组件选项 添加vue实例方法，通过他们添加到Vue.prototype上实现 一个库，实现自己的api 自定义插件的使用 使用自定义插件，Vue.use这句话一定要写。插件一般在js文件中定义。 ...原创 2020-07-17 10:18:27 · 108 阅读 · 0 评论 -
day2-自定义指令
首先来补充两个vue的指令：v-text 和 v-html 如果想要内容按照HTML进行插入，要使用v-html指令。 <p v-html="msg"></p> ... data: { msg: '<a href="http://www.baidu.cn">百度</a>' } 自定义指令 自定义指令主要分为两种：全局自定义 和 局部自定义。 全局自定义指令 <p v-upper-text="msg"></p>原创 2020-07-16 16:00:00 · 153 阅读 · 0 评论 -
day2-过滤器
Vue中允许自己定义过滤器，被用于一些常见的文本格式化。过滤器被用在两个地方： 双花括号插值{{}} v-bind表达式 例：定义一个事件格式化过滤器 <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.js"></script> <div id="app"> <h4>显示格式化的日期时间</h4> <p>开始时间：{{time}}</p&g原创 2020-07-16 12:33:33 · 139 阅读 · 0 评论 -
day2-过渡和动画
vue中过渡的使用 Vue提供了transition的封装组件，在以下情况中，可以给任何元素和组件添加进入/离开过渡。 在需要过渡的元素外面包裹一层transition标签，并给这个标签一个name属性。 条件渲染（v-if） 条件展示（v-show） 动态组件 组件根节点 <style> /* 进入时的过渡状态和离开时的过渡状态 */ .fade-enter-active, .fade-leave-active { transition: opaci原创 2020-07-16 11:39:25 · 107 阅读 · 0 评论 -
day2-事件修饰符和按键修饰符
事件参数对象的传递 事件参数对象：event 阻止事件冒泡：e.stopPropagation（） 取消默认事件：e.preventDefault（） 在vue中进行传递要通过$event 形式。如下： **<body> <div id="app"> <h4>事件监听</h4> <button @click="showMessage('SUGA',$event)">按钮1</button> </div&原创 2020-07-15 18:16:14 · 125 阅读 · 0 评论 -
day2-数组排序案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="http://static.wangxiao.cn/zhuanti/commonResoures/jquery1.12.4.js">原创 2020-07-15 18:16:00 · 146 阅读 · 0 评论 -
day1复习小结
1.Vue是怎么理解的 Vue是一个渐进式框架，它的三个特点包括灵活、易用且高效。 渐进式的理解：Vue本身实现的功能是有限的，但是相关的插件非常多，安装后可以实现多的功能。 借鉴了angular的模板和数据绑定技术； 借鉴了react的组件化和虚拟dom； 从上面就可以延伸出更多的东西，包括： 模板 数据绑定 组件化 虚拟dom 强制数据绑定 双向数据绑定 相关的指令 插件：router、axios、vuex … 2.插值：{{表达式}} -----react中不一样的地方 3.双向数据绑定：v-mode原创 2020-07-15 18:15:44 · 96 阅读 · 0 评论 -
day1-数组更新操作实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="http://static.wangxiao.cn/zhuanti/commonResoures/jquery1.12.4.js">原创 2020-07-15 18:15:30 · 98 阅读 · 0 评论 -
day1-计算属性
计算属性（computed） 在内部操作，相关联的属性的值会发生变化。 A改变，B就会自动改变，B就放到计算属性里面。 计算属性有两种写法： 方法的形式：这种的默认是get操作 computed:{ fullName1(){ return this.firstName + '_' + this.lastName; } } 对象的形式：计算属i性中既有get操作也有set操作时要用对象的形式 fullName2:{ //get操作 get(){ r原创 2020-07-15 18:15:08 · 122 阅读 · 0 评论