Vue常见指令

Vue简介

Vue.js 是一款渐进式的 JavaScript 框架，用于构建用户界面。它的核心库专注于视图层，易于上手，同时也可以与其他库或已有项目进行整合。
Vue.js 的特点包括：

• 响应式数据绑定：当数据变化时，视图会自动更新。
• 组件化：将应用拆分成可复用的组件，便于管理和维护。
• 虚拟DOM：通过虚拟DOM提高渲染性能。
• 指令系统：使用指令来操作DOM元素，实现数据绑定和事件处理。

Vue实例

<div id="app">
    <h1>{{ message }}</h1>
</div>
<script type="module">
    import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
        data() {
            return {
                message: 'Hello Vue!'
            };
        }
    }).mount('#app');
</script>

Vue常见指令

Vue指令是带有前缀v-的特殊属性，用于在模板中执行特定的操作。

1. v-for：用于循环渲染列表。

• 语法： <标签名 v-for="(item, index) in items" :key = "item.id">
• 作用：根据数组渲染多个元素。需要将哪个标签重复展示多次就将哪个标签写在v-for中。
• 示例：

<div id="app">
    <ul>
        <li v-for="item in items">{{ item.name }} ({{ item.time }})</li>
    </ul>
</div>
<script type="module">
    import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
        setup() {
            const items = ref([
                {"name":'项目1', "time":"时间1"}, 
                {"name":'项目2', "time":"时间2"}, 
                {"name":'项目3', "time":"时间3"}
            ]);
            return { items };
        }
    }).mount('#app');
</script>

2. v-bind：为HTML标签动态绑定属性值，如href、style、id、class、src等。

• 语法：v-bind:属性名="表达式" 简化：:属性名="表达式"
• 作用：将表达式的值绑定到属性上。
• 注意：
  • 插值表达式不能出现在标签内部
  • 只能绑定简单的属性值，不能绑定复杂的表达式
  • 绑定的属性值必须是字符串类型
  • 绑定的数据必须在data中定义
• 示例：

<img v-bind:src="imageUrl" alt="图片">

3. v-if：根据表达式的值显示或隐藏元素。

• 语法：v-if="表达式"
• 作用：表达式为true时显示元素，为false时隐藏元素。适用于不频繁切换的场景。
• 示例：

<span v-if="isVisible">
    这是可见的内容
</span>
<span v-else-if="isVisible2">
    这是可见的内容2
</span>
<span v-else>
    这是不可见的内容
</span>

4. v-show：根据表达式的值显示或隐藏元素，但元素仍然存在于DOM中。

• 语法：v-show="表达式"
• 作用：表达式为true时显示元素，为false时隐藏元素。
• 区别于v-if，v-show不会移除元素，只是通过CSS的display属性来控制显示或隐藏。适用于频繁切换的场景。
• 示例：

<span v-show="isVisible">
    这是可见的内容
</span>
<span v-show="isVisible2">
    这是可见的内容2
</span>

5. v-model：用于双向数据绑定。

• 语法：v-model="变量名"
• 作用：将表单元素的值与数据模型绑定，实现数据的双向同步。
• 注意：
  • 只能用于表单元素，如input、select、textarea等。
  • 数据模型必须在data中定义。
• 示例：

<input type="text" v-model="inputValue">

6. v-on：用于绑定事件监听器。

• 语法：v-on:事件名="方法名" 简化：@事件名="方法名"
• 注意：
  • 方法必须在methods中定义。
  • 方法不能使用箭头函数，因为箭头函数没有this，会导致数据绑定失效。
  • methods函数中的this指向vue实例。可以通过this找到data中的数据。
• 作用：在元素上绑定事件监听器，当事件触发时执行方法。
• 示例：

<button v-on:click="f">点击我</button>
<button @click="f">点击我</button>
<script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
        methods: {
            f() {
                alert('按钮被点击');
            }
        }
    }).mount('#app');