vue2总结
1.ref可跨页面取.vue文件的所有内容:
<!--echart图自定义公用模板-->
<echar-tem ref="echar"> </echar-tem> import echarTem from "../charts/echarts.vue"
components:{
echarTem
},
调用模板页面的函数:
var that = this.$refs.echar.drawBarChart();
可获取到模板页面的方法
父页面向子页面传递参数
子页面接收props:[
'option','id'],
父页面
<echar-pie :option=
'arrData' id="chartPieParent">
<div id="chartPieParent" style="width:100%; height:400px;"></div>
</echar-pie>
2.更改默认样式
<style scoped>
.block{
padding:15px 0px 0 10px;
}
.toolbar{
background: none;
}
</style>
scoped:只在本组件中作用,需要更改默认样式时:
1)去掉scoped 2)在下方再写一个style来写新样式
3.引入模板文件
1)template.vue 为模拟文件
2)user.vue为应用模板的文件 import oSelect from './template.vue';(./当前目录)
需要配置
components:{
template //==template:template key,value值相等时可省略
},
3)在dom中直接引用<template></template>即可引用template.vue的‘所有’内容
4)如果需要再模板内添加新的内容可以再template.vue的html内容区对应位置加上<slot></slot>然后user.vue的html的对应位置即可添加新内容
vue2总结的更多相关文章
- vue2.0实践的一些细节
最近用vue2.0做了个活动.做完了回头发现,好像并没有太多的技术难点,而自己好像又做了比较久...只能说效率有待提升啊...简单总结了一些比较细节的点. 1.对于一些已知肯定会有数据的模块,先用一个 ...
- 用FSM一键制作逐帧动画雪碧图 Vue2 + webpack
因为工作需要要将五六十张逐帧图拼成雪碧图,网上想找到一件制作工具半天没有找到,就自己用canvas写了一个. 写成之后就再没有什么机会使用了,因此希望有人使用的时候如果遇到bug了能及时反馈给我. 最 ...
- vue2.0构建淘票票webapp
项目描述 之前一直用vue1.x写项目,最近为了过渡到vue2.0,特易用vue2.0栈仿写了淘票票页面,而且加入了express作为后台服务. 前端技术栈:vue2.0 + vue-router + ...
- Vuex2.0+Vue2.0构建备忘录应用实践
一.介绍Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,适合于构建中大型单页应用. ...
- 一步步构造自己的vue2.0+webpack环境
前面vue2.0和webpack都已经有接触了些(vue.js入门,webpack入门之简单例子跑起来),现在开始学习如何构造自己的vue2.0+webpack环境. 1.首先新建一个目录vue-wk ...
- Vue2.0组件间数据传递
Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有 ...
- 基于Vue2.0+Vue-router构建一个简单的单页应用
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6185492.html 一.介绍 vue.js 是 目前 最火的前端框架,vue.js ...
- vue2.0实战
学了几周的vue2.0,终于有时间去做一个应用了. 为了全面联系相关知识,所以用到了vue-router,以及作者最新推荐的axios,组件库用的是饿了么的mint-ui2.0. 项目构建使用官方vu ...
- vue DatePicker vue2.0的日期插件
一个用vue2.0写的日期控件,可以支持简单的年月日选择.地址:https://github.com/Stevenzwzhai/vue-datepicker. 首先是关于日期对象的使用,基本就是日期的 ...
- vue2/vuex2的那点坑
说是坑,其实大部分是我们自己的过错! vuex官方demo在1.0可以运行,在2.0报错?此类问题,应该很常见吧? 还有顺溜的利用1.0搭建的webpack编译环境到了vue2.0突然失效了,报错了? ...
随机推荐
- Pycharm创建Django项目并访问Django
Pycharm创建Django项目并访问Django 一.Django插件 如果没有Django插件,需要先安装Django插件. 1,首先点击Default Settings,打开设置页面: 2,打 ...
- openvpn server setup
Set Up an OpenVPN Server client access 内部环境搭建
- DL_WITH_PY系统学习(第2章)
本节提示: 1.第一个dl例子: 2.tensor和tensor操作: 3.DL如何通过逆向传播和梯度下降达到学习目的. 2.1 输入数据集的格式 ,*,))) network.add(layer ...
- bzoj 3489 A simple rmq problem - 线段树
Description 因为是OJ上的题,就简单点好了.给出一个长度为n的序列,给出M个询问:在[l,r]之间找到一个在这个区间里只出现过一次的数,并且要求找的这个数尽可能大.如果找不到这样的数,则直 ...
- UVa 11997 K Smallest Sums - 优先队列
题目大意 有k个长度为k的数组,从每个数组中选出1个数,再把这k个数进行求和,问在所有的这些和中,最小的前k个和. 考虑将前i个数组合并,保留前k个和.然后考虑将第(i + 1)个数组和它合并,保留前 ...
- linux 压缩工具
gzip gunzip zcat bzip2 bunzip2 bzcat xz unxz xzcat a: gzip 用法 # gzip file 压缩文件 不会保留源文件 直接生成 file.g ...
- 关于python hashlib模块的使用
hashlib hashlib主要提供字符加密功能,将md5和sha模块整合到了一起,支持md5,sha1, sha224, sha256, sha384, sha512等算法 #!/usr/bin/ ...
- 《HTML与CSS 第一章 认识HTML》读书笔记
一.Web让广播明星黯然失色 要建立Web页面,需要创建用超文本标记语言(HyperText Markup Language,HTML)编写的文件,把它们放在一个Web服务器上 二.Web服务器能做什 ...
- Python3基础 list del 从内存中删除整个列表
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- HDU 4391 Paint The Wall(分块的区间维护)
题意:给出几个操作,把l-r赋值为z,询问l-r有几个z,其中z < INT_MAX 思路:因为z很大,所以很难直接用线段树去维护.这里可以使用分块来解决.我们可以让每个块用map去储存map[ ...