02 Vue.js 的一些基础特性

以下是一些基本的 Vue.js 代码示例，这些示例将帮助你理解 Vue 的一些基本概念：

1. 简单的 Vue 实例

new Vue({
  el: '#app', // 指定 Vue 实例挂载的元素
  data: {
    message: 'Hello Vue!' // 响应式数据
  }
});

HTML:

<div id="app">
  <p>{{ message }}</p> <!-- 插值表达式 -->
</div>

2. 使用 v-model 实现双向数据绑定

new Vue({
  el: '#app',
  data: {
    text: ''
  },
  methods: {
    reverseText: function() {
      this.text = this.text.split('').reverse().join('');
    }
  }
});

HTML:

<div id="app">
  <p>{{ text }}</p>
  <input v-model="text" placeholder="输入一些文本">
  <button @click="reverseText">反转</button>
</div>

3. 条件渲染

new Vue({
  el: '#app',
  data: {
    seen: true
  }
});

HTML:

<div id="app">
  <p v-if="seen">现在你看到我了</p>
</div>

4. 列表渲染

new Vue({
  el: '#app',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
});

HTML:

<div id="app">
  <ul>
    <li v-for="item in items">{{ item.message }}</li>
  </ul>
</div>

5. 组件

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter: function () {
      this.counter += 1
    }
  }
})

new Vue({
  el: '#app'
});

HTML:

<div id="app">
  <my-component></my-component>
</div>

6. 事件处理

new Vue({
  el: '#app',
  data: {
    eventType: 'Click'
  },
  methods: {
    eventHandler: function(event) {
      alert('事件类型: ' + this.eventType)
    }
  }
});

HTML:

<div id="app">
  <button v-on:click="eventHandler">点击我</button>
</div>

7. 生命周期钩子

new Vue({
  el: '#app',
  data: {
    loaded: false
  },
  mounted: function() {
    this.loaded = true;
  }
});

HTML:

<div id="app">
  <p v-if="loaded">组件已加载</p>
</div>

这些示例展示了 Vue.js 的一些基础特性，包括数据绑定、事件处理、条件和列表渲染、组件系统以及生命周期钩子。Vue.js 的强大之处在于它提供了一个简洁而强大的系统来构建复杂的用户界面。