vue学习12.1

时间：2024-12-02 21:58:33

1.绑定style样式

<template>
  <div>
    <button @click="increaseFontSize">增大字体</button>
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">
      动态样式示例
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeColor: 'blue',
      fontSize: 16
    };
  },
  methods: {
    increaseFontSize() {
      this.fontSize += 2; // 增加字体大小
    }
  }
};
</script>

2.条件渲染

<template>
  <div>
    <button @click="toggle">点击切换显示</button>
    <p v-if="isVisible">这是一个可见的段落。</p>
    <p v-else>段落隐藏了。</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible; // 切换可见性
    }
  }
};
</script>

3.列表渲染

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ]
    };
  }
};
</script>

4.key作用与原理（未完成）

key 是 Vue 中用于跟踪节点身份的特殊属性，在进行虚拟 DOM 更新时用于优化：

作用：帮助 Vue 更准确地识别节点，提高渲染性能。

原理：通过 key，Vue 可以精确地复用或者重新创建元素，避免不必要的DOM操作。

5.列表过滤

<template>
  <ul>
    <li v-for="item in filteredList" :key="item.id">{{ item.text }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1', visible: true },
        { id: 2, text: 'Item 2', visible: false },
        { id: 3, text: 'Item 3', visible: true }
      ]
    };
  },
  computed: {
    filteredList() {
      return this.items.filter(item => item.visible); // 只返回可见的项
    }
  }
};
</script>

6.列表排序

<template>
  <ul>
    <li v-for="item in sortedList" :key="item.id">{{ item.text }}: {{ item.value }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1', value: 50 },
        { id: 2, text: 'Item 2', value: 10 },
        { id: 3, text: 'Item 3', value: 30 }
      ]
    };
  },
  computed: {
    sortedList() {
      return this.items.slice().sort((a, b) => a.value - b.value); // 按值排序
    }
  }
};
</script>

slice，复制。不在原来的数组修改。sort排序函数。

  • sort() 方法: 用于对数组进行排序。sort 方法接受一个比较函数。
  • 比较函数 (a, b) => a.value - b.value: 这个函数接受两个参数，分别是数组中的两个元素：
    • 如果返回值小于 0，则 a 会被排在 b 之前。
    • 如果返回值大于 0，则 b 会被排在 a 之前。
    • 如果返回值等于 0，则原顺序不变。
    • 在这个例子中，按照每个对象的 value 属性进行升序排序。

7.监测数据的原理

1）数据劫持

Vue 通过 Object.defineProperty 方法实现对数据的劫持。它会将 Vue 实例中的数据属性转换为 getter 和 setter，以便对数据的读写进行监控。

  • 获取数据（getter）时，Vue 会将依赖该数据的组件记录下来。
  • 设置数据（setter）时，Vue 会通知所有依赖该数据的组件重新渲染。

2） 依赖收集

在数据读取时，Vue 会记录哪些 watcher 依赖了这个数据（即哪些视图依赖了这个数据）。这个过程称为依赖收集。在 Vue 的实现中，watcher 是一个用于通知 Vue 进行视图更新的类。

3）响应式系统

当数据变化时，触发 setter，会调用相应的 watcher 的 update 方法，通知 Vue 进行视图更新。Vue 通过 虚拟 DOM 更新只改动那些有变化的部分，从而提高性能。

4）Vue 3 的 Proxy 机制

在 Vue 3 中，Vue 替换了 Object.defineProperty，使用了 Proxy 进行数据劫持。

// Vue 2.x 代码示例
new Vue({
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  created() {
    console.log(this.message); // 触发 getter
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage; // 触发 setter，更新视图
    }
  }
});

8.过滤器

<template>
  <div>{{ message | capitalize }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello world'
    };
  },
  filters: {
    capitalize(value) {
      if (!value) return '';
      return value.charAt(0).toUpperCase() + value.slice(1);
    }
  }
};
</script>

  1. 定义过滤器：

    • filters：这是一个 Vue 组件的选项，定义了可以在模板中使用的过滤器。
    • capitalize：过滤器的名称，可以在模板中用 | capitalize 调用。

  2. 参数 value：

    • 这个参数是传入过滤器的值，通常是一个字符串。

  3. 检查 value：

    • if (!value) return '';：如果 value 是 false（例如 null、undefined 或空字符串），则返回一个空字符串。这防止后续代码在处理 undefined 或 null 时出错。

  4. 字符串处理：

    • value.charAt(0).toUpperCase()：获取字符串的第一个字符并将其转换为大写。
    • value.slice(1)：获取字符串从第二个字符开始的部分。
    • 将这两个部分拼接起来，形成处理后的字符串。

 9.各种指令

1.v-text

替代{{ }}

<template>
  <div v-text="message"></div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
};
</script>

2.v-html

v-html 用于更新元素的 innerHTML，能解析 HTML 字符串。

<template>
  <div v-html="htmlContent"></div>
</template>

<script>
export default {
  data() {
    return {
      htmlContent: '<p>This is <strong>HTML</strong> content</p>'
    };
  }
};
</script>

3.v-ones

v-once 用于只渲染元素和组件一次，之后的更新不再影响这些元素。

<template>
  <div v-once>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'This will not change even if the data updates'
    };
  }
};
</script>

相关文章