本文介绍了如何使用Vue构造器创建Vue实例，并重点讲解了el选项和$mount方法在挂载Vue到DOM中的应用。通过实例演示了数据绑定和输入事件处理。
<html>
<head>
<title>Tiny</title>
</head>
<body>
<!-- 将库添加到这里 -->
<script src="https://unpkg.com/vue@next"></script>
AS
<!-- 一些 HTML 代码 -->
<div id="root">
<p>{{ message }}</p>
<input v-model="message" />
</div>
<!-- 一些 JavaScript 代码-->
<script>
// 创建Vue实例
var app = new Vue({
name: 'my-app',
// 根DOM元素的CSS选择器
el: '#root',
// 一些数据
data () {
return {
message: 'Hello Vue.js!',
}
},
})
</script>
</body>
</html>
在上面代码中，使用关键字new调用Vue构造器创建了一个新的实例。Vue构造器有一个参数---option对象，该参数可以携带多个属性（称为选项）。
通过el选项，我们使用CSS选择器告知Vue将实例添加（挂载）到Web页面的哪个DOM元素中。
可以使用Vue实例$mount方法代替el选项。
var app = new Vue({
data () {
return {
message: 'Hello Vue.js!',
}
},
})
//添加Vue实例到页面中
app.$mount('#root')
扫一扫
5318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
