Vue 组件与复用
(1)全局注册
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<my-component> </my-component>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
//示例前注册
Vue.component('my-component', {
//DOM结构必须被元素包含
template: '<div>组件内容</div>'
})
new Vue({
el: "#app"
})
</script>
</body> </html>
(2)局部注册
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<my-component> </my-component>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
var Child = {
template: '<div>组件内容</div>'
}
new Vue({
el: "#app",
components: {
'my-component': Child
}
})
</script>
</body> </html>
(3)is挂载组件
table、ul、ol、select这些标签会限制其内的元素,这时可以使用is来挂载组件
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<table>
<tbody is='my-component'>
</tbody>
</table>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
//示例前注册
Vue.component('my-component', {
//DOM结构必须被元素包含
template: '<div>组件内容</div>'
})
new Vue({
el: "#app"
})
</script>
</body> </html>
(4)组件也可以有data,method,computed等属性。但是data是函数,数据需要return出去。
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<my-component></my-component>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
//示例前注册
Vue.component('my-component', {
//DOM结构必须被元素包含
template: '<div>{{message}}</div>',
data: function() {
return {
message: '组件内容'
}
}
})
new Vue({
el: "#app"
})
</script>
</body> </html>
(5)解决多个组件之间数据共享问题
给组件返回一个新的data对象
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component> </div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
//示例前注册
Vue.component('my-component', {
//DOM结构必须被元素包含
template: '<button @click="counter++">{{counter}}</button>',
data: function() {
return {
counter: 0
}
}
})
new Vue({
el: "#app"
})
</script>
</body> </html>
(6)props传递数据、events触发事件和slot内容分发构成Vue组件的3个API来源。
Vue 组件与复用的更多相关文章
- 打造 Vue.js 可复用组件
Vue.js 是一套构建用户界面的渐进式框架.我们可以使用简单的 API 来实现响应式的数据绑定和组合的视图组件. 从维护视图到维护数据,Vue.js 让我们快速地开发应用.但随着业务代码日益庞大,组 ...
- Vue 组件复用性和slot
1.组件可复用 2.slot元素作为组件模板之中的内容分发插槽,元素自身可以被替换 <!DOCTYPE html> <html lang="en"> < ...
- vue 组件复用 - component
vue 组件复用 - component vue 组件复用 就是对 component 标签的使用 先看图 下图看使用 结果: 可以看到 在箱包 这一项,我将banner 组件用了两次,我 每次 点击 ...
- vue组件最佳实践
看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...
- 【Vue】详解Vue组件系统
Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...
- 关于vue组件的一个小结
用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维 ...
- vue组件详解(四)——使用slot分发内容
一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer>& ...
- vue2.0 如何自定义组件(vue组件的封装)
一.前言 之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼 ...
- vue组件详解——使用slot分发内容
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app& ...
随机推荐
- UTF-8字符「EF BF BD」-备胎
在众多的utf-8码点值中,除了ascii,你还应该记住「EF BF BD」,因为它是很多编程语言以及库中的备胎,即无效的码点值在编码的时候会默认用这个码点值进行替换,即utf-8中的超级「备胎」(R ...
- Linux基础系列-Day7
NFS服务(基于CentOS 7.0) NFS(Network File System),网络文件系统,是linux与linux之间进行文件共享的服务,在NFS应用,本地NFS的客户端可以透明地读写位 ...
- SSH服务审计工具ssh-audit
SSH服务审计工具ssh-audit SSH服务是常见的远程访问服务.通过对SSH服务进行审计,可以尝试发现对应的漏洞.Kali Linux新增一款SSH服务审计工具ssh-audit.该工具支持 ...
- 【Splay】Codeforces Round #424 (Div. 1, rated, based on VK Cup Finals) B. Cards Sorting
Splay要支持找最左侧的最小值所在的位置.类似线段树一样处理一下,如果左子树最小值等于全局最小值,就查左子树:否则如果当前节点等于全局最小值,就查当前节点:否则查右子树. 为了统计答案,当然还得维护 ...
- java程序中没有错,但是项目上面显示一个红叉的解决办法
错误信息: 报Description Resource Path Location Type Java compiler level does not match the version of th ...
- 如何在form初始化时自动隐藏FOLDER列
方法1:直接设定PROMPT列和数据列ITEM的VISIBLE属性为No 方法2:在WHEN-NEW-FORM-INSTANCE触发器里: l_old_itm := :system.cursor_it ...
- 轻量级web服务器lighttpd的编译及配置(for x86-linux)
转自:http://blog.163.com/ljf_gzhu/blog/static/131553440201211522317367/ 备注: PC Linux:Ubuntu-10.10 Linu ...
- UITabBarController 和 UINavigationController 的详解
首先得搞清这两个控制器之间的层级关系,我们直接看官网给的图,如下所示: 从这张图可以看到:最右边的Assembled views是呈现给用户的界面,它左边的Window是最底层的窗口,重点来了,再往左 ...
- mac远程链接 windows
https://bbs.feng.com/read-htm-tid-10516042.html 一.利用电脑系统自带的远程(喜欢懒人版的方法,或者小白用户,可以跳过这个方法看下一个) 1.打开mac, ...
- Linux音频驱动简述
一.数字音频 音频信号是一种连续变化的模拟信号,但计算机仅仅能处理和记录二进制的数字信号.由自然音源得到的音频信号必须经过一定的变换,成为数字音频信号之后,才干送到计算机中作进一步的处理. 数字音频系 ...