<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script src="vue.js"></script>
<body>
<div id="app">
<!-- 如果要使用组件,直接把组件的名称,以HTML标签的形式,引用到页面中去,即可 -->
<!-- 注意使用规则 -->
<!-- // 注意:如果使用vue.componentd定义全局组件的时候,组件使用了驼峰命名,则在引用的时候,需要把大写的驼峰改为小写字母同时,
// 在两个单词之间用-链接;如果不使用驼峰,则直接拿名称来使用即可 -->
<my-com1></my-com1>
<!-- <myCom1></myCom1> -->
</div>
<script>
// 1.使用vue.extend来创建全局组件
var com1= Vue.extend({
template:'<div><h1>这是直接用Vue.componet创建出来的组件</h1><span>123</span></div>'
// 通过temolate属性;指定了组件要展示的html结构
})
// 返回一个模板对象
// 1.2使用vue.componnet('组件名称',创建出来的组件模板对象);然后注册一个组件
Vue.component('myCom1',com1)
// 注意:如果使用vue.componentd定义全局组件的时候,组件使用了驼峰命名,则在引用的时候,需要把大写的驼峰改为小写字母同时,
// 在两个单词之间用-链接;如果不使用驼峰,则直接拿名称来使用即可
var vm=new Vue({
el:'#app',
data:{
msg:'父组件中的数据123'
},
})
</script>
</body>
</html>

简写方式

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script src="vue.js"></script>
<body>
<div id="app">
<!-- 如果要使用组件,直接把组件的名称,以HTML标签的形式,引用到页面中去,即可 -->
<!-- 注意使用规则 -->
<!-- // 注意:如果使用vue.componentd定义全局组件的时候,组件使用了驼峰命名,则在引用的时候,需要把大写的驼峰改为小写字母同时,
// 在两个单词之间用-链接;如果不使用驼峰,则直接拿名称来使用即可 -->
<my-com1></my-com1>
<!-- <myCom1></myCom1> -->
</div>
<script>
// 1.使用vue.extend来创建全局组件
// var com1= Vue.extend({
// template:'<div><h1>这是直接用Vue.componet创建出来的组件</h1><span>123</span></div>'
// // 通过temolate属性;指定了组件要展示的html结构
// })
// // 返回一个模板对象
// // 1.2使用vue.componnet('组件名称',创建出来的组件模板对象);然后注册一个组件
// Vue.component('myCom1',com1)
// 上面的写法可以简化为
Vue.component('myCom1',Vue.extend({
template:'<div><h1>这是直接用Vue.componet创建出来的组件</h1><span>123</span></div>'
// 通过temolate属性;指定了组件要展示的html结构
}))
// 注意:Vue.component第一个参数:组件的名称,将来在引用组件的时候,就是一个标签形式来引入它的
// 第二个参数是:Vue.extend创建的组件,其中tempalte就是组件将来要展示的html内容
var vm=new Vue({
el:'#app',
data:{
msg:'父组件中的数据123'
},
})
</script>
</body>
</html>

组件的创建方式第二种方式

vue.component

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue.js"> </script>
</head>
<body>
<div id="app">
<!-- 还是使用标签的形式引用自己的组件 -->
<mycom2></mycom2>
</div>
<script>
Vue.component('mycom2',{
template:'<div><h1>这是直接用Vue.componet创建出来的组件</h1><span>123</span></div>'
// 注意:无论是哪种方式创建的组件,组件的tempalte属性指向的模板内容,必须有且只能有唯一的一个根元素
})
var vm=new Vue({
el:'#app'
}) </script>
</body>
</html>

组件的创建方式第三种方式:把模板抽离出去的方式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue.js"> </script>
</head>
<body>
<div id="app">
<mycom3></mycom3>
</div>
<!-- 注意:在被控制的#app外面,使用template元素,定义组件的html模板结构 -->
<template id="temp1">
<div>
<h1>这是通过tempale元素,在外部定义的组件结构,这个方式,有代码的只能提示和高亮</h1>
<span>好用,不错</span>
</div>
</template>
<script>
Vue.component('mycom3',{
template:'#temp1'
})
var vm=new Vue({
el:'#app'
}) </script>
</body>
</html>

注意:以上是全局组件的创建方式

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue.js"> </script>
</head>
<body>
<div id="app">
<mycom3></mycom3>
</div>
<div id="app2">
<mycom3></mycom3>
</div>
<!-- 注意:在被控制的#app外面,使用template元素,定义组件的html模板结构 -->
<template id="temp1">
<div>
<h1>这是通过tempale元素,在外部定义的组件结构,这个方式,有代码的只能提示和高亮</h1>
<span>好用,不错</span>
</div>
</template>
<script>
Vue.component('mycom3',{
template:'#temp1'
})
var vm=new Vue({
el:'#app'
})
var vm2=new Vue({
el:'#app2'
}) </script>
</body>
</html>

下面来看下怎么定义局部组件

使用components定义私有组件

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue.js"> </script>
</head>
<body>
<div id="app">
<mycom2></mycom2>
<!-- <login></login> -->
<!-- 注释这里会报错,因为他是vm2实例的私有组件 -->
</div>
<div id="app2">
<mycom2></mycom2>
<login></login>
</div>
<script>
// 全局组件
Vue.component('mycom2',{
template:'<div><h1>这是直接用Vue.componet创建出来的全局组件</h1><span>123</span></div>'
// 注意:无论是哪种方式创建的组件,组件的tempalte属性指向的模板内容,必须有且只能有唯一的一个根元素
}) var vm=new Vue({
el:'#app'
});
var vm2 =new Vue({
el:'#app2',
components:{
// 定义实例内部的私有组件
login:{
// template:'#temp2'
template:'<h1>这是私有的login组件</h1>'
}
}
})
</script>
</body>
</html>

可以把私有组件的模板分离出去  改写成这样

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue.js"> </script>
</head>
<body>
<div id="app">
<mycom2></mycom2>
<!-- <login></login> -->
<!-- 注释这里会报错,因为他是vm2实例的私有组件 -->
</div>
<div id="app2">
<mycom2></mycom2>
<login></login>
</div>
<template id="temp2">
<h1>这是私有的login组件</h1>
</template>
<script>
// 全局组件
Vue.component('mycom2',{
template:'<div><h1>这是直接用Vue.componet创建出来的全局组件</h1><span>123</span></div>'
// 注意:无论是哪种方式创建的组件,组件的tempalte属性指向的模板内容,必须有且只能有唯一的一个根元素
}) var vm=new Vue({
el:'#app'
});
var vm2 =new Vue({
el:'#app2',
components:{
// 定义实例内部的私有组件
login:{
template:'#temp2'
// template:'<h1>这是私有的login组件</h1>'
}
}
})
</script>
</body>
</html>

vue组件创建学习总结的更多相关文章

  1. 黑马vue---56-58、vue组件创建的三种方式

    黑马vue---56-58.vue组件创建的三种方式 一.总结 一句话总结: 不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素 1.使用 Vu ...

  2. 使用VUE组件创建SpreadJS自定义单元格(二)

    在上篇中,我们介绍了如何通过设置runtimeCompiler为true,在Vue中实现了动态创建电子表格组件.想了解具体内容可看点击查看使用VUE组件创建SpreadJS自定义单元格(一). 但是在 ...

  3. vue组件创建的三种方式

    1.使用Vue.extend创建全局的Vue组件 //1.1 使用vue.extend创建组件 var com1 = Vue.extend({ //通过template属性指定组件要展示的html结构 ...

  4. Vue系列之 => vue组件创建

    创建方式 一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  5. vue 组件创建与销毁

    vue 组件(如对话框组件)实时创建与销毁: 使用v-if <search-history :show="showSearchHistory" @close="sh ...

  6. Vue组件创建和组件传值

    Vue创建组件的方式 使用Vue.Extend()和Vue.component全局注册组件 首先我们定义一个组件并接收 var com1 =Vue.extend({ template:"&l ...

  7. JS vue 组件创建过程

    https://www.jianshu.com/p/3504a1edba42 vue.js原生组件化开发(一)——组件开发基础 0.3472017.05.09 12:00:54字数 1120阅读 33 ...

  8. 使用VUE组件创建SpreadJS自定义单元格(一)

    作为近五年都冲在热门框架排行榜首的Vue,大家一定会学到的一部分就是组件的使用.前端开发的模块化,可以让代码逻辑更加简单清晰,项目的扩展性大大加强.对于Vue而言,模块化的体现集中在组件之上,以组件为 ...

  9. VUE组件的学习

    参考:https://blog.csdn.net/baidu_23142899/article/details/79130225

随机推荐

  1. selenium新手常遇到的坑

    本文是以Chrome为例: 1.Chrome相对应的chromedriver的版本信息[点击浏览器的右上角的浏览器信息--------帮助-------关于Google Chrome查看相对应的信息- ...

  2. 导出CSV 换行问题。

    程序方面: 1.Windows 中的换行符"\r\n" 2.Unix/Linux 平台换行符是 "\n". 3.MessageBox.Show() 的换行符为 ...

  3. struts2简单入门-执行流程

    简单的执行流程图

  4. png

  5. Basic Calculator I && II && III

    Basic Calculator I Implement a basic calculator to evaluate a simple expression string. The expressi ...

  6. JQuery EasyUI 表单

    EasyUI 创建异步提交表单 ♦ 通过使用 easyui 表单插件来改变表单为 ajax表单. 表单提交所有字段到后台服务器,服务器处理和发送一些数据返回到前端页面.我们接收返回数据,并将它显示出来 ...

  7. 【原创】大叔算法分享(5)聚类算法DBSCAN

    一 简介 DBSCAN:Density-based spatial clustering of applications with noise is a data clustering algorit ...

  8. PYTHON-进程 子进程

    并发编程 学习目标: 见35复习 1.操作系统 什么是操作系统 操作系统的两大作用: 批处理操作系统: 操作系统发展史: 多道技术***** 产生背景: 两大核心点: 应用软件的优化的核心:***** ...

  9. sublime自动保存设置

    首选项——用户设置 (Preferences:Settings - User) 行末添加"save_on_focus_lost": true 注意用逗号分隔 保存即可 save_o ...

  10. Mysql基本架构及查询流程

    mysql体系结构简单概述: Connectors:接入方,支持协议很多 Management Serveices & Utilities:系统管理和控制工具例如:备份恢复,mysql复制集群 ...