[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 物件内的资料。


<<:  Re: 新手让网页 act 起来: Day21 - useReducer vs useState

>>:  day21_Windows ARM 的修图之旅

[Day 25] 阿嬷都看得懂的 CSS 微互动元件

阿嬷都看得懂的 CSS 微互动元件 今天我们要来做动态绘本! https://www.youtube...

Day27-保护鲸鱼人人有责(二)

前言 昨天已经介绍了几个写 Dockerfile 时该注意的地方,但其实需要注意的地方非常非常多,所...

[C 语言笔记--Day04] C 语言的 function call 如何被组合语言实作

这篇文章是用 x86-64 的架构作为例子,因为多数人的电脑是用 x86-64 的架构 只要依照 在...

JavaScript Day17 - 阵列操作(map)

map map() 会建立一个新的阵列,其内容为原阵列的每一个元素经由回呼函式运算後所回传的结果之集...

Day26 - 铁人付外挂测试验收(二) - 导入单元测试

先来回顾一下目前铁人付外挂的资料夹结构: iron-pay ├── composer.json ├─...