Vue基础语法
时间: 2025-05-11 22:25:21 浏览: 16
### Vue.js 基础语法教程
Vue.js 是一种用于构建用户界面的渐进式框架,其核心库专注于视图层,并允许与其他库或项目集成。以下是关于 Vue.js 基础语法的一些重要知识点:
#### 1. 模板语法
Vue 使用基于 HTML 的模板语法,使开发者能够在 DOM 上声明式的绑定数据[^1]。这种语法使得 HTML 和 JavaScript 能够无缝协作。
```html
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
});
</script>
```
上述代码展示了如何通过 `{{ }}` 插值表达式来显示变量的内容[^2]。
#### 2. 数据绑定
Vue 提供了双向数据绑定的功能,这意味着当模型发生变化时,视图会自动更新;反之亦然。这可以通过 `v-model` 指令实现[^3]。
```html
<input v-model="message" placeholder="编辑此输入框">
<p>消息是: {{ message }}</p>
```
在此示例中,每当用户更改 `<input>` 输入框中的内容时,页面上的 `{{ message }}` 部分也会实时更新[^4]。
#### 3. 方法调用
在 Vue 实例的方法中,`this` 关键字指向当前 Vue 实例本身,因此可以直接访问实例的数据和其他属性。
```javascript
new Vue({
el: '#example',
data: {
name: 'Vue.js'
},
methods: {
greet: function () {
alert('你好,' + this.name);
}
}
});
<!-- 触发方法 -->
<button v-on:click="greet">打招呼</button>
```
这里定义了一个名为 `greet` 的方法,在按钮点击事件触发时执行该函数。
#### 4. 条件渲染与列表渲染
条件渲染可通过 `v-if` 或者 `v-show` 指令完成,而循环渲染则利用 `v-for` 指令来遍历数组或者对象集合。
```html
<ul id="todo-list">
<li v-for="(todo, index) in todos" :key="index">{{ todo.text }}</li>
</ul>
<script>
var example = new Vue({
el: '#todo-list',
data: {
todos: [
{ text: '学习 Vue.js' },
{ text: '编写组件' }
]
}
});
</script>
```
这段代码片段演示了如何使用 `v-for` 渲染一个待办事项列表。
---
###
阅读全文
相关推荐
















