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 ...
随机推荐
- GMA Round 1 波动函数
传送门 波动函数 f(x)是一个定义在R上的偶函数,f(x)=f(2-x),当$x\in[-1,1]$时,f(x)=cos(x),则函数$g(x)=f(x)-|cos(\pi x)|$,求g(x)在[ ...
- __x__(15)0906第三天__超链接
HTML5 中的新属性. 属性 值 描述 charset char_encoding HTML5 中不支持.规定被链接文档的字符集. coords coordinates HTML5 中不支持.规定链 ...
- JS节流和防抖
事件的触发权很多时候都属于用户,有些情况下会产生问题: 向后台发送数据,用户频繁触发,对服务器造成压力 一些浏览器事件:window.onresize.window.mousemove等,触发的频率非 ...
- 24 GISer必备知识（一） 坐标系
对于经常使用ArcMap的童鞋,肯定用过属性表中的计算几何的功能,但是有时候会提示面积计算与长度计算禁用 但是选择的明明是 Xian 1980坐标系,这是为什么呢?下面就来讲一讲这些个经常让人“头大” ...
- python语法_字符串
字符串 a = 'asdb' #双引号和打印号没区别, 操作 "abc"*2 打印两遍"abc" #字符串 加* 重复打印字符串 “abc”[2:1] #切片 ...
- andorid简易定位
权限: <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"></use ...
- JDK8之The type java.util.Map$Entry cannot be resolved
eclipse+tomcat7+jdk1.6上面报错的方式我的解法方法是吧jre8换成6的就好了选中项目->右键->java build path ->找到jre system li ...
- Kruskal || BZOJ 1601: [Usaco2008 Oct]灌水 || Luogu P1550 [USACO08OCT]打井Watering Hole
题面:P1550 [USACO08OCT]打井Watering Hole 题解:无 代码: #include<cstdio> #include<cstring> #includ ...
- yii2安装与初始化
yii2安装与初始化-Yii2学习笔记(一) 一.安装项目: 使用composer下载安装yii2 advanced安装包: composer create-project yiisoft/yii ...
- 2018-2019-2-20175303 实验一 《Java开发环境的熟悉》实验报告
2018-2019-2-20175303 实验一 <Java开发环境的熟悉>实验报告 一.实验内容及步骤 实验1 1.用mkdir建立“20175303exp1”的目录 2.在“20175 ...