Vue核心语法三7、生命周期钩子 Vue实例在不同生命周期阶段会调用不同的钩子函数。常用的生命周期钩子有： create

7、生命周期钩子

Vue实例在不同生命周期阶段会调用不同的钩子函数。常用的生命周期钩子有：

created：实例创建完成后立即调用。
mounted：实例挂载到 DOM 上后调用。
updated：数据更新后调用。
destroyed：实例销毁前调用。
示例：

new Vue({
  data: {
    message: 'Hello Vue!'
  },
  created() {
    console.log('Created Hook: Component is created');
  },
  mounted() {
    console.log('Mounted Hook: Component is mounted');
  },
  updated() {
    console.log('Updated Hook: Component is updated');
  },
  destroyed() {
    console.log('Destroyed Hook: Component is destroyed');
  }
});

8、条件渲染

通过 v-if、v-else-if 和 v-else 来控制模板中的元素渲染。

<div v-if="isLoggedIn">Welcome back!</div>
<div v-else>Login to continue</div>

9、列表渲染

使用 v-for 来渲染列表。v-for 可以遍历数组或对象，并动态渲染其元素。

<ul>
  <li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>

10、组件

Vue是基于组件化的框架，组件是Vue应用的核心概念。可以通过Vue.component注册一个全局组件，或者在组件内部定义局部组件

示例：

Vue.component('my-component', {
  template: '<p>This is a component</p>'
});

使用：

<my-component></my-component>

11、事件绑定和自定义事件

在父组件和子组件之间，使用自定义事件来进行通信。

父组件监听子组件事件

<child-component @custom-event="handleCustomEvent"></child-component>

子组件触发自定义事件

this.$emit('custom-event', 'Hello Parent');

12、特殊指令

`v-once`指令

v-once 是 Vue 的一个特殊指令，它的作用是只渲染元素和组件一次，之后 Vue 会将它们缓存，并且不会响应后续的数据变化。

用途：

当你确定某些元素或组件不需要随数据的变化而重新渲染时，可以使用 v-once 来提高性能。
它常用于一些静态内容的渲染，比如静态文本、图片、广告横幅等。
示例：

<div id="app">
  <p v-once>This content will be rendered only once.</p>
  <p>{{ message }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello, Vue!'
    }
  });
</script>

在这个例子中，<p v-once>This content will be rendered only once.</p> 只会被渲染一次。即使 message 数据发生变化，v-once 修饰的元素内容也不会改变或重新渲染。

`v-html`指令

v-html 指令用于将 HTML 字符串插入到 DOM 中并渲染其 HTML 结构。它允许你将动态的 HTML 内容直接插入页面。

用途：

用于将动态的 HTML 内容插入到页面中。例如，用户输入的富文本内容，或是从后端获取的 HTML 格式的文本。
它常用于富文本编辑器、Markdown 渲染等场景。
示例：

<div id="app">
  <div v-html="rawHtml"></div>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      rawHtml: '<strong>This is a dynamic HTML content</strong>'
    }
  });
</script>

在这个例子中，v-html 将 rawHtml 中的 HTML 字符串插入到 <div> 元素中，并渲染成实际的 HTML 内容（即 <strong> 标签会被渲染为加粗的文本）。

Vue核心语法三