跟着官网学 Vue - 基础

今天药忘吃喽~ 2024-02-05 14:50 34阅读 0赞

## 1、跟 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、处理用户输入 ##

<script>
    // 导出一个 Vue 组件
    export default {
      // 数据
      data() {
        return {
          message: 'Hello World! lfsun'
        }
      },
      // 方法
      methods: {
        // 反转消息的方法
        reverseMessage() {
          this.message = this.message.split('').reverse().join('')
        },
        // 通知的方法
        notify() {
          alert('导航受阻.')
        }
      }
    }
    </script>
    
    <template>
      
      
      <h1>{
       { message }}</h1>
    
      
      
      <button @click="reverseMessage">反转 Message</button>
    
      
      
      <button @click="message += '!'">追加 "!"</button>
    
      
      
      <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 绑定 ##

<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>
    
      
      <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、条件与循环 ##

<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">
        
        <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、表单绑定 ##

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

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

## 6、简单组件 ##

<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>
      
      <ol>
        
        <TodoItem
          v-for="item in groceryList"
          :todo="item"
          :key="item.id"
        ></TodoItem>
      </ol>
    </template>

TodoItem.vue

这个示例展示了如何创建一个简单的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"` 给每个组件提供一个唯一的标识符。