vue入门

<template>
  <div id="app">
    <!-- 绑定数据到视图 -->
    <p>{{ message }}</p>
    <!-- v-bind 指令用于绑定属性 -->
    <img v-bind:src="imageSrc" alt="Vue Logo">
    <!-- v-on 指令用于绑定事件 -->
    <button v-on:click="reverseMessage">反转消息</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      // 定义组件的数据
      message: 'Hello Vue!',
      imageSrc: 'https://vuejs.org/images/logo.png'
    }
  },
  methods: {
    // 定义组件的方法
    reverseMessage() {
      this.message = this.message.split('').reverse().join('')
    }
  }
}
</script>

<style>
/* 简单的样式 */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

解释说明：

1. 模板部分 (<template>):

   • {{ message }}：使用双大括号语法将 message 数据绑定到视图中，当 message 变化时，视图会自动更新。
   • v-bind:src="imageSrc"：使用 v-bind 指令将 imageSrc 数据绑定到 img 标签的 src 属性。
   • v-on:click="reverseMessage"：使用 v-on 指令将点击事件绑定到 reverseMessage 方法上。

2. 脚本部分 (<script>):

   • data()：定义组件的数据对象，包含 message 和 imageSrc。
   • methods：定义组件的方法，reverseMessage 方法用于反转 message 的内容。

3. 样式部分 (<style>):

   • 简单的 CSS 样式，使页面居中并设置字体和颜色。