Vue.js添加组件操作示例
时间:2019-04-20
本文章向大家介绍Vue.js添加组件操作示例,主要包括Vue.js添加组件操作示例使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例讲述了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>
效果:
局部注册
不需要全局注册每个组件。可以让组件只能用在其它组件内,用实例选项 components 注册:
var Child = Vue.extend({ /* ... */ }) var Parent = Vue.extend({ template: '...', components: { // <my-component> 只能用在父组件模板内 'my-component': Child } })
希望本文所述对大家vue.js程序设计有所帮助。
- WCF 消息帧格式
- C#以post方式调用struts rest-plugin service的问题
- Web前端开发初级阶段需要学习的知识有哪些?
- 作为TensorFlow的底层语言,你会用C+构建深度神经网络吗?
- 企业应用中使用Silverlight 3
- oracle:db-link使用
- 5个炫酷的Python工具,你都用过么?
- 保护ASP.NET 应用免受 CSRF 攻击
- .NET:Entity Framework 笔记
- redis 学习笔记(1)-编译、启动、停止
- 致研究者:2018 AI研究趋势
- redis 学习笔记(3)-master/slave(主/从模式)
- 解决Chrome或其它WebKit浏览器input和textarea的黄色/蓝色边框问题
- eclipse/intellij Idea集成jetty
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 大数相加
- Hexo+Gitee pages搭建个人博客
- ubuntu设置定时任务的三种方法
- Centos7 离线安装MySQL
- springboot 事务,多张表的操作事务回滚
- 移动硬盘显示盘符但是打不开,提示加密
- GORM V2 模型定义、约定、标签
- 字符串:简单的反转还不够!
- TypeScript 实战算法系列(七):实现图的遍历
- 63. Vue MUI的基本使用
- 初学web自动化测试--笔记1
- R语言作图——Line plot with error
- Python自学成才之路 玩转虚拟环境
- 基于腾讯云的 Rust 和 WebAssembly 函数即服务
- 谷歌开源NLP模型可视化工具LIT,模型训练不再「黑箱」