#Giới thiệu Vue 2

Ghi chú cá nhân — Tài liệu này viết cho bản thân để tham chiếu nhanh khi phát triển Vue 2.7.x, đặc biệt trong môi trường AEM (Adobe Experience Manager).

#Vue.js là gì?

Vue (phát âm là /vjuː/, giống như view) là một Progressive JavaScript Framework dùng để xây dựng giao diện người dùng (UI). Không giống như các monolithic framework, Vue được thiết kế từ đầu để có thể áp dụng từng phần (incrementally adoptable).

• Core chỉ tập trung vào view layer → dễ tích hợp với thư viện hoặc dự án sẵn có.
• Kết hợp với tooling hiện đại → xây dựng Single-Page Applications (SPA) phức tạp.

#Cài đặt

#1. CDN (Đơn giản nhất — dùng trong AEM clientlibs)

Phù hợp để prototype hoặc tích hợp trực tiếp vào AEM clientlib mà không cần build step:

<!-- Development (có warnings đầy đủ) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<!-- Production (minified, tối ưu tốc độ) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

Cho production, pin cụ thể version để tránh breaking changes bất ngờ:

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

Nếu dùng ES Modules native trong browser:

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js'
</script>

#2. NPM (Khuyến nghị cho dự án lớn)

# Cài phiên bản stable mới nhất của Vue 2
npm install vue@^2

NPM kết hợp tốt với các module bundler như Webpack hoặc Rollup, và hỗ trợ [Single File Components (.vue)]

#3. Vue CLI

Vue cung cấp official CLI để scaffold SPA nhanh chóng:

npm install -g @vue/cli
vue create my-project

#Các loại build của Vue 2

Vue 2 cung cấp nhiều build khác nhau trong thư mục dist/. Hiểu rõ để chọn đúng build cho từng môi trường:

#Full vs Runtime-only

// ❌ Cần Compiler (dùng Full build)
new Vue({
  template: '<div>{{ message }}</div>'
})

// ✅ Không cần Compiler (dùng Runtime-only build)
new Vue({
  render(h) {
    return h('div', this.message)
  }
})

Khi dùng vue-loader với file .vue, template đã được pre-compile → chỉ cần Runtime build, nhẹ hơn 30%.

#Cấu hình alias Webpack (dùng Full build)

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      // Dùng full build (có compiler)
      'vue$': 'vue/dist/vue.esm.js'
      // Webpack 1: 'vue/dist/vue.common.js'
    }
  }
}

#Development vs Production Mode

#Webpack 4+ (khuyến nghị)

module.exports = {
  mode: 'production' // tự động set NODE_ENV=production
}

#Webpack 3 (dùng DefinePlugin)

const webpack = require('webpack')
module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    })
  ]
}

#CSP (Content Security Policy)

Một số môi trường (ví dụ: Google Chrome Apps) áp dụng CSP, cấm new Function() — tính năng mà Full build dùng để compile template.

Giải pháp: Dùng Runtime-only build kết hợp với vue-loader / vueify để pre-compile template → hoàn toàn tương thích CSP.

<!-- AEM HTL component -->
<div data-sly-use.model="com.example.MyModel"
     id="my-vue-app">
  <!-- Vue mount vào đây sau khi HTL render xong -->
</div>

// clientlib JS
new Vue({
  el: '#my-vue-app',
  data: {
    message: 'Hello from Vue!'
  }
  // Không cần template string → Runtime build là đủ
})

#Vue Devtools

Cài extension để debug Vue app dễ dàng hơn:

• Chrome / Edge
• Firefox

#Luồng hoạt động cơ bản

#Tips & Tricks — Vue 2 + AEM HTL

#Tránh xung đột HTL và Vue template syntax

HTL dùng $\{\} và $\{'...'\}, Vue dùng \{\{ \}\}. Chúng không xung đột nhau vì:

• HTL xử lý server-side (Java) → render ra HTML thuần.
• Vue xử lý client-side (JavaScript) → mount vào DOM đã render xong.

<!-- HTL xử lý trước (server-side) -->
<div data-sly-use.model="com.example.MyModel">
  <span id="greeting-app"
        data-name="${model.userName}">
  </span>
</div>

<!-- Vue đọc data từ attribute, không cần biết HTL -->
<script>
new Vue({
  el: '#greeting-app',
  data() {
    return {
      name: document.getElementById('greeting-app').dataset.name
    }
  },
  template: '<span>Xin chào, {{ name }}!</span>'
})
</script>

#Truyền data từ HTL sang Vue qua data-* attributes

<!-- HTL -->
<div id="product-app"
     data-product-id="${properties.productId}"
     data-price="${properties.price @ context='number'}">
</div>

// Vue mount
const el = document.getElementById('product-app')
new Vue({
  el,
  data: {
    productId: el.dataset.productId,
    price: parseFloat(el.dataset.price)
  }
})

#Sử dụng v-cloak để tránh FOUC (Flash of Uncompiled Content)

/* clientlib CSS */
[v-cloak] { display: none; }

<!-- HTML -->
<div id="app" v-cloak>
  <p>{{ message }}</p>
</div>

v-cloak sẽ được Vue tự động xóa sau khi mount → tránh hiện \{\{ message \}\} thô trước khi Vue chạy.

#Tài nguyên tham khảo