generator-vue-component可以快速生成自己的组件开发的脚手架，类似于vue-cli生成vue项目，这脚手架是目录结构是方便组件开发和调试 由于脚手架是由yeoman搭建，所以必须全局安装yeomannpm install yo然后全局安装generator-vue-componentnpm install generator-vue-component -g到项目目录，获取对应的开发模板yo vue-component-developer运行上面命令会弹出下面，依次输入对应的信息，到Your component type这一步可以选择对应的...
外部引入 <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <script type="text/javascript" src="../js/vue-2.5.16.js"></script>HTML部分<div class="container"><!--动态数据绑定--><my-info v-bind:data=msg v-on:close=closeHandler></my-info><!--静态数据绑定--><my-info ...
一、前言 之前的博客聊过 vue2.0和react的技术选型；聊过vue的axios封装和vuex使用。今天简单聊聊 vue 组件的封装。 vue 的ui框架现在是很多的，但是鉴于移动设备的复杂性，兼容性问题突出。像 Mint-UI 等说实话很不错了，但是坑也是不少，而且很多功能也是仅凭这些实现不了，这需要我们去封装自己的可复用组件 二、封装组件的步骤 1. 建立组件的模板，先把架子搭起来，写写样式，考虑你的组件的基本逻辑。 os：思考1小时，码码10分...
本文实例为大家分享了vue组件实现可搜索下拉框的具体代码，供大家参考，具体内容如下 一、效果 二、代码 dropdown-ext.vue <template><div class="vue-dropdown-ext" :class="themestyle" v-show-extend="show"><div class="search-module clearfix" v-show="length"><input class="search-text" @keyup=search($event) :placeholder="placeholder" /><span class="glyphicon glyphicon-search search-icon"></span></div><ul clas...
本文实例为大家分享了vue实现进度条效果的具体代码，供大家参考，具体内容如下 一、效果图 二、代码 progress-bar.vue <template><div class="vue-progress-bar default-theme"><div class="vue-progress-bar__tip"><span class="vue-progress-bar__tiplabel">{{label}}</span><span class="vue-progress-bar__tiptext">{{text}}</span></div><div class="vue-progress-bar__outer"><div class="vue-progress-bar__inner" :style="...
一、前言本文用Vue完成一个极简的地点选择器，我们接下来带大家实现这个。当然其中也有一些值得学习与注意的地方。话不多说，我们先上demo图。因为每个人的需要不一样，我这边就不在实现更多的功能，所以留有更大的空间供大家增删改。GitHub地址：Vue-location_Select 二、需要学习的地方（1）数据更新Vue无法监控首先要说一下的就是这个点，我们在Vue中有个好处就是可以不用操作dom，直接操作数据。但是这其实也有Vue无法监控的数...
我们在写vue项目的时候会遇到给组件命名 这里的name非必选项，看起来好像没啥用处，但是实际上这里用处还挺多的export default {name:xxx }1.当项目使用keep-alive时，可搭配组件name进行缓存过滤 举个例子： 我们有个组件命名为detail,其中dom加载完毕后我们在钩子函数mounted中进行数据加载 export default {name:Detail }， mounted(){this.getInfo(); }， methods:{getInfo(){axios.get(/xx/detail.json,{params:{id:this.$...
使用vue也有很多年了，一直都没有整理一下相关知识，给大家总结下开发过程中所遇到的一些坑，主要给大家总结一下vue组件传值的几种常用方法： 1、通过路由带参数传值 ① A组件通过query把id传给B组件 this.$router.push({path:/B,query:{id:1}}) ② B组件接收 this.$route.query.id2、父组件向子组件传值 使用props向子组件传递数据 子组件部分：child.vue <template><div><ul><li v-for=(item,index) in nameList :...
如果使用render函数来写比较复杂的vue组件，对于可读性和可维护性都很不友好，而使用jsx就会让我们回到更接近于模板的语法。babel转译器会将jsx转译为render函数渲染。 配置 需要用到babel插件 安装npm install\babel-plugin-syntax-jsx\babel-plugin-transform-vue-jsx\babel-helper-vue-jsx-merge-props\babel-preset-env\--save-dev.babelrc配置在plugins中添加transform-vue-jsx {"presets": ["env"],"plugins": ["transform-v...
官方定义： Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。我的理解就是，vuex就是前端的数据库。 1、首先核心是store，是个仓库，包含着state，因此第一步需要新建一个store。 显示界面：其中state就是仓库store，东西都存在这里。 2、从state中取数据，使用Lodash比较方便，语法如下：也可以使用vuex的getters，语法;官方文档还结束通过属性访问，通过方法访问等。https://vuex.vuejs.org/zh-cn/getters.html 3、向vuex中...
Vue 的组件作用域都是孤立的，不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。组件之间传递数据大致分为三种情况：父组件向子组件传递数据，通过 props 传递数据。 子组件向父组件传递数据，通过 events 传递数据。 两个同级组件之间传递数据，通过 event bus 传递数据。一、父组件向子组件传递数据 子组件部分： <template><div class="child">{{ msg }}</div> </template> <script...
本文介绍了自定义vue组件发布到npm的方法，分享给大家，具体如下：为什么会有这个想法呢，主要是vue项目中自定义的组件在多个项目中使用。导致修改bug的时候，总是要在项目分支中修改，然后同步到主线上，这样容易导致分支修改后没有同步到主线，慢慢的就会导致组件版本不统一，而导致升级组件很繁琐，最后可能都要去维护多个组件的不同版本，这样不是我们想要的。 所以就打算将组件打包发布到npm上，每个项目中只需要在package.js...
什么是组件组件（Component）是对数据和方法的简单封装。web中的组件其实可以看成是页面的一个组成部分，它是一个具有独立的逻辑和功能的界面，同时又能根据规定的接口规则进行相互融和，最终成为一个完整的应用，页面就是由一个个类似这样的组成部分组成的，比如导航、列表、弹窗、下拉菜单等。页面只不过是这样组件的容器，组件自由组合形成功能完整的界面，当不需要某个组件，或者想要替换某个组件时，可以随时进行替换和删除，...
Vue实例项目启动过程看一下现在我们的项目，想想整个项目的启动过程是什么（以直接打开index.html的方法访问为例来说明）？ 你首先打开了index.html，里面只有一个写了一个id=root的div，还有你引入了打包之后的代码，然后Vue自己肯定运行了一下（可以认为是Vue初始化）。 接着，应该是执行了entry.js(因为打包是webpack打包的，你配置的入口文件就这一个)。 entry.js干了什么，是的，创建了一个Vue实例对象，然后这个对象管理的区...
最近在使用element-ui框架，用到了Dialog对话框组件，大致实现的效果，跟我之前自己在移动端项目里面弄的一个弹窗组件差不太多。然后就想着把这种弹窗组件的实现方式与大家分享一下，下面本文会带着大家手摸手实现一个弹窗组件。 本文主要内容会涉及到弹窗遮罩的实现， slot 插槽的使用方式， props 、 $emit 传参，具体组件代码也传上去了。如果喜欢的话可以点波赞/关注，支持一下，希望大家看完本文可以有所收获。 组件最后实现的...