[Day26] Vue 3 - Hello Vue

当我们的网页引入 Vue.js 的时候,会建立一个 Vue 的全域变数,并且提供各种功能等我们去使用。

1. 建立 Vue 实体物件

  1. 在 html 放置一个提供挂载的节点
    <!-- HTML -->
    <div id="app"></div>
    
  2. 透过 Vue.createApp 建立实体物件
    // JS
    const vm = Vue.createApp({ 
    
    }); 
    
  3. 将 Vue 实体物件挂载到网页节点上
    // JS
    vm.mount('#app'); 
    
  4. 或是,不使用变数存放 Vue 实体物件,直接挂载 (存到变数才有办法够过变数调用,和其他物件沟通)
    // JS
    Vue.createApp({ 
    
    }).mount('#app'); 
    
  • 一个网页页面可以有多个 Vue 物件
  • mount的对象可以是 id, class 或 tag,但是一个 Vue 物件实体只会挂载到一个标签(第一个)
  • Vue 一样需要等 DOM 载入完成才能正常运作,引入位置应放在底部,不要放在 head 标签内。

2. 资料绑定

在完成第一个步骤的挂载後,因为 Vue 实体物件内还没有任何资料,所以不会产出任何画面,接下来要在 JS 中建立资料,并且在 HTML 中绑定资料。

  1. 新增资料:
    // 用 data 函式来储存资料(固定格式,务必多练习记住)
    const vm = Vue.createApp({ 
      data () {
        return {
          title: 'Hello'
        }
      }   
    }).mount('#app'); 
    
  2. 资料绑定
    <!-- {{}} 两个大括号可以绑定成内容文字 -->
    <!-- 括号内打 data 里面 return 的物件名称即可 -->
    <div id="app">
      {{ title }} !!
    </div>
    
  3. 上面两个步骤若成功执行,网页会显示 Hello !!
  4. 在这个范例中,使用变数 vm 来存放 Vue 物件,此时我们也可以透过变数来操作内部状态。
    (Vue 物件需要被 mount 起来才能变更)
    // 前面多一个 $ 符号
    vm.$data.title = 'Hola';
    

3. 资料绑定变化型

资料绑定不仅仅是输出而已,还能做运算。

  1. 新增『数值』资料:
    const vm = Vue.createApp({ 
      data () {
        return {
          money: 100
        }
      }   
    }).mount('#app'); 
    
  2. 在 HTML 中绑定实作运算
    <div id="app">
      {{ title * 100 }} 
    </div>
    
  3. 上面两个步骤若成功执行,网页会显示 10000

<<:  【Day19-颜色】眼前的黑不是黑,你说的白是什麽白?——浅谈图片资料的色彩空间

>>:  # Day 25 Heterogeneous Memory Management (HMM) (Summary)

拥抱组合叠叠乐 Composition API [序]

前言 为了解决 Vue.js 2x 元件之间无法重复使用逻辑和程序码,而出现了 Compositio...

管理、技术、商业层面来看:应该买一个?还是自己建一个机器学习系统?

在决定要引入机器学习专案的时候,第一个要思考的问题就是,这个服务应该要从外面买?还是要自己建一个?(...

Day 11 | 嵌套元件(二)

本来是没打算分成两天的。但第一天放入了程序码让文章看起来比较冗长,所以只好拆两天啦!今天一样也是 嵌...

在 WordPress 每页文章底下自动附加 FB 粉丝页或社团连结

当我们在 WordPress 写好的每一篇文章,对每一位看文章的读者来说都会得到一点知识价值,而为了...

Day14 font-family 字型发挥吧

刚开始学习的时候,我在font-family写的值都只会设定一个,完全不知道需要加上通用字型,也不...