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 相关文章推荐
jQuery中bind与live的用法及区别小结
Jan 27 Javascript
在JavaScript中使用timer示例
May 08 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 Javascript
详解jQuery停止动画——stop()方法的使用
Dec 14 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
jquery对table做排序操作的实例演示
Aug 10 jQuery
React Native 通告消息竖向轮播组件的封装
Aug 25 Javascript
Vue集成Iframe页面的方法示例
Dec 12 Javascript
如何在js代码中消灭for循环实例详解
Jul 29 Javascript
Javascript原生ajax请求代码实例
Feb 20 Javascript
JavaScript鼠标悬停事件用法解析
May 15 Javascript
JavaScript基于SVG的图片切换效果实例代码
Dec 15 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
PHP之变量、常量学习笔记
2008/03/27 PHP
php采集速度探究总结(原创)
2008/04/18 PHP
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
php mysql数据库操作类(实例讲解)
2017/08/06 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
如何在PHP环境中使用ProtoBuf数据格式
2020/06/19 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
Jquery取得iframe下内容的方法
2013/11/18 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
node.js监听文件变化的实现方法
2019/04/17 Javascript
详解javascript中var与ES6规范中let、const区别与用法
2020/01/11 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
Python MySQLdb Linux下安装笔记
2015/05/09 Python
Python字典简介以及用法详解
2016/11/15 Python
Django 连接sql server数据库的方法
2018/06/30 Python
Django model反向关联名称的方法
2018/12/15 Python
基于Python实现用户管理系统
2019/02/26 Python
python3实现表白神器
2019/04/09 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
servlet面试题
2012/08/20 面试题
优秀学生获奖感言
2014/02/15 职场文书
电子商务求职信
2014/06/15 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
银行贷款收入证明
2014/10/17 职场文书
2015团员个人年度总结
2015/11/24 职场文书
完美解决golang go get私有仓库的问题
2021/05/05 Golang
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python
世界十大评分最高的动漫,CLANNAD上榜,第八赚足人们眼泪
2022/03/18 日漫