正文 前言：转眼距离上篇 JS组件系列——又一款MVVM组件：Vue（一：30分钟搞定前端增删改查） 已有好几个月了，今天打算将它捡起来，发现好久不用，Vue相关技术点都生疏不少。经过这几个月的时间，Vue的发展也是异常迅猛，不过这好像和博主都没什么太大的关系，博主还是老老实实研究自己的技术吧。技术之路还很长，且行且研究吧。 一、为什么组件很重要 前两天，看到一篇关于 汇总vue开源项目 的文章，资源非常丰富，不得不感叹开源...
最近写一个这样的页面 要求点击修改按钮之后部分输入框由禁用状态变为可用状态.我使用了vue中的事件处理器,但是不知道怎么获取disabled这个属性的值,所以以失败告终.后来又使用了vue中的v-bind,使其与class或者style绑定,但是也没有作用 <el-input id = "usernames" v-model="form.username" v-bind:style = {"disabled:isDisabled"}></el-input> data(){return{isDisabled:true} }后来又想到使用jquery来改变属性,但是这个也没用...
自己写的vue组件怎么才能让其他人引用呢，或者是共用组件如何让其他项目引用。本文就粗细的介绍下，如有疑问欢迎共同讨论。在这里你能了解下如下知识点： 1. 如何发布一个包到npmjs仓库上 2.如何引用一个npm包，尤其是本地引用 3.vue组件的两种引用方案 一、发布一个包到npm的步骤在npmjs.org上注册一个账号 然后进入命令提示窗口输入：npm adduser: 进入添加用户Username your name: 设置用户名Password your password: 设置密码E...
vue 编写的树形菜单，小巧实用，支持vue1.0，vue2.0 v1.0 功能:1.支持多级树目录 2.支持高亮点击的节点 3.支持展开点击节点 4.支持点击收缩节点时收缩所有子目录 5.支持自定义回调函数，点击节点时回调，参数为节点信息用法：<launch-tree :list=list :options=options></launch-tree> list = [{name: 一级目录, // 目录名字isOpen: true, // 是否初始展开目录hightLight: true, // 是否初始高亮className: undefined, // 添加自定...
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。 以上是vuex的官方文档对vuex的介绍，官方文档对vuex的用法进行了详细的说明。这里就不再细讲vuex的各个用法，写这篇博客的目的只是帮助部分同学...
一直打算偷懒使用个现成的树组件，但是在github上找了一大圈没有找到真正满足应用开发的树组件，所以没办法只能自己写了一个，开源出来希望可以帮助到需要的人，同时如果大家觉得好用，我可以顺带骗骗★（希望喜欢的朋友对我体力的肯定可以点下★ ），由于我也算刚接触vue，所以难免有所考虑不周的地方，希望大家在issue里面指正。组件重点是父子组件数据的共享和状态保持，我是利用了下vuex的思路，采用一个控制仓库完成。 github...
一、 什么是懒加载 懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。 二、为什么需要懒加载 在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时 三、如何与webpack配合实现组件懒加载 1、在webpack配置文件中的output...
前言：转眼距离上篇JS组件系列——又一款MVVM组件：Vue（一：30分钟搞定前端增删改查）已有好几个月了，今天打算将它捡起来，发现好久不用，Vue相关技术点都生疏不少。经过这几个月的时间，Vue的发展也是异常迅猛，不过这好像和博主都没什么太大的关系，博主还是老老实实研究自己的技术吧。技术之路还很长，且行且研究吧。 一、为什么组件很重要 前两天，看到一篇关于汇总vue开源项目的文章，资源非常丰富，不得不感叹开源社区的强...
本篇资料来于官方文档：http://cn.vuejs.org/guide/components.html#Props本文是在官方文档的基础上，更加细致的说明，代码更多更全。简单来说，更适合新手阅读 props数据传递①组件实例的作用域：是孤立的，简单的来说，组件和组件之间，即使有同名属性，值也不共享。 <div id="app"> <add></add> <del></del> </div> <script> var vm = new Vue({ el: #app, components: { "add": { template: "<button>btn：{{btn}}</button>"...
组件间通信（父子，兄弟） 相关链接\组件通信：点击查看 学习链接：Vue.js——60分钟快速入门点击查看 分分钟玩转Vue.js组件点击查看 父组件传子组件 父传子方法（一） 属性传递 props //子组件 <template> <ul><li v-for="item in dataList">{{item}}</li></ul> </template><script>export default { props : { dataList : [] }} </script> //父组件 <template><component-child v-bind:data-list="dataList"> </component-child...
注册一个组件 有两种方式可以注册一个组件，第一种是全局注册，第二种是局部注册 # 全局注册 Vue.component(my-component,{template: <span>Hello</span> })# 局部注册 var child = {template: <span>Hello</span> } new Vue({// components:{my-component: child} })注意：组件的注册必须要在Vue实例创建之前 使用组件 <div id="app"><my-component></my-component> </div>当我们需要使用到data时，data必须是一个函数，否则将会报...
实现此例您可以学到： vue-cli的基本应用父组件如何向子组件传递值单文件组件如何引入scssv-on和v-for的基础应用源码下载 一、搭建vue开发环境 1）更换镜像到cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 2）安装vue-cli cnpm install -g vue-cli 3）初始化vue项目 命令模式进入项目所在的目录，如d:\test\，输入vue init 项目名称即可。如果你想引入vue2.0框架，必须把nodejs、webpack和npm升级到最新版...
前言 这里讲的主要是想谈谈基于Vue的一个组件开发。不得不说的一点就是，在实际的Vue项目中，页面中每一个小块都是由一个个组件（.vue文件）组成，经过抽离后，然后再合并一起组成一个页面。由于上家公司我负责多的是可视化这一块的开发，这边我也将带着大家进行一个Vue项目中的可视化组件的开发，这里用到的框架将是主流的可视化框架highcharts。 一、Vue环境的搭建 1、Mac用户 首先安装包管理homebrew /usr/bin/ruby -e "$(curl ...
准备： vue.js 原本是学习vue组件 require.js 然后想到用require 加载 r.js 文件太多 合并 文件目录 忽略部分文件及文件夹一、先说vue 组件 先引入vue 再引入vue组件 Vue.extend({}) 定义组件 template data methods Vue.component()，注册组件的标签，标签在html中是一个挂载点 new Vue() 进行实例化 index.html // css引入 略 <div id="header"> <tq-header></tq-header> </div> <div id="footer"> <tq-footer></tq-footer> </di...
有一段时间没更新文章了，主要是因为自己一直在忙着学习新的东西而忘记分享了，实在惭愧。 这不，大半夜发文更一篇文章，分享一个自己编写的一个Vue的小组件，名叫BootPage。 不了解Vue.js的童鞋可以移步我的上一篇文章《浅谈Vue.js》了解一下。 BootPage组件简介 其实也不是啥高大上的组件了，相反确实一个简单的表格分页组件而已，主要是自己最近项目中需要一个表格分页组件，而Vue官方组件库里分页组件都功能太强大或者没有适合...