Vue.JsNguyễn Văn Cảnh - Framgia

Giới thiệu

➺ Là một thư viện dùng để xây dựng web interfaces.

➺ Bản chất là View Model được định nghĩa trong mô hình MVVM.

➺ Mục đích là cung cấp lợi ích của reactive data binding và composable view components với API sao cho càng đơn giản càng tốt.

➺ Không phải 1 framework toàn diện, nó chỉ là tập trung vào các lớp view.

=> Dễ dàng tích hợp với các thư viện khác và sử dụng vào các dự án đang hoạt động.

➺ Phiên bản đầu tiên: 2/2014.

=> Vậy thì Vue.js cung cấp những gì? Điều gì làm cho nó khác biệt?

Cấu tạo

➺ Vue.js bao gồm 2 thành phần cơ bản:

➤ Reactive data binding system

➤ Component System

Cấu tạo (1)

➼ Reactive data binding

- Core của Vue.js là một hệ thống reactive data-binding giúp đồng

bộ hóa dữ liệu của bạn và DOM.

Cơ chế: Khi sử dụng Jquery thao tác với DOM, sử dụng cú pháp đặc biệt trong các mẫu HTML của Vue để ràng buộc DOM về các dữ liệu cơ bản. Khi một ràng buộc được tạo ra, DOM sẽ được đồng bộ hóa với dữ liệu.

=> Bất cứ khi nào dữ liệu bạn thay đổi thì DOM cũng sẽ được cập nhật cho phù hợp

Cấu tạo (2)

➼ Component System

- Là một khái niệm quan trọng trong Vue.

- Cho phép xây dựng những ứng dụng quy mô lớn với các thành phàn nhỏ khép kín.

=> Bất kỳ ứng dụng nào đều có thể được trừu tượng hóa dưới dạng cây các thành phần.

Cài đặt

https://vuejs.org/guide/installation.html

➤ Tải và Cài đặt bằng npm:

npm install vue

Constructor

➧ Khai báo:var vm = new Vue({ // options});

Properties

➜ Các tùy chọn của một đối tượng Vue là một object.

➜ Bao gồm:

- data

- methods

- template

var data = { a: 1 }var vm = new Vue({ data: data})vm.a === data.a // -> true

vm.a = 2, data.a // -> 2

data.a = 3, vm.a // -> 3

Mustache Bindings

➧ Text:

<span>Message: {{ msg }}</span>- Dấu ngoặc nhọn sẽ thay thế bằng giá trị của msg trên các đối tượng dữ liệu tương ứng.

- Tự động cập nhật khi giá trị của msg thay đổi trong object

➧ Raw HTML

- Dấu ngoặc nhọn đôi sẽ diễn tả dữ liệu như dữ liệu mấu mà không phải dưới dạng HTML.

=> Muốn hiển thị dữ liệu dưới dạng HTML thì phải dùng {{{ ... }}}

<div>{{{ raw_html }}}</div>

Mustache Bindings (1)

➧ Attributes

- Có thể sử dụng được bên trong thuộc tính của các thẻ HTML

<div id="item-{{ id }}"></div>

➧ Javascript Expressions (Biểu thức)

{{ number + 1 }}, {{ ok ? 'YES' : 'NO' }}

➧ Filters

{{ message | filterA | filterB }}

Mustache Bindings (2)

➤ Ví dụ:var object = {

message: 'Hello world!'

}

<div id="example">

{{ message }}

</div>

new Vue({

el: '#example',

data: object

})

=> Câu hỏi đặt ra là khi object thay đổi thì view có cần xử lý hay không?

Directives

➤ Là thuộc tính đặc biệt với tiền tố v-.

➤ Mục tiêu là áp dụng hành động chi DOM khi giá trị của nó thay đổi.

➤ Xét ví dụ sau: <p v-if="greeting">Hello!</p>

➤ Ở đây, v-if sẽ quyết định việc insert/remove thẻ <p> dựa vào giá trị của greeting.

➤ Trong trường hợp có thêm argument, ký hiệu bằng dấu: sau tên directives. Ví dụ:<a v-bind:href="url"></a>

- href là argument. Nó nói lên v-bind sẽ sinh ra thuộc tính href cho thẻ <a> với giá trị là url.

➤ Để lắng nghe sự kiện của DOM:

<a v-on:click="doSomething">

- Trong trường hợp này. argument là tên của sự kiện.

Directives _ Shorthands

➤ Các tiền tố v- hoạt động như một gợi ý trực quan cho bạn biết được ban đang thao tác với Vue

➤ Với một số Directives thường xuyên được sử dụng hay nhu cầu tiền tố v- trở nên ít quan trọng hơn.

=> Vue đặc biệt cung cấp shorthands cho 2 directives là v-bind và v-on

➤ v-bind shorthands:<!-- full syntax --><a v-bind:href="url"></a><!-- shorthand --><a :href="url"></a>or<!-- full syntax --><button v-bind:disabled="someDynamicCondition">Button</button><!-- shorthand --><button :disabled="someDynamicCondition">Button</button>

Directives _ Shorthands (1)

➤ v-on shorthands:<!-- full syntax --><a v-on:click="doSomething"></a>

<!-- shorthand --><a @click="doSomething"></a>

➤ Vue có thể phân tích 1 cách chính xác mặc dù k đúng với quy chuẩn của HTML.

Computed Properties

➢ Hữu ích trong trường hợp giá trị của một biến phụ thuộc vào một hay nhiều biến khác.

➢ Lấy ví dụ: Bạn đưa cho người dùng một ô input, yêu cầu họ nhập vào 1 số, hệ thống sẽ tự động trả về số mới gấp đôi số người dùng nhập. Thông thường, bạn sẽ có một sự kiện lắng nghe, chờ người dùng nhập xong input đầu vào thì bạn bắt đầu cập nhật dữ liệu.

➢ Vue.js cho phép bạn làm điều này đơn giản hơn rất nhiều.

Computed Properties (1)

- Basic Exemple

var vm = new Vue({

el: '#example', data: { a: 1 }, computed: { b: function () { return this.a + 1 } }})=> Tính toán cho b phụ thuộc vào a và được đồng bộ hóa.

Computed Properties (2)

- Computed Properties with $watch

var vm = new Vue({ data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }})vm.$watch('firstName', function (val) { this.fullName = val + ' ' + this.lastName})vm.$watch('lastName', function (val) { this.fullName = this.firstName + ' ' + val})

Class and Style Bindings

➤ Bindings Class

- Objects:

<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>data: { isA: true, isB: false}

=> Khi giá trị của isA, isB thay đổi thì tên class hiển thị cũng được cập nhật tự động

- Bạn cũng có thể truyền data kiểu object như sau:data: { classObject: { 'class-a': true, 'class-b': false }}

Class and Style Bindings (1)

- Array:

<div v-bind:class="[classA, classB]">data: { classA: 'class-a', classB: 'class-b'}

➤ Bindings Inline

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>data: { activeColor: 'red', fontSize: 30}

Conditional Rendering

Trong Laravel,

@if ($ok) <h1>Yes</h1>@else

<h1> No</h1>@endif

=> v-if, v-show, v-else

List Rendering

<ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li></ul>var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] }})

