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 相关文章推荐
jquery中ajax学习笔记4
Oct 16 Javascript
Javascript this 的一些学习总结
Aug 02 Javascript
JS跨域代码片段
Aug 30 Javascript
Jquery刷新页面背景图片随机变换的实现方法
Mar 15 Javascript
jQuery 无刷新分页实例代码
Nov 12 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
Jan 08 Javascript
vue调用高德地图实例代码
Apr 28 Javascript
vue实现图书管理demo详解
Oct 17 Javascript
Vue $mount实战之实现消息弹窗组件
Apr 22 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 Javascript
javascript 对象 与 prototype 原型用法实例分析
Nov 11 Javascript
canvas绘制折线路径动画实现
May 12 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缓存为Memcache的方法
2014/06/25 PHP
thinkPHP实现瀑布流的方法
2014/11/29 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
php web环境和命令行环境下查找php.ini的位置
2019/07/17 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
小试JQuery的AutoComplete插件
2011/05/04 Javascript
js中cookie的添加、取值、删除示例代码
2013/10/21 Javascript
JS嵌套函数调用上下文的问题解决
2014/03/26 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
Express.JS使用详解
2014/07/17 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
拥有一个属于自己的javascript表单验证插件
2016/03/24 Javascript
详解webpack性能优化——DLL
2017/10/20 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
Python中自定义函数的教程
2015/04/27 Python
详细介绍Python中的偏函数
2015/04/27 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
解读python如何实现决策树算法
2018/10/11 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
python实现简单银行管理系统
2019/10/25 Python
Python pymsql模块的使用
2020/09/07 Python
Pytorch生成随机数Tensor的方法汇总
2020/09/09 Python
建龙钢铁面试总结
2014/04/15 面试题
《灯光》教学反思
2014/02/08 职场文书
初中同学聚会感言
2014/02/11 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
导游词之清晏园
2019/11/22 职场文书
详解CSS故障艺术
2021/05/25 HTML / CSS