You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
1.9 KiB
79 lines
1.9 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<title>VueComponent</title> |
|
<script type="text/javascript" src="../vue.js"></script> |
|
</head> |
|
<body> |
|
<div id="root"> |
|
<h1>{{msg}}</h1> |
|
<!-- 第三步：编写组件标签 --> |
|
<xuexiao></xuexiao> |
|
<hr/> |
|
<!-- 第三步：编写组件标签 --> |
|
<xuesheng></xuesheng> |
|
</div> |
|
<script type="text/javascript"> |
|
Vue.config.productionTip = false // 组织开发环境提示 |
|
|
|
// 步骤一： 创建school组件 |
|
const school = Vue.extend({ |
|
// 组件定义时一定不要写el配置项，el项仅由一个Vue实例配置 |
|
// el: '#root', |
|
template: ` |
|
<div> |
|
<h2>学校名称：{{schoolName}}</h2> |
|
<h2>学校地址：{{address}}</h2> |
|
<button @click="showName">点我提示学校名</button> |
|
</div> |
|
`, |
|
data() { |
|
return { |
|
schoolName: '尚硅谷', |
|
address: '北京' |
|
} |
|
}, |
|
methods: { |
|
showName(){ |
|
alert(this.schoolName) |
|
} |
|
} |
|
}) |
|
// 步骤一： 创建student组件 |
|
const student = Vue.extend({ |
|
template: ` |
|
<div> |
|
<h2>学生姓名：{{studentName}}</h2> |
|
<h2>学生年龄：{{age}}</h2> |
|
</div> |
|
`, |
|
data() { |
|
return { |
|
studentName: '小强', |
|
age: 18, |
|
} |
|
} |
|
}) |
|
|
|
// 步骤二：注册组件（全局） |
|
// Vue.component('xuexiao', school) |
|
// Vue.component('xuesheng', student) |
|
|
|
|
|
// 创建Vue实例 |
|
const vm = new Vue({ |
|
el: '#root', |
|
// 步骤二： 注册组件(局部注册) |
|
components: { |
|
xuexiao: school, |
|
xuesheng: student |
|
}, |
|
data: { |
|
'msg': 'Hello Every One!' |
|
} |
|
}) |
|
</script> |
|
|
|
</body> |
|
</html> |