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 ...
随机推荐
- lArea.js 城市选择
http://blog.csdn.net/libin_1/article/details/50689075 lArea.js
- Face The Right Way [POJ3276] [开关问题]
题意: 有n头奶牛排成一排,有的朝前(F)有的朝后(B),现在你可以使k头奶牛一次性翻转朝向(n>=k>=1),问你最少的翻转次数和此时对应的k值. Input Line 1: A sin ...
- Nested Dolls 贪心 + dp
G: Nested Dolls Time Limit: 1 Sec Memory Limit: 128 Mb Submitted: 99 Solved: 19 Descript ...
- php 常用正则
1 手机 /^1[34578]\d{9}$/2 qq /^[1-9][0-9]{5,10}$/3 邮箱 /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za ...
- Oracle SQL 内置函数大全(转)
SQL中的单记录函数 1.ASCII 返回与指定的字符对应的十进制数;SQL> select ascii('A') A,ascii('a') a,ascii('0') zero,ascii(' ...
- Python练手例子（3）
13.打印出所有的"水仙花数",所谓"水仙花数"是指一个三位数,其各位数字立方和等于该数本身.例如:153是一个"水仙花数",因为153=1 ...
- Spring-注入
一.Spring的基本介绍:Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson创建.简单来说,Spring是一个分层的JavaSE/ ...
- Lecture6.概率极限理论
一.随机变量序列的收敛性 1.定义 (1)概率为1收敛: 如果$P{\lim\limits_{n \to \infty}X_n = X} = 1$,则称{Xn}概率为1地收敛于X,或几乎处处(几乎必然 ...
- js表单提交到后台对象接收
$.extend({ StandardPost:function(url,args){ var form = $("<form method='post' target='_blank ...
- AIROBOT系统 之 私人存储 和 DLNA 智能电视云
需求背景 工作多年之后发现有太多的电子资料到处存放.个人电脑是Mac,硬盘都不大,放不了太多东西.并且有时候想随时随地存放一些东西.所有就有了大家一个私有存储的需求 个人休息在家经常喜欢看电影电视剧, ...