加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
ch15.html 1.35 KB
一键复制 编辑 原始数据 按行查看 历史
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<a href="index.html">返回</a>
<div id="app">
<!-- 这里发现第二个坑 <s1/> 结束的话,后面的组件就不出来了 -->
<s1></s1>
<s2></s2>
</div>
<script>
Vue.config.productionTip=false //关闭生产状态提示
const sch = Vue.extend({
name:'School',
data (){ //data的第二种写法
return{
sch:{
name:"衡水学校",
addr:"衡水路边"
}
}
} ,
// 出了一个问题,后来发现模板必须有一个根目录
template:`
<div>
<h3>学校信息</h3>
<p>{{sch.name}}-{{sch.addr}}</p>
</div>
`
})
const student = Vue.extend({
data (){ //data的第二种写法
return{
stu:{
name:"张三",
age:19
}
}
} ,
template:`
<div>
<h3>学生信息</h3>
<p>{{stu.name}}-{{stu.age}}</p>
</div>
`
})
new Vue({
el:"#app",
components :{
s1:student,
s2:sch
}
})
</script>
</body>
</html>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化