jQuery

Vue.jsbyAyshSu@2017/2/22

PM

jQuery1.

2. AJAX

3. HTML

HTML:

: :

JS:function search() { var params = { id: $('#form-id').val(), name: $('#form-name').val() }; // new FormData($('form')[0]); $.post(url, params, function (response) { var html = ''; response.forEach(function (item) { html += ''; html += '' + item.id + ''; html += '' + item.name + ''; html += '' + item.quantity + ''; html += ''; }); $('tbody').html(html); });}

HTML JS

// .... response.forEach(function (item) { html += ''; html += '' + item.id + ''; html += '' + item.name + ''; html += '' + item.quantity + ''; html += '';});$('tbody').html(html);

onclick=""

handler

rz

DOM

DOM

response.forEach(function (item) { html += ''; html += '' + item.id + ''; html += '' + item.name + ''; html += '' + item.quantity + ''; html += '';});$('tbody').html(html);

...

JS : - +

: - +

- var params = {- id: $('#form-id').val(),- name: $('#form-name').val()- }- $.post(url, params, function (res) {+ $.post(url, JS, function (res) {

HTML- +

- $('form').on('submit', search);

JS

+ + .+ .+ .+

- // for - html += '';- });- $('tbody').html(html);

HTMLHTML

JSDOM

Vue.js

JS (JS)

(JS)(HTML)(DOM)

"JavascriptFague"...

https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4

Vue.js

"JavaScript fatigue"

: Vue 2.0 ( www.infoq.com/cn/articles/vue-2-progressive-front-end-solution )

Vue.jsNode.jswebpack....

jQuery

- vue.js

JSFiddle JSBin

script tag

https://cn.vuejs.org/v2/guide/#%E8%B5%B7%E6%AD%A5

{{}}

Hello {{ name }}!

var app = new Vue({ // Vue el: '#app', // DOM data: { // JS name: 'world' }});// name ...setTimeout(function () { app.name = 'John'; // name }, 2000);

vmodel

Hello {{ name }}!

var app = new Vue({ el: '#app', data: { name: 'world' }});

MVVM

: Overview - vue.js ( https://v1.vuejs.org/guide/overview.html )

hps://goo.gl/NwKA5b

https://goo.gl/NwKA5b

1.

2. AJAX

3. AJAX

Vue.js+

https://unpkg.com/vue/dist/vue.js

.min.jshttps://unpkg.com/vue/dist/vue.min.js

https://unpkg.com/vue/dist/vue.jshttps://unpkg.com/vue/dist/vue.min.js

- + : - + + : - +

JSVue- // code

var app = new Vue({

el: '#app', // Vue #app DOM data: { // data v- {{ }} form: { id: '', name: '' } } });

1.

2. AJAX

3. AJAX

von:submit

- + :

v-on: @ .prevent event.preventDefault();

methodsvar app = new Vue({ el: '#app', data: { form: { id: '', name: '' } },+ // methods function+ methods: {+ search: function () {+ // AJAX + }+ }});

1.

2. AJAX

3. AJAX

$.ajax()$('table').html(html)

thisVuedatadata: { form: { id: '', name: '' },+ results: []},

methods: { search: function () {+ var vm = this; // callback this + $.post('http://api/', vm.form, function (res) {+ vm.results = JSON.parse(res);+ }); }

vfor + + {{ item.id }} + {{ item.name }} + {{ item.quantity }} +

1.

2. AJAX

3. AJAX

hps://goo.gl/juKbew

https://goo.gl/juKbew

...

disabled

classinvalid

classtrue/false

: - +

!isFormValid true class "invalid" false

v-bind: :

disabled

- +

!isFormValid true disabled

v-bind nameidvalue ...

datacomputed data: { form: { id: '', name: '' }, results: [] },+ computed: {+ isFormValid: function () {+ return this.form.name !== '';+ }+ }

computed data computed

data name

name isFormValid

!isFormValid true

"invalid" class

"disabled"

!isFormValid false

"invalid" class

"disabled"

:

hps://goo.gl/x67m4Z

https://goo.gl/x67m4Z

jQuery Vue.js

Vue new Vue() data

Vue {{ }}

v-model

v-on: @

computed

v-bind: :

:class=""

JSDOM

hps://cn.vuejs.org/v2/guide

https://cn.vuejs.org/v2/guide

Vue.js(Component)