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& ...
随机推荐
- Mysql远程连接报错:SQL Error (1130): Host '192.168.6.128' is not allowed to connect to this MySQL server
通过SQLyog连接linux中的MySQL报错问题:SQL Error (1130): Host '192.168.6.128' is not allowed to connect to this ...
- Unity做360度的全景照片
这里推荐两种方法,第一种是用鼠标滑动,第二种是用手机的陀螺仪进行全景查看 第一种: 1.新建一Sphere,然后为其赋予材质,注意材质的Shader类型为:Mobile/particles/Alpha ...
- python 打包详解
基本步骤: 1. 写setup.py 2. 运行“python setup.py sdist” 3. 在当前目录下会生成文件夹“dist”,打包好的代码就在dist中,以“.tar.gz”的形式被压缩 ...
- [TCO2013]TrickyInequality
$\newcommand{stirf}[2]{{{#1}\brack{#2}}}$$\newcommand{stirs}[2]{{{#1}\brace{#2}}}$题意:$\sum\limits_{i ...
- 【OpenJudge9270】【Pku2440】【递推】DNA
DNA [描述] A kind of virus has attacked the X planet, and many lives are infected. After weeks of stud ...
- SpringBoot使用Gradle构建war包
Spring Boot默认将应用打包成可执行的jar包.有时候需要打包成war包部署在tomcat等容器.下面简单介绍下打包的步骤. 一.修改gradle.build文件 1.1 添加如下配置 app ...
- mqtt 协议之 PINGREQ, PINGRESP
mqtt 协议里最简单的是 ping 协议吧 (心跳包), ping 协议是已连接的客户端发往服务端, 告诉服务端,我还"活着" PINGREQ - PING request fi ...
- [标准性文档]WEB应用安全验证标准
这是根据OWASP ASVS翻译过来的,可作为WEB应用开发的验收标准(未包含具体细节),值得注意的是,验收标准并非越严格越好,应根据企业自身的业务需求判定. WEB应用安全验证标准 安全验证等级的定 ...
- asp.net core 1.0初识
本文将对微软下一代ASP.NET框架做个概括性介绍,方便大家进一步熟悉该框架. 在介绍ASP.NET Core 1.0之前有必要澄清一些产品名称及版本号.ASP.NET Core1.0是微软下一代AS ...
- [Android Pro] 获取手机已经安装的应用 和 获取当前正在运行的所有进程（一个uid对应多个pid）
1: 获取PackageManager 获取全部静态已安装的应用: PackageManager pm = getPackageManager(); List<PackageInfo> i ...