Vue.js添加组件操作示例


Posted in Javascript onJune 13, 2018

本文实例讲述了Vue.js添加组件操作。分享给大家供大家参考,具体如下:

<!DOCTYPE HTML>
<html>
  <head>
    <title>vue.js hello world</title>
    <script src="../vue.js"></script>
  </head>
<body>
  <div id="example">
   <my-component v-on:click="cao"></my-component>
  </div>
    <script>
    // 定义
    var MyComponent = Vue.extend({
     template: '<div>A custom component!</div>'
    });
    // 注册
    Vue.component('my-component', MyComponent);
    // 创建根实例
    new Vue({
     el: '#example',
     methods:{
       cao:function(event){
         alert(event.target.tagName);
       }
     }
    });
    </script>
</body>
</html>

效果:

Vue.js添加组件操作示例

局部注册

不需要全局注册每个组件。可以让组件只能用在其它组件内,用实例选项 components 注册:

var Child = Vue.extend({ /* ... */ })
var Parent = Vue.extend({
 template: '...',
 components: {
  // <my-component> 只能用在父组件模板内
  'my-component': Child
 }
})

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
May 27 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
Jun 20 Javascript
JQuery的read函数与js的onload不同方式实现
Mar 18 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
jquery实现图片滚动效果的简单实例
Nov 23 Javascript
将页面table内容与样式另存成excel文件的方法
Aug 05 Javascript
实例讲解jQuery中对事件的命名空间的运用
May 24 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
ionic环境配置及问题详解
Jun 27 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
微信小程序实现购物车功能
Nov 18 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 #Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 #Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 #Javascript
浅谈webpack 构建性能优化策略小结
Jun 13 #Javascript
详解webpack运行Babel教程
Jun 13 #Javascript
Babel 入门教程学习笔记
Jun 13 #Javascript
Vue中在新窗口打开页面及Vue-router的使用
Jun 13 #Javascript
You might like
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
用PHP实现浏览器点击下载TXT文档的方法详解
2013/06/02 PHP
解析ajax事件的调用顺序
2013/06/17 PHP
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
js 覆盖和重载 函数
2009/09/25 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
Asp.Net alert弹出提示信息的几种方法总结
2014/01/29 Javascript
javascript为下拉列表动态添加数据项
2014/05/23 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
python Pandas库基础分析之时间序列的处理详解
2019/07/13 Python
python开头的coding设置方法
2019/08/08 Python
如何用Python 加密文件
2020/09/10 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
捷克电器和DJ设备网上商店:Electronic-star
2017/07/18 全球购物
几道Web/Ajax的面试题
2016/11/05 面试题
刘胡兰的英雄事迹材料
2014/02/11 职场文书
爱国口号
2014/06/19 职场文书
2014年财务科工作总结
2014/11/11 职场文书
先进个人申报材料
2014/12/30 职场文书
付款承诺函范文
2015/01/21 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书