跟着官网学 Vue - 基础

1、跟 Vue 说 Hello World！

<!--
  跟 Vue 说 Hello World！
-->

<script>
// 导出一个 Vue 组件
export default {
  // 数据
  data() {
    return {
      message: 'Hello World! lfsun'
    }
  }
}
</script>

<template>
  <!-- 使用数据中的信息渲染标题 -->
  <h1>{{ message }}</h1>
</template>

这是一个简单的 Vue 组件，其中包含了一个数据属性 message，它的值是 ‘Hello World! lfsun’。在模板部分，我们使用双大括号 {{ }} 语法将 message 的值插入到 <h1> 标签中，以在页面上显示 “Hello World! lfsun”。

2、处理用户输入

<!--
  这个示例展示了如何通过 v-on 指令处理用户输入。
-->

<script>
// 导出一个 Vue 组件
export default {
  // 数据
  data() {
    return {
      message: 'Hello World! lfsun'
    }
  },
  // 方法
  methods: {
    // 反转消息的方法
    reverseMessage() {
      this.message = this.message.split('').reverse().join('')
    },
    // 通知的方法
    notify() {
      alert('导航受阻.')
    }
  }
}
</script>

<template>
  <!--
    注意我们不需要在模板中写 .value，
    因为在模板中 ref 会自动“解包”。
  -->
  <!-- 显示消息 -->
  <h1>{{ message }}</h1>

  <!--
    绑定到一个方法/函数。
    这个 @click 语法是 v-on:click 的简写。
  -->
  <!-- 反转消息的按钮 -->
  <button @click="reverseMessage">反转 Message</button>

  <!-- 也可以写成一个内联表达式语句 -->
  <!-- 在消息后添加 "!" 的按钮 -->
  <button @click="message += '!'">追加 "!"</button>

  <!--
    Vue 也为一些像 e.preventDefault() 和 e.stopPropagation()
    这样的常见任务提供了修饰符。
  -->
  <!-- 带有 e.preventDefault() 的链接 -->
  <a href="https://vuejs.org" @click.prevent="notify">
        使用 e.preventDefault() 的链接
  </a>
</template>

<style>
/* 样式 */
button, a {
  display: block;
  margin-bottom: 1em;
}
</style>

这个示例展示了如何使用 Vue 处理用户输入。通过 v-on 指令，我们绑定了按钮的点击事件，并通过 methods 中的方法来处理这些事件。在模板中，我们使用了插值语法 {{ message }} 来显示数据，并演示了一些常见的事件修饰符，如 .prevent 阻止默认行为。

3、Attribute 绑定

<!--
现在我们将元素的 attribute / property 响应式地绑定到状态上。
这个 :title 语法是 v-bind:title 的简写。
-->

<script>
export default {
  data() {
    return {
      message: 'Hello World! lfsun',
      isRed: true,
      color: 'green'
    }
  },
  methods: {
    // 切换 isRed 的值，实现红色文字的动态切换
    toggleRed() {
      this.isRed = !this.isRed
    },
    // 切换 color 的值，实现文字颜色在绿色和蓝色之间切换
    toggleColor() {
      this.color = this.color === 'green' ? 'blue' : 'green'
    }
  }
}
</script>

<template>
  <p>
    <!-- 使用动态绑定的方式设置标题 -->
    <span :title="message">
      将鼠标悬停在我身上几秒钟，就能看到我动态绑定的标题！
    </span>
  </p>

  <!--
  除了普通字符串之外，
  class 绑定还特别支持了对象和数组
  -->
  <p :class="{ red: isRed }" @click="toggleRed">
    这应该是红色的......但点击我可以切换它。
  </p>

  <!-- 样式绑定也支持对象和数组 -->
  <p :style="{ color }" @click="toggleColor">
    应为绿色，点击后应在绿色和蓝色之间切换。
  </p>
</template>

<style>
.red {
  color: red;
}
</style>

在这个例子中，Vue组件包含了一个数据对象，其中包括message、isRed和color等属性。这些属性被用于演示Vue.js中的动态绑定机制。

具体来说，这个例子演示了以下几个方面：

1. 动态绑定标题 ：使用:title语法（等同于v-bind:title）将<span>元素的title属性与组件的message属性进行动态绑定，实现当鼠标悬停在该元素上时，显示动态绑定的标题。
2. 动态切换类名 ：使用:class语法（等同于v-bind:class）将<p>元素的类与组件的isRed属性进行动态绑定，从而实现在点击该元素时切换红色文字样式。
3. 动态切换样式 ：使用:style语法（等同于v-bind:style）将<p>元素的文字颜色样式与组件的color属性进行动态绑定，从而实现在点击该元素时在绿色和蓝色之间切换文字颜色。

4、条件与循环

<!--
我们可以通过 v-if 和 v-for 指令条件性地或循环地渲染内容。
-->

<script>
export default {
  data() {
    return {
      show: true,
      list: [1, 2, 3]
    }
  }
}
</script>

