Vue 什么是组件
Vue.js组件
组件的作用：组件是自定义元素，可扩展html元素，封装可复用的代码。
组件的注册一定要在初始化根实例之前，负责组件是不起作用的。
全局组件在初始化实例的时候被使用
局部组件仅在实例/组件作用域中可用
1、组件的注册
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="id">
<global></global>
<father></father>
</div>
</body>
<script>
Vue.component('global',{
template: '<div>注册全局组件</div>'
}) var partial = { //局部组件仅在一个实例/组件的作用域中可用
template: '<div>注册局部组件</div>'
} new Vue({
el: '#id',
components:{
'father':partial
}
})
</script>
</html>
2、DOM模板解释说明
当使用 DOM 作为模版时（例如，将 el 选项挂载到一个已存在的元素上）, 你会受到 HTML 的一些限制，因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模版内容。尤其像这些元素 <ul> ，<ol>，<table> ，<select> 限制了能被它包裹的元素， 而一些像 <option> 这样的元素只能出现在某些其它元素内部。
这时需要用到特殊的is属性
<table>
<my-row>...</my-row>
</table>
<!--上面的组件是无效的--> <table>
<tr is="my-row"></tr>
</table>
<!--上面的组件使用is属性才能被解析->
3、通过Vue构造器传入的各种选项大多数都可以在组件里用。 data 是一个例外，它必须是函数。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="id">
<simple-counter></simple-counter>
<simple-counter></simple-counter>
<simple-counter></simple-counter>
</div>
</body>
<script>
var data = { counter: 0 }
Vue.component('simple-counter', {
template: '<button v-on:click="counter += 1">{{ counter }}</button>',
// 技术上 data 的确是一个函数了，因此 Vue 不会警告，
data: function () {
//所有组件都是返回同意个对象
// return data
//为每个组件返回全新的对象
return{
counter:0
}
}
}) new Vue({
el: '#id'
})
</script>
</html>
Vue 什么是组件的更多相关文章
- Vue 给子组件传递参数
Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...
- Vue.js说说组件
什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTM ...
- Vue.js多重组件嵌套
Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...
- 基于Vue封装分页组件
使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} ...
- webpack入坑之旅（五）加载vue单文件组件
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- vue单文件组件的构建
在很多Vue项目中,我们使用 Vue.component 来定义全局组件,这种方式在很多中小规模的项目中运作的很好. 但当在更复杂的项目中,就有了很大的弊端. 我们就可以用文件扩展名 .vue的单文件 ...
- 【原】vue单文件组件互相通讯
在vue中,我们可以把一个页面各个部分单独封装起来,做成各种小组件,然后加载,这样的好处是代码维护起来比较容易,重复的代码多处调用! 在一个vue项目中,单文件组件以.vue形式文件命名 每个组件之间 ...
- vue.js之组件（上篇）
本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...
- [js高手之路] vue系列教程 - 组件定义与使用上部(7)
组件是vue框架比较核心的内容,那么什么是组件呢? 通俗点讲:组件是由一堆html, css, javascript组成的代码片段, 作用是为了实现模块的重用 组件的基本用法: <div id= ...
- Vue自己写组件——Demo详细步骤
公司近期发力,同时开了四五个大项目,并且都是用Vue来做的,我很荣幸的被分到了写项目公用模块的组,所以需要将公用的部分提取成组件的形式,供几个项目共同使用,下面详细讲一下写Vue组件的具体步骤. 一. ...
随机推荐
- IIPP迷你项目（二）"Guess the Number!"
本来这个程序是早就编完了的,一直没时间发布博客.时至今日已时隔多天,也算是复习一下事件驱动型编程的过程吧. 1 事件驱动型编程 本质上这次的作业是披着猜数字皮的图形化界面编程,好在 simplegui ...
- git是一种思路，解决问题的算法
w 首先,弄清思路.算法:这是高效学习.高效产出的方法.
- Windows下批处理文件(.bat)的使用
cmd文件和bat文件的区别:在本质上两者没有区别,都是简单的文本编码方式,都可以用记事本创建.编辑和查看.两者所用的命令行代码也是共用的,只是cmd文件中允许使用的命令要比bat文件多.cmd文件只 ...
- 一、Nuxt简介
1.Nuxt是什么 Nuxt.js是基于vue的服务器端渲染框架,常用来做SSR(服务器端渲染) 2.为什么用Nuxt Vue开发的SPA(单页应用)不利于搜索引擎的SEO优化 3 ...
- Python定时执行脚本
最近测试hbase,老发现服务挂掉,自己不能及时发现,想了想,写了个脚本,让脚本每个小时执行一次,以便检测是否有服务挂掉,如果有服务挂掉,及时启动 import os import datetime ...
- pgAgent设定定时备份
PostgreSQL定时自动备份 简介 PostgreSQL数据库中未提供数据库的定时备份功能,所以需要结合备份和定时job功能来共同实现. 这里我选取了2种定时job方式,crontab是Linux ...
- 理解java注解
@是java注解,即annotation. 注解功能可以理解为插件,是代码级别的插件,在类的方法上写:@XXX,就是在代码上插入了一个插件. Java注解是附加在代码中的一些元信息,用于一些工具在编译 ...
- ABAP锁，数据库锁
原文出自 江正军 技术博客,博客链接:www.cnblogs.com/jiangzhengjun ABAP数据锁定 SM12锁查看与维护 通用加锁与解锁函数 ABAP程序锁定 数据库锁 锁的分类和兼容 ...
- django内容总结
一.django请求的生命周期 1.django请求生命周期如图所示 2.django本身没有socket,客户端请求先到达wsgi然后再提交给django,而wsgi的本质就是个socket程序 注 ...
- swift的值类型和引用类型
前言 最近在学设计模式中,发现 Swift 中的 struct,class 以及 enum 在一般的使用中能够做到互相替换,因此探究其背后的逻辑就十分有必要.而这一问题又引出了 Swift 中的值类型 ...