请使用Vue.js创建Vue实例并实现数据绑定效果,要求写出核心代码
时间: 2024-02-15 12:05:25 浏览: 120
好的,以下是一个简单的 Vue.js 实例,实现了数据绑定效果:
HTML:
```html
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
```
JavaScript:
```javascript
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
```
这段代码创建了一个 Vue 实例,并通过 `data` 选项定义了一个名为 `message` 的属性,初始值为 `'Hello Vue!'`。在 HTML 中,我们使用双括号 `{{ }}` 来将 `message` 属性的值插入到文本中,实现了数据绑定效果。同时,我们使用 `v-model` 指令将 `message` 属性与一个输入框进行双向绑定,当输入框的值发生变化时,`message` 属性的值也会随之改变。
阅读全文