Vue基本使用
时间: 2023-07-11 10:13:41 浏览: 62
Vue.js 是一种用于构建用户界面的渐进式框架。它旨在通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。以下是 Vue 的基本使用方法:
1. 引入 Vue.js 库
```html
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
```
2. 创建 Vue 实例
```javascript
var app = new Vue({
// options
})
```
在实例化 Vue 时,你需要传入一个选项对象,这个对象包含了你要使用的选项和方法,比如数据、模板、挂载元素、方法、生命周期钩子等。
3. 绑定数据
```javascript
data: {
message: 'Hello, Vue!'
}
```
这里的 `data` 属性包含了你要绑定的数据,可以在模板中使用 `{{ message }}` 的方式来引用。
4. 使用指令
```html
<div v-if="seen">Hello, Vue!</div>
```
Vue 提供了很多指令,用于操作 DOM 元素和数据绑定。`v-if` 指令表示如果 `seen` 属性为真,则显示该元素。
5. 处理事件
```html
<button v-on:click="sayHello">Say Hello</button>
```
`v-on` 指令用于监听 DOM 事件,这里监听 `click` 事件并调用 `sayHello` 方法。
6. 完整示例
```html
<div id="app">
<div v-if="seen">{{ message }}</div>
<button v-on:click="sayHello">Say Hello</button>
</div>
```
```javascript
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!',
seen: true
},
methods: {
sayHello: function() {
alert('Hello!');
}
}
})
```
这是一个完整的 Vue 示例,包含了数据绑定、条件渲染、事件处理等功能。