Vue.js第四天学习笔记(组件)


Posted in Javascript onDecember 02, 2016

在这篇文章之前小颖分享过小颖自己写的组件:Vue.js组件tabs实现选项卡切换效果和Tree升级版(实现省市多级联动)

先给大家看下小颖写了一个简单的组件示例:

组件:

<template>
<div class='content' v-if='showFlag'>
<input type="text" v-bind:style='{ width:compwidth+"px"}' v-model='compvalue' @keyup='myFun' v-el:getvalue>
<label class='example-label'>观察参数"compvalue"的变化:</label>{{compvalue}}
<button class='btn btn-danger' @click='compfun'>确定</button>
</div>
</template>
<script>
export default {
 // 从父组件接收收据
 props:{
 compvalue:{
  type:String,//类型(原生构造器:String, Number, Boolean, Function, Object, Array),如果绑定类型不对将抛出一条警告
  required: true, //是否是必须项
  twoWay:true,//指定这个 prop 为双向绑定,如果没有 'sync' 将抛出一条警告
  default:'',//默认值
 },
 compwidth:{
  coerce: function (val) {
  return val + '' // 将值转换为字符串
  }
 },
 compfun:{
  type:Function,
  required:true
 }
 },
 ready: function() {},
 computed:{},//计算属性
 methods: {//组件自身的方法
 myFun:function(){
  alert( this.$els.getvalue.value);
 }
 },
 data() {//绑定数据
 return {
  showFlag:true,
 }
 }
}
</script>

调用组件:

<template>
<div class='example-content'>
<compexample :compvalue.sync='values' :compfun='compFun'></compexample>
</div>
</template>
<script>
import compexample from './componentExample.vue'//引入组件
export default {
 components: {
 compexample
 },
 ready: function() {
 },
 methods: {
 compFun:function(){
  alert('喵嘞个咪');
 }
 },
 data() {
 return {
  values:'hello'
 }
 }
}
</script>

在小颖写的组件中,小颖把创建组件时,组件的大部分属性都加了相应注释,大家看了要是还有什么疑问,可以留言哦.

下面看写调用组件后的效果图吧:

Vue.js第四天学习笔记(组件)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
理解Javascript_02_理解undefined和null
Oct 11 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
JavaScript中提前声明变量或函数例子
Nov 12 Javascript
JavaScript实现twitter puddles算法实例
Dec 06 Javascript
学习JavaScript设计模式之观察者模式
Apr 22 Javascript
Google Maps基础及实例解析
Aug 06 Javascript
JavaScript中return用法示例
Nov 29 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 Javascript
vue实现自定义日期组件功能的实例代码
Nov 06 Javascript
详解webpack打包后如何调试的方法步骤
Nov 07 Javascript
Javascript之面向对象--接口
Dec 02 #Javascript
Javascript之面向对象--封装
Dec 02 #Javascript
JavaScript制作弹出层效果
Dec 02 #Javascript
Javascript之面向对象--方法
Dec 02 #Javascript
详解基于javascript实现的苹果系统底部菜单
Dec 02 #Javascript
Vue.js组件tree实现省市多级联动
Dec 02 #Javascript
Vue2实现组件props双向绑定
Dec 02 #Javascript
You might like
PHP编码规范的深入探讨
2013/06/06 PHP
PHP执行linux命令常用函数汇总
2016/02/02 PHP
PDO::errorCode讲解
2019/01/28 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
2007/11/30 Javascript
javascript 操作文件 实现方法小结
2009/07/02 Javascript
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
小程序实现带年月选取效果的日历
2018/06/27 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
2019/11/12 Javascript
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
Python open()文件处理使用介绍
2014/11/30 Python
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
selenium+python实现自动登录脚本
2018/04/22 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
全球虚拟主机商:HostGator
2017/02/06 全球购物
2015年采购员工作总结
2015/04/27 职场文书