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 For Beginners(转载)
Jan 05 Javascript
javascript据option的value值快速设定初始的selected选项
Aug 13 Javascript
jQuery1.6 使用方法一
Nov 23 Javascript
在父页面调用子页面的JS方法
Sep 29 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 Javascript
Javascript中的call()方法介绍
Mar 15 Javascript
Bootstrap每天必学之标签与徽章
Nov 27 Javascript
Jquery技巧(必须掌握)
Mar 16 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
Vue2.0用户权限控制解决方案的示例
Feb 10 Javascript
vue插槽slot的理解和使用方法
Apr 03 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伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
php中错误处理操作实例分析
2019/08/23 PHP
jQuery解决iframe高度自适应代码
2009/12/20 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
2016/03/30 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
2016/05/16 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
JS立即执行函数功能与用法分析
2019/01/15 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
Python模块文件结构代码详解
2018/02/03 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
python版DDOS攻击脚本
2019/06/12 Python
python如何实现数据的线性拟合
2019/07/19 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
python的sys.path模块路径添加方式
2020/03/09 Python
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
个人自荐信
2013/12/05 职场文书
教师产假请假条
2014/04/10 职场文书
元旦标语大全
2014/10/09 职场文书
病人慰问信范文
2015/02/15 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
教师培训简讯
2015/07/20 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
使用feign服务调用添加Header参数
2021/06/23 Java/Android
Python OpenCV实现图形检测示例详解
2022/04/08 Python
MySQL自定义函数及触发器
2022/08/05 MySQL