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学习之闭包分析
Dec 02 Javascript
Javascript中的this绑定介绍
Sep 22 Javascript
jquery单行文字向上滚动效果示例
Mar 06 Javascript
javascript实现简单的二级联动
Mar 19 Javascript
jQuery实现模拟marquee标签效果
Jul 14 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
过期软件破解办法实例详解
Jan 04 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
Mar 08 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
Angular4.0动画操作实例详解
May 10 Javascript
JavaScript基础之this和箭头函数详析
Sep 05 Javascript
JSONObject与JSONArray使用方法解析
Sep 28 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
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
php遍历类中包含的所有元素的方法
2015/05/12 PHP
yii框架搜索分页modle写法
2016/12/19 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
JavaScript修改css样式style
2008/04/15 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
删除节点的jquery代码
2014/01/13 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
浅谈jquery拼接字符串效率比较高的方法
2017/02/22 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
2017/07/13 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
加拿大最大的箱包及旅游配件零售商:Bentley Leathers
2017/07/19 全球购物
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
优秀毕业生自我鉴定
2014/01/19 职场文书
安全生产目标责任书
2014/04/14 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
高中学校对照检查材料
2014/08/31 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
紧急迫降观后感
2015/06/15 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书
python脚本框架webpy的url映射详解
2021/11/20 Python
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers