Vue系列之 => vue组件创建
创建方式 一
<!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="./lib/jquery2.1.4.min.js"></script>
<script src="./lib/Vue2.5.17.js"></script>
<link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">
</head> <body>
<div id="app">
<!-- 如果要使用组件，直接把组件的名称以HTML标签的形式，引入到页面中即可 -->
<!-- 注册组件使用的驼峰命名，在引用的时候要用 - 分开并转换成小写 -->
<my-com1></my-com1>
</div>
<script>
// 1.1 使用Vue.extend来创建全局的Vue组件。
var com1 = Vue.extend({
template : '<h1>这是组件化的</h1>'
})
//1.2 使用Vue.component('组件的名称,创建出来的组件模板对象)
Vue.component('myCom1',com1) //另一种写法
// Vue.component('myCom1',Vue.extend({
// template : '<h1>这是组件化的</h1>'
// })) var vm = new Vue({
el: '#app',
data: {},
methods: { },
})
</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="./lib/jquery2.1.4.min.js"></script>
<script src="./lib/Vue2.5.17.js"></script>
<link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">
</head> <body>
<div id="app">
<!-- 使用标签形式引入组件 -->
<mycom2></mycom2>
</div>
<script>
Vue.component('mycom2',{
// 任何方式创建的组件必须只能有一个根元素
// 错误 ：-> template : '<h1>这是组件化的</h1><span>123</span>'
template : '<div><h1>这是组件化的</h1><span>123</span></div>'
}) var vm = new Vue({
el: '#app',
data: {},
methods: { },
})
</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="./lib/jquery2.1.4.min.js"></script>
<script src="./lib/Vue2.5.17.js"></script>
<link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">
</head> <body>
<div id="app">
<!-- 以标签的形式 引用组件 -->
<mycom3></mycom3>
</div> <!-- 在被VUE控制的app外层，使用template元素定义组件的模板结构 -->
<template id="tmp">
<div>
<h1>这是通过template元素在外部定义的组件结构，这个方式有代码的智能提示和高亮</h1>
<h4>这是一个h4标签</h4>
</div>
</template> <script>
Vue.component('mycom3',{
template : '#tmp'
})
var vm = new Vue({
el: '#app',
data: {},
methods: { },
})
</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="./lib/jquery2.1.4.min.js"></script>
<script src="./lib/Vue2.5.17.js"></script>
<link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">
</head> <body>
<div id="app1">
<login></login>
</div> <div id="app">
<!-- 以标签的形式 引用组件 -->
<mycom3></mycom3>
</div> <!-- 在被VUE控制的app外层，使用template元素定义组件的模板结构 -->
<template id="tmp">
<div>
<h1>这是通过template元素在外部定义的组件结构，这个方式有代码的智能提示和高亮</h1>
<h4>这是一个h4标签</h4>
</div>
</template>
<template id="tmp1">
<div>
<h1>这是私有组件template渲染的</h1>
</div>
</template>
<script>
Vue.component('mycom3',{
template : '#tmp'
})
var vm = new Vue({
el: '#app',
data: {},
methods: { },
}) var vm2 = new Vue({
el : '#app1',
data : {},
methods : {},
filters : {}, //过滤器
directives : {}, //指令
components : { //私有组件
// login 组件名
login : {
template : '#tmp1'
}
}, // 钩子函数
beforeCreate() {},
created(){},
beforeMount(){},
mounted(){},
beforeUpdate(){},
updated(){},
beforeDestroy(){},
destroyed(){},
})
</script>
</body> </html>
Vue系列之 => vue组件创建的更多相关文章
- Vue系列：Vue Router 路由梳理
Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数. ...
- Vue系列---理解Vue.nextTick使用及源码分析(五)
_ 阅读目录 一. 什么是Vue.nextTick()? 二. Vue.nextTick()方法的应用场景有哪些? 2.1 更改数据后,进行节点DOM操作. 2.2 在created生命周期中进行DO ...
- vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)
_ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...
- Vue系列之 => 父组件向子组件传值
父组件向子组件传递数据 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta c ...
- Vue 系列(一): Vue + Echarts 开发可复用的柱形图组件
目录 前置条件 安装echarts 引入echarts 柱形图组件开发 在何时初始化组件? 完整的代码 记得注册组件!!! 本文归柯三(kesan)所有,转载请注明出处 https://www.cnb ...
- Vue系列——在vue项目中使用echarts
该示例使用 vue-cli 脚手架搭建 安装echarts依赖 npm install echarts -S 或者使用国内的淘宝镜像安装 npm install -g cnpm --registry= ...
- [js高手之路] vue系列教程 - vue的基本用法与常见指令(1)
本系列课程选用vue的版本为1.0.21, 什么是vue? vue是由尤雨溪开发的一款基于MVVM的框架,M->模型,V->视图, 也就是说模型数据改变了,视图也跟着改变, 视图内容改变, ...
- vue系列之vue cli 3引入ts
插件 Vue2.5+ Typescript 引入全面指南 vue-class-component强化 Vue 组件,使用 TypeScript/装饰器 增强 Vue 组件 vue-property-d ...
- [js高手之路] vue系列教程 - vue的事件绑定与方法(2)
一.在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我们可以这样子做 window.onload = function () { var c = new Vue({ el : 'b ...
随机推荐
- Java代码中获取Json的key值
测试json字符串: {"access_token":"hkbQl5o_l67dZ7_vJRATKBwTLk9Yj5QyMuOJThAr8Baj0xWf4wxW1p4ym ...
- # 20165225 《Java程序设计》第一周学习总结
20165225 <Java程序设计>第一周学习总结 1.视频与课本中的学习: 首先是为了运行和开发Java分别安装了JRE和JDK,具体做法在老师给的<Java2 实用教程(第五版 ...
- 【PyQt5-Qt Designer】浅谈关闭窗口
1.关闭全部窗口(主窗口+所有的子窗口) 在逻辑界面中写入 sys.exit(0) 2.关闭子窗口(其他窗口不关闭) self.close()
- Web项目开发中常见安全问题防范
本文章纯粹是个人收藏,其中各种也是略略了解,下面直接贴出知识点./捂脸/捂脸 计算机程序主要就是输入/输出,安全问题由此产生,凡是有输入的地方都可能带来安全风险.根据输入的数据类型,web应用主要有数 ...
- es定制排序搜索结果
GET /company/employee/_search { "query": { "constant_score": { "filter" ...
- java public,default,protected,private区别
温习一下:https://www.cnblogs.com/ldq2016/p/6872420.html
- 【Linux】测试环境如何搭建？
[Linux]测试环境如何搭建? (该文档所在我的百度网盘位置: ) 通常面试会问到会不会搭建测试环境?到底啥是测试环境搭建呢,其实测试环境没有想像的那么高大上,弄个 tomcat,把测试的 war ...
- 配置SQL Server 2016无域AlwaysOn（转）
Windows Server 2016 以及 SQL Server 2016出来已有一段时间了,因为Windows Server 2016可以配置无域的Windows群集,因此也能够以此来配置无域的S ...
- 007-docker-安装-mysql:5.6
1.搜索镜像 docker search mysql 2.拉取合适镜像 docker pull mysql:5.6 docker images 3.使用镜像 docker run -p 3306:33 ...
- 005-docker-镜像使用、拉取、运行、创建、打tag
当运行容器时,使用的镜像如果在本地中不存在,docker 就会自动从 docker 镜像仓库中下载,默认是从 Docker Hub 公共镜像源下载. 1.列出所有本地镜像 docker images ...