vue | 易学教程

vue 事件总线（bus）

阅读更多关于 vue 事件总线（bus）

1.全局引入bus Vue.prototype.$bus = new.Vue() 2.组件间传值使用(在发送事件时接收组件会实时接收到，可以用做兄弟组件间相互传值，但页面跳转组件间有问题通过$emit发送，$on接收) <div style="float: left; width: 15%; height: 100%;"> <div v-for="(item, index) in list" :key="index" @click="okClick(item)">{{item.name}}</div> </div> methods: { okClick (item) { this.$bus.$emit('busClick', item.id) } }, mounted() { console.log('123') this.$bus.$on('busClick', item => { switch (item) { case '看下值过来没' : this.items = '看下值过来没' break case 1 : this.items = 1 break case 2 : this.items = 2 break } }) }, 3.再接收组件销毁时要把事件清除掉，不然会重复发送和接收 beforeDestroy() { this.$bus.$off() } 　　来源

Vue.js 模板语法

阅读更多关于 Vue.js 模板语法

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值用法：index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="msg"> <p>{{ message }}</p> </div> <script> new Vue({ el: '#msg', data: { message: 'Hello Vue.js~' } }) </script> </body> </html> 效果图使用 v-html 指令用于输出 html 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="demo"> <div v-html="message"></div> </div> <script> new Vue({ el: '

nextTick实现原理（vue 05）

阅读更多关于 nextTick实现原理（vue 05）

文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本【2.5.17】【Vue原理】NextTick - 白话版 nextTick 是 Vue 中比较重要的一部分，源码独立而简短，稍作修改就可以拿出来为你的项目服务，我已经有在项目中使用了想必大家写 Vue 项目的时候，应该也有使用过 nextTick 一般我是用在数据渲染完毕之后执行某些操作 this.list = xx,xx,xx this. $nextTick (( ) = > { this.isLoading = false } ) nextTick 按我的理解，就是设置一个回调，用于异步执行异步执行，比如，就是把你设置的回调放在 setTimeout 中执行，这样就算异步了，等待当时同步代码执行完毕再执行但是，每设置一个 nextTick 就新建一个 setTimeout 又不实际，毕竟一个 setTimeout 是异步，两个setTimeout 也是异步，两个都要等在同步代码执行完毕之后才执行那我直接只设置一个 setTimeout 不就好了那一个 setTimeout 怎么执行多个回调呢？ 1 存在回调数组里。每次调用 nextTick，便往数组里面 push 设置的回调 2 只注册一个 setTimeout，时间为0，用于遍历回调数组

vue项目中使用echarts图表

阅读更多关于 vue项目中使用echarts图表

vue项目中使用echarts图表最近做了一个项目，研究了一下怎么使用echarts 官网地址：https://www.echartsjs.com/zh/index.html 1、在vue项目中安装echarts的包 npm install echarts --save 2、项目中引入echarts（全局），在main.js中 import echarts from 'echarts' Vue.prototype.$echarts = echarts; 3、在项目中初始化echarts 1、首先需要在页面的template中创建一个div <div id="main1" style="border: solid blue;display:inline-block;float:left;width:50%;height: 300px;margin-left: 600px"></div> echarts的图表都在这个div中展示 2、在script中的methods中初始化图表数据 methods: { //初始化数据 initData(expenditures){ // 基于准备好的dom，初始化echarts实例 var myChart = this.$echarts.init(document.getElementById('main1')); // 绘制图表 myChart

Vue的基础理解(四)

阅读更多关于 Vue的基础理解(四)

怎样理解vue的单向数据流？在vue中，父组件可以通过prop将数据传给子组件，但这个prop只能由父组件来修改，子组件修改就会抛出错误。如果子组件想修改数据，只能通过$emit由子组件派发事件，并由父组件接收事件进行修改。为什么子组件不可以修改父组件传递的Props?(为何提倡单项数据流) 由于vue提倡单项数据流，即父组件props的更新会流向子组件，但反过来却不行，这是为了防止意外改变父组件的状态，使得应用的数据流变的难以理解。如果破坏了单项数据流，当应用变的复杂时，debug的成本会很高。组件间有哪些通信方式？父子组件通信 props / $emit $parent / $children ref provide / inject .sync 非父子组件通信 eventBus 通过根实例$root vuex $attr / $listeners provide / inject 说一说vue的动态组件？多个组件通过同一个挂载点进行组件的切换，is的值是哪个组件的名称，那么页面就会显示这个组件。 <div :is = 'XXX'></div> 来源： oschina 链接： https://my.oschina.net/u/4461771/blog/3178049

vue控制只能输入小数点和数字，兼容火狐和IE浏览器。而且限制只能输入6位整数和2位小数

阅读更多关于 vue控制只能输入小数点和数字，兼容火狐和IE浏览器。而且限制只能输入6位整数和2位小数

-----输入框------ <el-form-item label="工作时长(小时):" prop="worktimelong" > <el-input v-model="handleform.worktimelong" placeholder="请输入工作时长" /> </el-form-item> -----监听------ watch: { 'handleform.worktimelong': function (newval, oldval) { var reg = /^(\d{0,6})(\.(\d{0,2}))?$/g; if (!reg.test(newval)) { if (newval == undefined) { this.handleform.worktimelong = undefined; return; } this.handleform.worktimelong = oldval } else { this.handleform.worktimelong = newval.replace(/^\./g, "") } } } 来源： CSDN 作者：待接收那附件链接： https://blog.csdn.net/xuewuzhijing98/article/details/104551801

前端小白也能开发vue电商项目（1）注册与登录

阅读更多关于前端小白也能开发vue电商项目（1）注册与登录

作为前端的初学者，学一个前端框架是必不可少的。因为对于新手而言，VUE相较于REACT更容易上手，所以作者选择了VUE。如果你正好也想学一个框架，那你走运了哦。跟着作者一起来发开发一个简单的电商项目，来学习VUE吧！这是一个基于 vue & axios & mock & token & stylus & Cube-UI的电商项目demo，面向 vue 初学者，场景虽简单，但五脏俱全。涵盖非常多的vue及其相关技术的基本操作。有详细的注释，帮助大家快速上手 vue 。且我整理了一些在vue开发过程中，有可能会用到的技术文章，希望大家能在这些前辈们身上有所收获。当然如果您觉得这篇文章or这个项目对您的学习有所帮助，请不吝点个star鼓励一下，当然如果存在问题，也非常希望您能跟我留言，一起学习，共同进步。 Github地址 vue-jingdong (不要吝惜你的小星星哦) 话不多说上效果图项目技术栈前台：vue & vue-router & vuex & vue-cli(webpack) & Cube-UI 后台：mock(用mock写模拟api) 前后台交互：axios 单点登录：token 学习VUE项目开发推荐阅读此处有引用大佬赢弱小金鱼的博客文章 vue-cli 生成项目主体框架 vue-cli官方文档 vue 全家桶 vue.js vue-router vuex

Vue中乍一看让人懵逼的代码

阅读更多关于 Vue中乍一看让人懵逼的代码

render: h => h(App) 出自 vue cli 构建的 main.js 文件中，首先看看各个版本的写法： components : { App } // vue1.0的写法 render : h => h ( App ) // vue2.0的写法再来看看官方解释：接收一个方法，作为第一参数，这是关键点查资料得出，ES6语法，表示 Vue 实例选项对象的 render 方法作为一个函数，接受传入的参数 h 函数，返回 h(App) 的函数调用结果。那么转换成代码大概就是这个样子 function render ( h ) { return h ( "yes" ) ; } function h ( arg1 ) { console . log ( arg1 ) } render ( h ) // => 输出 yes 其中 h 的理解 (根据Vue. js作者Even You的回复，h的含义如下:) It comes from the term “hyperscript”, which is commonly used in many virtual-dom implementations. “Hyperscript” itself stands for "script thatgenerates HTML structures HTML is the

学习ES7+ES8

阅读更多关于学习ES7+ES8

es6 语法：http://es6.ruanyifeng.com/#docs/async 作者：阮一峰撰文为何身为一个前端开发者，ECMAScript(以下简称ES)早已广泛应用在我们的工作当中。了解ECMA机构流程的人应该知道，标准委员会会在每年的6月份正式发布一次规范的修订，而这次的发布也将作为当年的正式版本。以后的改动，都会基于上一版本进行修改。所以，我们这次就基于ES6的版本对ES7、ES8版本的新增以及修改内容，做一次简要的总结，方便我们快速开发。 ES7新特性 ES7在ES6的基础上添加了三项内容：求幂运算符（**）、 Array.prototype.includes() 方法、函数作用域中严格模式的变更。 Array.prototype.includes()方法 includes() 的作用，是查找一个值在不在数组里，若在，则返回 true ，反之返回 false 。基本用法： ['a', 'b', 'c'].includes('a') // true ['a', 'b', 'c'].includes('d') // false Array.prototype.includes() 方法接收两个参数：要搜索的值和搜索的开始索引。当第二个参数被传入时，该方法会从索引处开始往后搜索（默认索引值为0）。若搜索值在数组中存在则返回 true ，否则返回

vue学习笔记day05 条件渲染

阅读更多关于 vue学习笔记day05 条件渲染

一 vue的条件渲染 v-if v-else-if v-else v-show v-if和v-show区别 1》v-show 没有v-else 2》v-show 不支持template 3》v-show 只是来做简单的切换（css=>display) 例子1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app">  <h1 v-if="arr.length==1">111</h1> <h1 v-else-if="arr.length==2">222</h1> <div v-else>333</div> </div> <script src="../vue.js"></script> <script> new Vue({ el:

订阅 vue