绑定一个 [12.34,-45.67] (东经西经，南纬北纬 正负表示) 形式的经纬度数组，能够按度分秒进行编辑，效果如下所示，点击东经，北纬可切换。 经纬度的 度转度分秒 能够获取度分秒格式数据 Coordinates组件实现 模板 一个span显示东经西经，三个输入框输入度分秒 <template><div class="coordinates"><!-- 经度 --><div class="item"><span class="itude"@click="itudeChange(true)">{{ longFlag | longitudeName }}</span><el-inpu...
bootstrap-table简介 ?1.1、bootstrap table简介及特征： Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。目前在github上已经有2600多个Star，可见其受欢迎程度。其官方网站地址 为：http://bootstrap-table.wenzhixin.net.cn/。里面可以下载使用所需的JS和CSS文件，以及参考文档和例子。 ?支持 ...
前言 slot可以在子组件中开启插槽，在父组件引用该组建时，可以定义这个插槽内要展现的功能或模块，下面话不多说了，来一起看看详细的介绍吧1.单个slot子组件中在相应位置写slot标签，父组件在引用子组件时，在子组件标签内写要插入插槽的元素；还可以设置slot在父组件没有设置插槽时，子组件的插槽默认显示内容；父组件.vue<template><div class="home"><child-componment><p>这是父组件的slot替代内容！</p></child-componment><...
场景分析 在前端开发中，我们常常会运用到“组件库”。在main入口中引入组件库，就可以很轻松的在页面中引入，并做一些基本的配置，如样式，颜色等。只需要在引入的组件中写入特定的属性，就能够定义。 举例说明 例如：element-ui组件库中使用switch开关，有个属性active-color是设置“打开时”的背景色。change事件是触发状态的事件。<el-switchv-model="value":active-color="activecolor"@change="touchSwitch"> </el-switch><s...
auto-vue-fileauto create .vue file by shell command通过终端自动创建vue文件前言：1: 我们在写xxx.vue页面文件的时候，一般都要写这些重复的代码：<template><div class="zlj-comp-ct">zlj组件</div> </template> <script> export default {name: zlj } </script> <style lang="scss" scoped> .zlj-comp-ct {} </style>2:写组件的时候可能还要在components目录下面新建一个目录:xxx,里面是xxx.vue和index.js比如myForm组件// my...
组件的通信一般常见的组件之间的通信有以下几种情况，A和B，B和C，B和D之间都是父子关系，C和D之间是兄弟组件关系。常用的通信手段有两种：1.ref：给元素或组件注册引用信息2.children:访问父级组件和子组件的实例。这两种方式都是直接通过实例的方式获取的方式。示例如下：//comA组件A export default {data () {return {title: 测试通信}},methods: {sayHello () {window.alert(你好);}} } 这里引用组件A<template><comA ref="co...
项目基础工程文件是使用vue-cli3.0搭建的,这里不过多介绍。开发Vue组件系列之模态框,主要有标题、内容、定时器、按钮文案、按钮事件回调、遮罩层这些可配置项。本次开发得组件是本系列的第一个组件,后期也会有更多系列教程推出。 使用命令行$ Vue create echi-modal $ cd echi-modal $ npm install $ npm run serve $ npm run build $ npm run lint添加vue.config.js文件,配置如下 const path = require("path");function resolve(...
（1）props属性： 在父组件中，可以通过子组件标签属性的形式将数据或者函数传给子组件，子组件通过props去读取父组件传过来的数据 用法 父组件传数据给子组件： 一般的属性值都是用来给子组件展示的子组件传数据给父组件 属性值为函数类型的，一般是用来子组件向父组件传递数据，子组件通过调用父组件传过来的函数，可以修改父组件的状态数据缺点： 隔层组件间传递: 必须逐层传递(麻烦)兄弟组件间: 必须借助父组件(麻烦)注意： //...
前言 除了使用 Vuex 方法外，vue 提供了各种各样的组件间通信的方案。文章整理一下父子组件、兄弟组件、祖先后代组件间是如何通信的。 父子组件通信props 和 $emit 父子组件通信子组件有时需要与父组件进行沟通，沟通的方式就是子组件 emit 事件，父组件通过监听这个事件来做进一步动作。而父组件与子组件通信则使用 props 假设这里有一个父组件并引入了一个子组件 my-comp： <my-comp v-for="msg in msgs" :key="msg.id" :msg="...
需求：点击btn,弹出modal显示图表（以折现图为例） 这应该是很基本的需求也是很容易实现的，代码和效果如下： 代码解释：setTem是一个方法，改变modal为true，默认为false ； chart-line是图表子组件，通过data向其传递参数，data绑定的数据是父组件mounted后拿到的数据效果图：点击btn后的确显示了modal框，但是里面的图表不能显示，接着改变子组件任何代码，迫使重新编译子组件，则子组件的图表可以正常显示分析：当点击btn时，m...
使用Vue也有很长一段时间,但是一直以来都没对其组件之间的通信做一个总结,这次就借此总结一下。 父子组件之间的通信 1）props和$emit 父组件通过props将数据下发给props,子组件通过$emit来触发自定义事件来通知父组件进行相应的操作 具体代码如下: ```// 父组件<template><div><h3>props和$emit</h3><Children v-on:changeMsg="changeMsg" :msg="msg"/></div></template><script>import Children from ./children;export default ...
思路：父组件通过props传值给子组件，子组件通过 $emit 来通知父组件修改相应的props值，具体实现如下： import Vue from vue const component = {props: [value],template: `<div><input type="text" @input="handleInput" :value="value"></div>`,data () {return{}},methods: {handleInput (e) {this.$emit(input, e.target.value)}} } new Vue({components: {CompOne: component},el: #root,template: `<div><comp-one :value1...
思路：1 在组件内部监听事件并把事件 emit2 在组件上监听 emit 出来的事件3 当事件发生时执行对应的函数去修改根实例上的 data 实现：1 在组件内部的 input框 中监听 input事件，并给 input事件 绑定triggerInput函数2 当往 input框 中输入内容时，触发 triggerInput 函数triggerInput函数 向外部 emit 一个 edit事件 和 输入框的值3 在组件上监听这个 edit事件 并给 edit事件 绑定 triggerEdit函数4 此时会触发 triggerEdit函数，...
本文实例讲述了vue组件定义，全局、局部组件，配合模板及动态组件功能。分享给大家供大家参考，具体如下： 一、定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({template:<h3>我是标题3</h3> }); Vue.component(aaa,Aaa);*组件里面放数据: data必须是函数的形式，函数必须返回一个对象(json) 2. 局部组件 放到某个组件内部 var vm=new Vue({el:#box,data:{bSign:true},components:{ //局部组件aaa:Aaa} });1. 全局组件...
本文实例讲述了vue组件数据传递、父子组件数据获取，slot,router路由功能。分享给大家供大家参考，具体如下： 一、vue默认情况下，子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script><style></style> </head> <body><div id="box"><aaa></aaa></div><script>var vm=new Vue({el:#box,data:{...