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>