Vue.js 學習筆記

# 03. jQuery 與 vue 畫面處理

使用 jQuery 和 Vue 的處理畫面的差異

# jQuery 的載入與使用

  • 載入：打開命令列 > 搜尋 cdnjs > 搜尋 jQuery
  • 使用
    • text()：修改選擇器裡面的純文字內容。
    • html()：可在選擇器內使用 HTML 語法，但較不建議，以避免安全問題。
    • attr()：能修改選擇器的屬性。

# 範例：

let data = {
  src: '../img/logo-Vue.png',
  title: 'Vue.js 手牽手，一起嗑光全家桶'
}

$('.title > h1').text(data.title)
$('.logo').attr('src', data.src)

# Vue 的載入

  • 方式：打開命令列 > 搜尋 cdnjs > 搜尋 vue
  • 注意：要選擇 "vue.js" ，瀏覽器的 Vue.js devtools 才有作用。

# Vue 基本觀念

  • Vue 是 MVVM 的框架。透過 Vue (VM) 將資料 (Model) 跟畫面 (View) 進行綁定。

# Vue 和 jQuery 更新畫面的差異

  • Vue：修改資料時，Vue 會透過 template 同步更新畫面。
  • jQuery：修改資料後，還要額外更新畫面，會多一個步驟。

# 綁純文字： v-text 或 {{ }}

  • 語法：v-text="dataName" 或 {{ dataName }}

# 綁 HTML： v-html 或 {{{ }}}

  • 語法：v-html="" 或 {{{ }}}

# 綁屬性： v-bind 或 :

  • 語法：v-bind:src="dataName" 或 :src="dataName"

# 範例

HTML 部分

<div id="app">
<section>
  <div class="container">
    <div class="title">

      <!-- 語法一 -->
      <!-- 綁定屬性 v-bind -->
      <img v-bind:src="src" alt="" class="logo">
      <!-- 綁定文字內容 v-text -->
      <h1 v-text="title"></h1>

      <!-- 語法二 -->
      <!-- 用簡寫 ":" -->
      <img :src="src" alt="" class="logo">
      <!-- 用 {{ }} -->
      <h1>{{title}}</h1>

    </div>
  </div>
</section>
</div>

JS 部分

let data = {
  src: 'https://vuejs.org/images/logo.png',
  title: 'Vue.js 手牽手，一起嗑光全家桶'
}

let vm = new Vue({
  el: '#app',
  data: data
})

← 04. 事件綁定 →