问题描述:
在Vue的复习和细节学习中发现,在head中引入了vue后,直接在Head中创建Vue实例的话是没有作用的。
<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">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<script>
var app7 = new Vue({
el: '#app7',
data: {
foo: 'bar'
}
})
</script>
<title>Document</title>
</head>
<body>
<div id="app7">
<p>{{foo}}</p>
<button v-on:click="foo='baz'">改变它</button>
</div>
</body>
解决办法:
Vue应该是挂在在已经创建号的Dom元素上面的,所以我们在创建Vue实例的时候,必须在已经创建了相关了Dom元素之后才可以创建成功。正确写法应该写在body的最后。
简单的小问题,但是都是以后要注意的部分。