Vue3官网-深入组件（八）模板引用（ref 和 $refs）、处理边界情况（ `v-once`）

Vue3官网-深入组件（八）模板引用（ref 和 $refs）、处理边界情况（ v-once）

总结：

• 补充

  • Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

  • truthy（真值）：在 JavaScript 中，truthy（真值）指的是在布尔值上下文中，转换后的值为真的值。所有值都是真值，除非它们被定义为 假值（即除 false、0、""、null、undefined 和 NaN 以外皆为真值）。括号内都是假值falsy。

  • .prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

  • ==Event.preventDefault方法取消浏览器对当前事件的默认行为。==比如点击链接后，浏览器默认会跳转到另一个页面，使用这个方法以后，就不会跳转了；再比如，按一下空格键，页面向下滚动一段距离，使用这个方法以后也不会滚动了。该方法生效的前提是，事件对象的cancelable属性为true，如果为false，调用该方法没有任何效果。

  • vue：用组件（app.component）构建一个模板（template），并反复使用模板

  • 父组件、子组件

    • const app = Vue.createApp({
                
        components: {
                
          'component-a': ComponentA,
          'component-b': ComponentB
        }
      })
      

    • 上面代码中app为父组件，ComponentA和ComponentB为子组件

  • Vue中美元$符号的意思

    • 除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。
    • vue中$refs的作用？
      • 当我们需要获取一个dom元素进行操作的时候 可以利用原生js的getElementByXxx 而在vue中可以设置refs来获取这个dom元素

1. 模板引用（ref 和 $refs）

1.1 vue中的 ref 和 $refs

你应该学过jquery吧，没用vue之前，我前端框架是用JS+Jquery+Bootstrap，因为不是数据驱动，为了获取某些元素的value，我常常会使用Jquery.

$("#id").text('xxx')   // 使用Jquery
document.getElementById("id")  // 使用原生Dom

现在我们牛逼了，我们用vue。那vue中，如果我要获取Dom，该怎么做？
这就进入本文的主题ref, $refs，官网解释：

官网解释

1.1.1 ref作用于组件

<div id="app">
    <navbar