vue2.0学习笔记之组件
2024-10-17 21:38:56
【易错点】：
1. 组件内html代码片段超过一个标签时必须套一个根元素，即template模板子元素只能是一个。
2. 组件名称采用横杠间隔命名时，第一个字母大写会报错。
写法一：全局组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<Demo></Demo>
</div>
</body>
<script src="vue.js"></script>
<script>
Vue.component("Demo",{
template:"<h3>全局组件</h3>"
})
new Vue({
el:"#app"
})
</script>
</html>
写法二：全局组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<my-temp></my-temp>
</div>
<template id="DemoTemp">
<h3>全局组件</h3>
</template>
</body>
<script src="vue.js"></script>
<script>
var Home = {
template:"#DemoTemp"
};
Vue.component("my-temp",Home)
new Vue({
el:"#app"
})
</script>
</html>
写法三：局部组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<my-temp></my-temp>
</div>
<template id="DemoTemp">
<h3>局部组件</h3>
</template>
</body>
<script src="vue.js"></script>
<script>
var Home = {
template:"#DemoTemp"
};
// Vue.component("my-temp",Home)
new Vue({
el:"#app",
components:{
"my-temp":Home
}
})
</script>
</html>
最新文章
- 修改cms 管理栏目路径
- 。。。在学习新框架Spring MVC的感受。。。
- 【hibernate】之标注枚举类型@Enumerated(转载)
- ACMer(转)
- Leetcode: Length of Last Word in python
- Python爬虫第一集
- ByteBuffer使用之道
- 基于page的简单页面推送技术
- IIS7.5 asp+access数据库连接失败处理 64位系统
- The method of using code coverage tool
- MyEclipse13中修改Servlet.java源代码
- jst通用删除数组中重复的值和删除字符串中重复的字符
- python操作数据库之批量导入
- EularProject 43: 带条件约束的排列组合挑选问题
- VMware Workstation 14永久激活密钥
- iOS使用mask切割不规则图案
- haproxy acl访问限制IP
- unp的hello word
- ITOO高校云平台V3.1--项目总结（二）
- curl Array to string conversion 错误