Vue 学习笔记 02

第一节

v-model

处理用户输入，为页面输入框进行数据邦定，例如：

• input
• select
• textarea
• components

使用例

1<div id="app">
2    <p>{{message}}</p>
3    <input v-model="message" />
4</div>
5<script>
6    var app = new Vue({
7        el: '#app',
8        data: {
9            message: 'Hello Vue.js!',
10        },
11    })
12</script>
13

v-on

为页面元素绑定各种事件。

1<div id="app">
2    <p>您最喜欢的水果是：{{fruits}}</p>
3    <button v-on:click="btnClick('苹果')">苹果</button>
4    <button v-on:click="btnClick('香蕉')">香蕉</button>
5    <!-- 缩写 -->
6    <button @click="btnClick('橘子')">橘子</button>
7</div>
8<script>
9    var app = new Vue({
10        el: '#app',
11        data: {
12            fruits: '苹果',
13        },
14        methods: {
15            btnClick: function(fruits) {
16                this.fruits = fruits
17            },
18        },
19    })
20</script>
21