我的书签
添加书签
移除书签源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>几个注意点</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
几个注意点：
1.关于组件名:
一个单词组成：
第一种写法(首字母小写)：school
第二种写法(首字母大写)：School
多个单词组成：
第一种写法(kebab-case命名)：my-school
第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
备注：
(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
(2).可以使用 name配置项 指定组件 在 开发者工具中 呈现的名字。
2.关于组件标签:
第1种写法 双标签形式： <school></school>
第2种写法 单标签形式(自闭合): <school/>
备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。
3.定义组件时，一个简写方式： //★
const school = Vue.extend(options) 可简写为：const school = options
-->
<!-- 准备好一个容器-->
<div id="root">
<h1>{{msg}}</h1>
<!-- 第3步: 使用组件 第1种写法 双标签形式 -->
第3步: 使用组件 第1种写法 双标签形式
<school></school>
<hr/>
<!-- 第3步: 使用组件 第2种写法 单标签形式(自闭合)-->
第3步: 使用组件 第2种写法 单标签形式(自闭合)
<school/>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
//第1步：定义组件
// 组件名: 如果使用一个字母,那么就使用小写.
/*const s = Vue.extend({
//定义组件内部名。该名字作用于 F12 Vue开发者工具查看Root时看到的组件名。
name:'atguigu',
template:`
<div>
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
`,
data(){
return {
name:'尚硅谷',
address:'北京'
}
}
})*/
//定义组件的简写形式: //该形式表面上没有调用 Vue.extend()，实际上调用了 Vue.extend()
const s = {
//定义组件内部名。该名字作用于 F12 Vue开发者工具查看Root时看到的组件名。
name:'atguigu',
template:`
<div>
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
`,
data(){
return {
name:'尚硅谷',
address:'北京'
}
}
}
new Vue({
el:'#root',
data:{
msg:'欢迎学习Vue!'
},
//第2步：注册组件
components:{
//注册的时候，组件名如果使用单词,那么第1个字母大写;
// 如果使用多个单词，那么全都小写,中间使用-分割，并且使用''包裹; 或者使用驼峰方式命名:首字母大写(需要借助脚手架)
//注册的时候，注册名是什么，那么在第3步使用的时候就要用该注册名。
//在注册组件的时候，底层会自动判断传入的对象s是否写了 Vue.extend()?如果写了Vue就直接拿过来用了，如果没有写，Vue会自动补上Vue.extend()
school:s
}
})
</script>
</html>