2.1 响应式数据与插值表达式#

Vue 的核心特性之一是响应式数据绑定。通过在模板中使用插值表达式（{{ }}），可以将数据动态绑定到 DOM 中。

<!-- index.html -->
<div id="app">
    <p>{{ title }}</p>
    <p>{{ content }}</p>
</div>

在 JavaScript 中，通过 Vue 实例的 data 属性定义响应式数据：

// main.js
new Vue({
    el: '#app',
    data: {
        title: 'Hello Vue!',
        content: 'This is a Vue.js project.'
    }
});

当 data 中的数据发生变化时，页面上绑定的内容会自动更新。

2.2 方法与插值表达式#

Vue 允许在模板中调用方法。通过在 methods 中定义函数，可以在插值表达式中使用。

<!-- index.html -->
<div id="app">
    <p>{{ output() }}</p>
</div>

在 Vue 实例中定义方法：

// main.js
new Vue({
    el: '#app',
    data: {
        title: 'Hello Vue!',
        content: 'This is a Vue.js project.'
    },
    methods: {
        output() {
            return `Title: ${this.title}, Content: ${this.content}`;
        }
    }
});

2.3 计算属性#

计算属性是基于依赖的缓存属性。当依赖的响应式数据发生变化时，计算属性会自动重新计算。

<!-- index.html -->
<div id="app">
    <p>{{ outputContent }}</p>
</div>

在 Vue 实例中定义计算属性：

// main.js
new Vue({
    el: '#app',
    data: {
        title: 'Hello Vue!',
        content: 'This is a Vue.js project.'
    },
    computed: {
        outputContent() {
            return `Title: ${this.title}, Content: ${this.content}`;
        }
    }
});

2.4 侦听器（Watchers）#

侦听器用于监听数据的变化，并执行特定的操作。通过在 watch 中定义侦听器，可以实现更复杂的逻辑。

// main.js
new Vue({
    el: '#app',
    data: {
        title: 'Hello Vue!'
    },
    watch: {
        title(newVal, oldVal) {
            console.log(`Title changed from ${oldVal} to ${newVal}`);
        }
    }
});

3.1 条件渲染#

v-if 和 v-show 用于根据条件渲染元素。v-if 是真正的条件渲染，而 v-show 只是切换元素的 CSS 属性。

<!-- index.html -->
<div id="app">
    <p v-if="bool">This is visible when bool is true.</p>
    <p v-show="bool">This is visible when bool is true.</p>
</div>

在 Vue 实例中定义布尔值：

// main.js
new Vue({
    el: '#app',
    data: {
        bool: true
    }
});

3.2 列表渲染#

v-for 用于渲染列表数据。可以通过数组或对象进行循环。

<!-- index.html -->
<div id="app">
    <p v-for="item in arr">{{ item }}</p>
    <p v-for="(item, key, index) in obj">{{ item }} - {{ key }} - {{ index }}</p>
</div>

在 Vue 实例中定义数组和对象：

// main.js
new Vue({
    el: '#app',
    data: {
        arr: ['a', 'b', 'c'],
        obj: { a: 10, b: 20, c: 30 }
    }
});

3.3 属性绑定#

v-bind 用于动态绑定 DOM 属性。

<!-- index.html -->
<div id="app">
    <p v-bind:title="title">Hover over me to see the title.</p>
</div>

在 Vue 实例中定义属性值：

// main.js
new Vue({
    el: '#app',
    data: {
        title: 'Dynamic Title'
    }
});

3.4 事件绑定#

v-on 或简写为 @ 用于绑定事件处理器。

<!-- index.html -->
<div id="app">
    <button @click="output">Click me</button>
</div>

在 Vue 实例中定义事件处理方法：

// main.js
new Vue({
    el: '#app',
    methods: {
        output() {
            alert('Button clicked!');
        }
    }
});

3.5 表单绑定#

v-model 用于实现双向数据绑定，将表单输入与数据绑定在一起。

<!-- index.html -->
<div id="app">
    <input type="text" v-model="inputValue">
    <p>{{ inputValue }}</p>
</div>

在 Vue 实例中定义绑定的数据：

// main.js
new Vue({
    el: '#app',
    data: {
        inputValue: 'Default Value'
    }
});

4.1 事件修饰符#

.trim 修饰符用于去除输入值的首尾空格。

<!-- index.html -->
<div id="app">
    <input type="text" v-model.trim="inputValue">
</div>

在 Vue 实例中定义绑定的数据：

// main.js
new Vue({
    el: '#app',
    data: {
        inputValue: ''
    }
});