[Day28] Vue3 - 资料绑定

纯 JS 的环境里要改变 DOM 元素，除了要找到他，还要用 setAttribute, textContent...等等方式来绑定资料，在 Vue 中只要把资料准备好，爱怎麽绑就怎麽绑，马上来看看这些『v-』指令的神奇吧！

Vue 范例程序码

接下来的各种功能，都会使用以下这段程序码内的资料来示范，下面的段落就不会再重复撰写宣告 Vue 物件的程序码了。

const vm = Vue.createApp({
  data () {
    return  {
      test: "Hello",
      num: 999,
      testHTML: "<p>Hola</p>"
    }
  }
}).mount('#app');

{{ }}

• 前几天介绍过的双大括号，用来绑定标签内的文字

  <div id="app">
    <h1>{{ test }}</h1>
  </div>
  

• 浏览器渲染後

  <div id="app">
    <h1>Hello</h1>
  </div>
  

v-bind

• v-bind: 用来绑定标签内的『属性』

  <div id="app">
    <h1 v-bind:id="test">Hi</h1>
  </div>
  

• 浏览器渲染後

  <div id="app">
    <h1 id="Hello">Hi</h1>
  </div>
  

• v-bind: 可以直接简写成 ":"，非常方便

  <div id="app">
    <h1 :id="test">Hi</h1>
  </div>
  

v-model

• 前面介绍的两项都是单向绑定，也就是把值取出来然後放到指定位置，v-model 则是双向绑定，除了把值取出来，也可以把值修改後写回去原本存放资料的属性中，通常会搭配 input, textarea, select...等表单元素使用。
• v-model 搭配 input

  <div id="app">
    <input v-model="test">
    <h1>{{ test }}</h1>
  </div>
  

  • 上面的范例码在浏览器渲染後，若在 input 里面输入文字，下方的 h1 也会同时变动。

v-model + 修饰子

v-model後面可以接上修饰子，就可以瞬间完成某些原本需要额外判断的功能

1. <input v-model.lazy="test">
   .lazy 的方法可以在取消锁定在输入栏位时才触发双向绑定。
2. <input v-model.number="num">
   .number 的方法可以将内容的资料转成数字格式
3. <input v-model.trim="test">
   .trim 的方法可以将内容的空白字元过滤掉

v-text

除了用 {{}} 来绑定文字内容，也可以用 v-text来绑定。

<div id="app">
  <h1 v-text="test"></h1>
</div>

要注意的是如果标签内还有其他文字内容，会被 v-text 给覆盖掉。

v-html

v-text 像是 textContent，只会用纯文字显示，若要达到 innerHTML 的功能，就要使用 v-html，就能把 HTML 渲染出来了。

<div id="app">
  <h1 v-html="testHTML"></h1>
</div>

v-once

v-once 只会做一次绑定，後面就算资料变更了，也不会重新渲染。

<div id="app">
  <h1 v-once>{{ test }}</h1>
</div>

v-once 放置在标签内，就像个标示一样，後面没有衔接资料。

v-pre

v-pre 是 {{}} 的跳脱字元，想在网页内容显示双大括号时可以使用。

<div id="app">
  <h1 v-pre>{{ test }}</h1>
</div>

上面 HTML 渲染结果会显示 {{ test }}，不会转换成 Vue 物件内的资料。