Vue组件的定义、注册和调用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组件</title>
</head>
<body>
</body>
</html>
<body>
<div id="app">
<heads></heads><!--3.组件在注册的父组件模板里以标签的形式调用-->
</div>
</body>
</html>
<script type="text/javascript" src="js/vue.js"></script>
<!--0.定义模板-->
<script type="text/template" id="temp1"><!--该script类型是模板-->
<div><!--该处只能有两个顶层标签，即不能有同级的其他标签如<div></div><div></div>-->
<h3>头部</h3>
<p>{{mes}}</p><!--组件的data值在模板中调用-->
</div>
</script>
<!--<template id="temp1"></template>该标签可以代替script模板-->
<script>
//1.定义一个组件，子组件的定义必须在父组件的前面，因为在父组件注册时要用到定义好 的子组件
var Heads={//组件名首字母大写，不能用html5标签
template:"#temp1",//模板，和组件用id进行关联
data:function(){//数据的格式必须是函数
return{//这里必须是return
mes:"数据"//值在模板中调用
}
}
}
//2.注册组件
var app = new Vue({//app是最大的组件 根组件，拥有特殊的el属性
el:"#app",
data:{
msg:"hello"
},
components:{//英文组件的意思,子组件注册到父组件下，注册到app下就要在app容器下以标签的形式调用
heads:Heads//键和值
}
})
</script>
Vue组件的定义、注册和调用的更多相关文章
- vue学习—组件的定义注册
组件的定义注册 效果: 方法一: <div id="box"> <v-header></v-header> <hr /> <b ...
- vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件
vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...
- vue 组件内 directives指令的调用方式 <base-table v-auto-height:tableHeight="{vm:this, diffHeight:ahTable.diffHeight}"
vue 组件内 directives指令的调用方式 <base-table v-auto-height:tableHeight="{vm:this, diffHeight:ahTabl ...
- Vue组件全局/局部注册
全局注册 main.js中创建 Vue.component('button-counter', { data: function () { return { count: 0 } }, templat ...
- vue 组件的定义
1.什么是组件? 组件的出现,就是为了拆分vue实例的代码量的,能够让我们以不同的组件来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可. 2.组件化和模块化的不同? 模块化: ...
- Vue组件的定义方式
1.使用template标签定义组件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- 来吧！一文彻底搞定Vue组件！
作者 | Jeskson 来源 | 达达前端小酒馆 Vue组件的概述 组件是什么呢,了解组件对象的分析,Vue组件中的data属性,props传递数据的原理到底是什么. 事件通信的那些事 如何了解父子 ...
- Vue.js高效前端开发 • 【Vue组件】
全部章节 >>>> 文章目录 一.Vue组件介绍 1.组件概述 2.组件使用步骤 3.实践练习 一.Vue组件使用 1.组件注册 2.组件注册语法糖 3.使用script或te ...
- Laravel 项目中编写第一个 Vue 组件
和 CSS 框架一样,Laravel 不强制你使用什么 JavaScript 客户端框架,但是开箱对 Vue.js 提供了良好的支持,如果你更熟悉 React 的话,也可以将默认的脚手架代码替换成 R ...
随机推荐
- 移动端click事件清除
http://blog.csdn.net/zfy865628361/article/details/49512095
- 07-Python入门学习-字符编码与文件处理
字符编码 人操作计算机使用人类认识的字符,而计算机存放都是二进制数字所以人在往计算机里输入内容的时候,必然发生: 人类的字符------(字符编码表)-------->数字 比如我输入一个‘上’ ...
- Echarts跟随容器自适应大小问题
窗口大小改变市echarts图表常常会溢出,这时候会很难看,于是查看文档和百度下后,有如下解决方案: var myChart = echarts.init(document.getElementByI ...
- ECMA Script 6_解构赋值_模式匹配
解构赋值 从数组中提取值,按照对应位置,对变量赋值 只要等号右边的值不是对象或数组,就先将其转为对象. 由于 undefined 和 null 无法转为对象,所以对它们进行解构赋值,都会报错 let ...
- 关于finally代码块是否一定被执行的问题
一般来说,只要执行了try语句,finally就会执行 但是,有以下几种情况需要特殊考虑 具体例子看链接 点击这里 第一点 try代码块没有被执行,意思就是错误在try代码块之前就发生了. 第二点 ...
- leetcode 单链表相关题目汇总
leetcode-19-Remove Nth From End of List—移除链表中倒数第n个元素 leetcode-21-Merge Two Sorted Lists—两个已排序链表归并 ...
- OO第三次博客作业
一.规格化的发展历史 最早的程序设计都是面向机器,从一开始使用的机器语言,到后面的汇编语言,都是面向机器的语言,编写困难也容易出错.随着需求的发展,程序的编写从面向机器走向面向过程,但由于goto语句 ...
- Jumpserver之快速入门
一,系统设置 1.1基本设置 修改 url 的"localhost"为你的实际 url 地址, 否则邮件收到的地址将为"localhost" 也无法创建新用户 ...
- java_基础_类加载
类加载:Java命令的作用是启动虚拟机,虚拟机通过输入流,从磁盘上将字节码文件(.class文件)中的内容读入虚拟机,并保存起来的过程就是类加载. 类加载特性 : *在虚拟机的生命周期中一个 ...
- C#的托管与非托管大难点
托管代码与非托管代码 众所周知,我们正常编程所用的高级语言,是无法被计算机识别的.需要先将高级语言翻译为机器语言,才能被机器理解和运行.在标准C/C++中,编译过程是这样的:源代码首先经过预处理器,对 ...