由于vue.js不依赖于dom元素，所以在body中引入就行，在head中引入会在渲染dom前加载，影响页面加载速度。
var vm = new Vue({
el: "#app",
data: {
price: "$10",
},
});
在vue实例中data可以是一个对象，也可以是一个函数，但是在组件中必须是一个函数。
var Counter = {
template: `<button @click="count++">当前点击了次</button>`,
};
组件是一个对象而不是一个vue实例
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>HTML + CSS</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="app">
<Pitle label="价目表"></Pitle>
{{price}}
<Counter />
</div>
<script src="./vue.min.js"></script>
<script>
var Counter = {
data() {
return {
count: 0,
};
},
template: `<button @click="count++">当前点击了{{count}}次</button>`,
};
var Pitle = {
props: ["label"],
template: `<h1>{{label}}</h1>`,
};
// Vue.component("Counter", Counter);
var vm = new Vue({
components: {
Counter,
Pitle,
},
el: "#app",
data: {
price: "$10",
},
});
</script>
</body>
</html>
