跟着文档学Vue3 (一)

某哈压力大
121 阅读2分钟

🚀 Vue.js 基础全解：从应用创建到模板语法

🧱 一、创建 Vue 应用实例

✅ 核心流程

  1. 创建应用

    const app = createApp(App)
    • createApp 接收一个根组件作为参数（可通过 import 导入）
    • 返回的应用实例（app）需调用 .mount() 方法才能渲染
    • 挂载目标：DOM 元素或 CSS 选择器字符串（如 #app）

  2. 模板自动绑定

    • 若根组件未设置 template 选项，Vue 会自动使用容器的 innerHTML 作为模板

    • 示例：

      <div id="app">
  <!-- 这里的 HTML 会被自动编译为模板 -->
</div>

  3. 配置与扩展

    • 全局配置：通过 app.config 对象

       app.config.errorHandler = (err, instance, info) => {
   console.error('错误信息:', err, '上下文:', info)
 }

    • 组件注册：

       app.component('TodoDeleteButton', TodoDeleteButton)

📝 二、模板语法：声明式数据绑定

🔧 核心概念

  • 目的：将组件数据声明式绑定到 DOM 上

  • 语法：{{ }}（双大括号） <p>当前消息: {{ message }}</p>

💡 优势

  • 性能优化：模板编译为高效 JS 代码，结合响应式系统，最小化 DOM 操作

  • 表达式支持

⚠️ 安全警告

  • 避免 XSS 漏洞： 
    <div v-html="rawHtml"></div>

    • v-html 会将 rawHtml 的值作为 HTML 解析

    • 示例代码：

      <div id="app">
  <div v-html="rawHtml"></div>
  <button @click="changeContent">更新内容</button>
 </div>

<script>
new Vue({
  el: '#app',
  data: {
    rawHtml: '<span style="color:red;">初始红色文字</span>'
  },
  methods: {
    changeContent() {
      this.rawHtml = '<span style="color:blue;">更新为蓝色文字</span>'
    }
  }
})
</script>

🔗 三、Attribute 动态绑定

🎯 目标

  • 响应式绑定 HTML 属性，如 id、class 等

  • 示例：

     <div :id="dynamicId"></div>

🛠️ 高级用法

  1. 简写语法

    • 当属性名与数据名相同时，可省略值：
 <div :id></div> <!-- 等价于 :id="id" -->
  1. 批量绑定对象
<div v-bind="objectOfAttrs"></div>
<script>
const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color:green'
}
</script>

  1. 表达式与方法调用

    • 支持三元运算： <p :title="isError ? '错误' : '正常'"></p>

    • 调用组件方法：

<time :title="toTitleDate(date)" :datetime="date">
  {{ formatDate(date) }}
</time>

🧠 四、指令（Directives）详解

🧩 指令的本质

  • 定义：以 v- 开头的特殊属性，用于在表达式变化时响应式更新 DOM

  • 常见指令：

    • v-bind：绑定属性
    • v-on：监听事件
    • v-if / v-show：条件渲染
    • v-for：循环渲染
    • v-model：双向数据绑定

🔄 参数与动态参数

  • 参数：通过冒号分隔 => <a :[attributeName]="url"></a>

    • 当 attributeName 为 "href" 时，等价于 :href="url"

  • 大小写转换：浏览器会将属性名转换为小写，需注意命名一致性

⚡ 修饰符（Modifiers）

  • 语法：以 . 开头 => <form @submit.prevent="onSubmit"></form>

    • .prevent：调用 event.preventDefault()
    • .stop：调用 event.stopPropagation()
    • .capture：使用事件捕获模式

📸 图解说明

image.png

图示说明：Vue 应用的核心流程：createApp → mount → 模板编译 → 响应式更新 DOM

vue官方图解

📌 总结

模块关键点
应用创建createApp + .mount() 是 Vue 应用的起点
模板语法双大括号 {{ }} 与 v-html 的安全使用
属性绑定v-bind 的灵活性与批量绑定技巧
指令系统修饰符与动态参数的高级用法

🚫 注意事项

  1. 避免 XSS 攻击：谨慎使用 v-html，确保内容可信
  2. 优先使用组件：Vue 是组件化框架，避免过度依赖字符串拼接模板
  3. 响应式原理：理解 Proxy 与 Object.defineProperty 的差异（Vue 2 vs Vue 3）

📚 参考文档

如果你觉得这篇文章有帮助，欢迎点赞、收藏、转发！ 🌟

avatar
文章
阅读
粉丝