Post on 11-Apr-2017
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)