<template>
  <!-- 切换列表的显示与隐藏状态 -->
  <button @click="show = !show">切换列表</button>
  <!-- 在列表末尾添加一个新数字 -->
  <button @click="list.push(list.length + 1)">添加数字</button>
  <!-- 移除列表末尾的数字 -->
  <button @click="list.pop()">移除数字</button>
  <!-- 反转列表的顺序 -->
  <button @click="list.reverse()">反转列表</button>

  <!-- 根据条件渲染列表 -->
  <ul v-if="show && list.length">
    <!-- 使用 v-for 循环渲染列表项 :key="item"确保每个列表项都有一个唯一的标识符。-->
    <li v-for="item of list" :key="item">{{ item }}</li>
  </ul>
  <!-- 当列表不为空但被隐藏时的提示 -->
  <p v-else-if="list.length">列表不为空，但被隐藏。</p>
  <!-- 当列表为空时的提示 -->
  <p v-else>列表为空。</p>
</template>

这个示例展示了如何在Vue.js中使用v-if和v-for指令来条件性地或循环地渲染内容。具体而言：

1. 按钮操作：有四个按钮，分别用于切换列表的显示与隐藏状态、在列表末尾添加一个新数字、移除列表末尾的数字、以及反转列表的顺序.
2. 条件性渲染列表：使用v-if指令，当show为true且list长度不为零时，渲染一个包含数字的无序列表。这里使用了v-for指令来循环渲染列表项。
3. 条件性提示：如果列表不为空但被隐藏（show为false），则显示提示信息“列表不为空，但被隐藏.”；如果列表为空，则显示提示信息“列表为空.”。这里使用了v-else-if和v-else指令。

5、表单绑定

<script>
export default {
  data() {
    return {
      text: '编辑',
      checked: true,
      checkedNames: ['冷风扇1'],
      picked: '一个',
      selected: 'A',
      multiSelected: ['A']
    }
  }
}
</script>

<template>
  <h2>文本输入</h2>
  <input v-model="text"> {{ text }}

  <h2>复选框</h2>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">已选中: {{ checked }}</label>

  <!--
    多个复选框可以绑定到
    相同的 v-model 数组
  -->
  <h2>多选框</h2>
  <input type="checkbox" id="lfsun1" value="冷风扇1" v-model="checkedNames">
  <label for="lfsun1">冷风扇1</label>
  <input type="checkbox" id="lfsun11" value="冷风扇11" v-model="checkedNames">
  <label for="lfsun11">冷风扇11</label>
  <input type="checkbox" id="lfsun111" value="冷风扇111" v-model="checkedNames">
  <label for="lfsun111">冷风扇111</label>
  <p>已选中的名字: <pre>{{ checkedNames }}</pre></p>

  <h2>单选框</h2>
  <input type="radio" id="one" value="一个" v-model="picked">
  <label for="one">一个</label>
  <br>
  <input type="radio" id="two" value="两个" v-model="picked">
  <label for="two">两个</label>
  <br>
  <span>已选择: {{ picked }}</span>

  <h2>选择框</h2>
  <select v-model="selected">
    <option disabled value="">请选择一个</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>已选择: {{ selected }}</span>

  <h2>多选选择框</h2>
  <select v-model="multiSelected" multiple style="width:100px">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>已选择: {{ multiSelected }}</span>
</template>

这个示例演示了如何使用Vue.js的v-model指令在状态和表单输入之间创建双向绑定。具体来说：

1. 文本输入 ：展示了如何使用v-model双向绑定文本输入框。
2. 复选框 ：演示了如何使用v-model双向绑定复选框。
3. 多选框 ：展示了如何使用v-model将多个复选框绑定到相同的数组。
4. 单选框 ：演示了如何使用v-model双向绑定单选框。
5. 选择框 ：展示了如何使用v-model双向绑定选择框。
6. 多选选择框 ：演示了如何使用v-model双向绑定多选选择框。

6、简单组件

<!--
这里展示了最简单的组件，它接收一个 prop 并渲染出来。
-->

<script>
// 引入 TodoItem 组件
import TodoItem from './TodoItem.vue'

export default {
  // 注册 TodoItem 组件
  components: {
    TodoItem
  },
  data() {
    return {
      // 包含待办事项的数组
      groceryList: [
        { id: 0, text: '蔬菜' },
        { id: 1, text: '奶酪' },
        { id: 2, text: '其他人类应该吃的东西' }
      ]
    }
  }
}
</script>

<template>
  <!-- 使用 TodoItem 组件渲染待办事项列表 -->
  <ol>
    <!--
      我们给每个 todo 项提供它所表示的 todo 对象，
      以便能够动态展示内容。
      同时还需要给每个组件提供一个“key”，
      这在指南的 v-for 部分有详细解释。
    -->
    <TodoItem
      v-for="item in groceryList"
      :todo="item"
      :key="item.id"
    ></TodoItem>
  </ol>
</template>

TodoItem.vue

<script>
export default {
  props: {
    todo: Object
  }
}
</script>

<template>
  <li>{{ todo.text }}</li>
</template>

这个示例展示了如何创建一个简单的Vue组件，该组件接收一个prop（todo），并在页面上渲染出来。具体来说：

1. 组件引入：通过import TodoItem from './TodoItem.vue'引入了名为TodoItem的组件。
2. 组件注册：在components选项中注册了TodoItem组件，以便在当前组件中可以使用它。
3. 数据：通过data选项定义了一个包含待办事项的数组groceryList。
4. 使用组件：在模板中使用v-for指令循环遍历groceryList数组，为每个待办事项创建一个TodoItem组件实例。通过:todo="item"将当前待办事项传递给TodoItem组件，并通过 :key="item.id" 给每个组件提供一个唯一的标识符。