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 ...
随机推荐
- linux（ubuntu） 安装composer（PHP用来管理依赖关系的工具 ） 和安装中国全量镜像
https://www.phpcomposer.com/ composer中文网 1:进入安装目录 cd /usr/local/bin 2:下载并安装 sudo curl -s http ...
- NEERC-2017
A. Archery Tournament 用线段树套set维护横坐标区间内的所有圆,查询时在$O(\log n)$个set中二分查找即可. 时间复杂度$O(n\log^2n)$. #include& ...
- 配置ssh框架启动tomcat服务器报异常Unable to create requested service [org.hibernate.engine.jdbc.env.spi.JdbcEnvironment]
在Spring中配置jdbc时,引用的是dbcp.jar包,在db.properties配置文件中,使用了之前的properties配置文件的用户名username(MySql用户名) 然后在启动服务 ...
- oracle12c
12c和11g环境是一样的,请参考前面 一.设置环境变量 vim /home/oracle/.bashrc ORACLE_BASE=/data/app/oracle ORACLE_HOME=$ORAC ...
- linux 编译静态库及动态库例子--from周立功文档
/* hello1.c */#include <stdio.h>int hello1 (void){printf("hello 1!\n");return 0;}/* ...
- SpringBoot中使用springfox+swagger2书写API文档
随着前后端的分离,借口文档变的尤其重要,springfox是通过注解的形式自动生成API文档,利用它,可以很方便的书写restful API,swagger主要用于展示springfox生成的API文 ...
- mvc模式的理解
一开始总是觉得dao层和service层没有区别,甚至觉得service层根本就是多余的,service层就是把dao层的内容调用了一下,然后重写了一次,后来才理解到,dao层是数据链路层,是与数据库 ...
- 【C++】满二叉树问题
/* 给出一棵满二叉树的先序遍历,有两种节点:字母节点(A-Z,无重复)和空节点(#).要求这个树的中序遍历.输出中序遍历时不需要输出#. 满二叉树的层数n满足1<=n<=5. Sampl ...
- Linux Shell 用法
目录 Shell test 命令 数值测试 字符串测试 文件测试 函数返回值 Shell test 命令 Shell中的 test 命令用于检查某个条件是否成立,它可以进行数值.字符和文件三个方面的测 ...
- 技术Leader相关文章和思考
参考文章: 你与优秀的技术Leader之间只差这一个“图谱” 如何成为优秀的技术主管?你要做到这三点