由于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>