List Rendering (1)

- v-for với Object:<ul id="repeat-object" class="demo"> <li v-for="value in object"> {{ $key }} : {{ value }} </li></ul>new Vue({

el: '#repeat-object', data: { object: { FirstName: 'John', LastName: 'Doe', Age: 30 } }})

- Range v-for:<div> <span v-for="n in 10">{{ n }} </span></div>

Methods and Event Handling

<div id="example"> <button v-on:click="greet">Greet</button></div>var vm = new Vue({ el: '#example', data: { name: 'Vue.js' }, methods: { greet: function (event) { alert('Hello ' + this.name + '!') alert(event.target.tagName) } }})

Components

➲ Là một tính năng mạnh mẽ nhất của Vue.js.

➲ Giúp mở rộng các phần tử HTML cơ bản

➲ Giúp đóng gói và sử dụng code nhiều lần.

➲ Cao hơn, Components là thành phần mà Vue.js đính kèm để xác định hành vi

➲ Trong một số trường hợp, nó cũng được sử dụng như một phần tử HTML

Components (1)

- Cấu trúc: var MyComponent = Vue.extend({ // options...})

Hoặc là:/ Globally register the component with tag: my-componentVue.component('my-component', MyComponent)

Ví dụ:<div id="example"> <my-component></my-component></div>// definevar MyComponent = Vue.extend({ template: '<div>A custom component!</div>'})// registerVue.component('my-component', MyComponent)

Components (2)

➤ Passing Data with props

- HTML:

<child msg="hello!"></child>

- Js:

Vue.component('child', { // declare the props props: ['msg'], // the prop can be used inside templates, and will also // be set as `this.msg` template: '<span>{{ msg }}</span>'})

Form Input Bindings

➤ Text

➤ Checkbox<input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{ checked }}</label>

➤ Radio

<input type="radio" id="one" value="One" v-model="picked"><label for="one">One</label><span>Picked: {{ picked }}</span>

➤ Select<select v-model="selected"> <option selected>A</option></select><span>Selected: {{ selected }}</span>

Form Input Bindings (1)

➤ Value Bindings

- Các ràng buộc dữ liệu là các chuỗi bình thường, (true hoặc false cho checkbox)

- Tuy nhiên, trong một số trường hợp, chúng ta muốn ràng buộc dữ liệu theo một đối tượng của Vue

=> Sử dụng v-bind

- Check box: <input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b">

Transitions

➤ Tự động chuyển hiệu ứng khi các thành phần được thêm hoặc bỏ ra khỏi DOM.

➤ Vue.js tự động add/remove class của CSS để tạo hiệu ứng chuyển tiếp cho bạn.

➤ Sử dụng:

<div v-if="show" transition="my-transition"></div>

➤ Sử dụng cùng với v-if, v-show, v-for

Transitions (1)

➤ Example:

- HTML:<div v-if="show" transition="expand">hello</div>- CSS:.expand-transition { transition: all .3s ease; height: 30px; padding: 10px; background-color: #eee; overflow: hidden;}.expand-enter, .expand-leave { height: 0; padding: 0 10px; opacity: 0;}

Kết luận

➤ Là một trong những thư viện dễ dàng nhất để tìm hiểu.

➤ Thư viện nhỏ và tiện dụng,

Tóm lại:

➤ Tạo một đối tượng Vue.js mới với new Vue({})

➤ Hai cách ràng buộc dữ liệu với v-model

➤ Xuất dữ liệu cho các trang web với 2 dấu ngoặc nhọn {{}}

➤ Tạo danh sách với v-for

➤ Hiển thị có điều kiện với v-if, v-show

➤ Xử lý sự kiện với v-on:* hay ngắn gọn hơn là @click

➤ Xác định dữ liệu, các phương thức và tính toán thuộc tính

THANKS FOR LISTENING!