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 ...
随机推荐
- python-ironicclient使用
使用cli from ironicclient import client kwargs = {'os_username': 'ironic', 'os_password': 'IRONIC_PASS ...
- ElasticSearch + Canal 开发千万级的实时搜索系统
公司是做社交相关产品的,社交类产品对搜索功能需求要求就比较高,需要根据用户城市.用户ID昵称等进行搜索. 项目原先的搜索接口采用SQL查询的方式实现,数据库表采用了按城市分表的方式.但随着业务的发展, ...
- 构建Maven父子工程
IDEA构建maven父子工程: 1.打开IDEA,Create New Project 如图: 如果没有弹出新建界面,可以先 file-->Close Project 如图: 2.创建父 ...
- 重构file_get_contents实现一个带超时POST传值函数
function wp_file_post_contents($url, $post = null) { $context = array(); if (is_array($post)) { ksor ...
- What's the meaning of unqualified-id?
catch( const std::runtime_error & e) { .... } When compile, met an error: error: expected unqual ...
- Python 学习笔记9 循环语句 For in
For in 循环主要适用于遍历一个对象中的所有元素.我们可以使用它遍历列表,元组和字典等等. 其主要的流程如下:(图片来源于: https://www.yiibai.com/python/pytho ...
- WPF气泡样式弹窗效果
页面设计需求,做了一个气泡形状的弹出框,效果如下: 设计思路如下: 1. 使用Path绘制气泡的尖尖,将这个放到顶层: 2. 在用border绘制长方形框,将这个放到底层,并且设置Margin值,使得 ...
- SIM7600C读写本机号码
1 先发送AT+CPBS = "ON",表示要操作的是本机号码区域,而不是SIM的电话本 2 写入命令AT+CPBW=1,"1234567" 3 读取命令AT+ ...
- Elasticsearch学习笔记（七）document小结
一.生成document id 1.自动生成document id 自动生成的id,长度为20个字符,URL安全,base64编码,GUID,分布式系统并行生成时不可能 ...
- POJ2762 Going from u to v or from v to u? 强连通分量缩点+拓扑排序
题目链接:https://vjudge.net/contest/295959#problem/I 或者 http://poj.org/problem?id=2762 题意:输入多组样例,输入n个点和m ...