几个注意点:
1.关于组件名:
一个单词组成:
第种写法( 首字母小写): +school
第二种写法(首字母大写): School
多个单词组成:
第种写法(kebab-case命 名): my-school
第种写法(CamelCase命名): MySchool (需要Vue脚 手架支持)
备注:
(1).组件名尽可能回避HTML中已有的元素名称,例如: h2、 H2都不行。
(2).可以使用name配置项指定组件在开发者工具中呈现的名字。
2.关于组件标签:
第一 种写法:
第二种写法:
备注:不用使用脚手架时, 会导致后续组件不能渲染。
3.一个简写方式:
const school = Vue.extend( options)可简写为:const school = options
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2.几个注意点</title>
<script type="text/javascript" src="../js/vue.js"></script>
<link rel="shortcut icon" href="../ico—全图标/application/Burn.ico" type="image/x-icon">
</head>
<body>
<div id="root">
<h1>{{msg}}</h1>
<xuexiao></xuexiao>
<school></school>
</div>
<script type="text/javascript">
Vue.config.productionTip = false//阻止vue在启动时生成生产提示
//定义组件
const s = Vue.extend({
name:'utm boy',
template:`
<div>
<h2>学校名称:{{name}}<h2/>
<h2>学校地址:{{address}}<h2/>
</div>
`,
data(){
return {
name:'UTM',
address:'柔佛州新山市'
}
}
})
new Vue({
el:'#root',//e1用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串。
data:{
msg:'UTM欢迎你'
},
components:{
xuexiao:s
}
})
</script>
</body>
</html>
效果: