jQuery? ???? ??? ? ???? ?? VUE? ?? ? ???? ? ?????? ??? ????? ? ????.

??, ???????. jQuery? ???? ?? ????. ? ??? ?? ??? ??? ? ? ?? ??? ??? ???? (“jQuery? ???? ?????”). JQuery? ??? ??? ?? ? ? ?? ?? ???? ? ???? ???? ??? ? ??? ?? ??????.

? ???? ?? jQuery? ??? ???? ??? ?? VUE?? ??? ??? ???? ??? ??? ??? ?????? ????. ??? jQuery? "??"?? ???? ???? ?? ??? ????. ?? ??? ?? ??? ??? ?? ?? "?? ?? jQuery? ???? [x]? ????"???? ????, ?? ??? ???? ????? ? ?? ? ? ????. (?? ???, ?? ??? ???? ??? ??? ???? ?? ?????. jQuery? Vue? ?? ?? ??? ?? ? ??? ?? ?? ??? ?????. ?? ?? ????!)

??? jQuery? ?? ? ??? ?? ??? ??? ???.

• DOM?? ??? ????? (??? ?????)
• DOM? ??? ????? (? : ??? ??? ?? ?? ???)
• ?? ?? ?? ?????
• ?? ?? (??? ?? ?? ?)
• Ajax ?? ? ?? ??
• ??? ?? (? : ??? ???? ??? ?????)
• ??? ???? ????? ??????

??, jQuery? ? ??? ?? ???, ??? ?? (??? ? ????) ?? ???? ?? ??? ????. ?? ? ???? ?? ?? ??? ????. ???? ? ??? ??? ???? ???????? ??, ???? ???. ?? VUE ?? ????? ?? ???? ???????.

Vue? "?? ??"? ??????

???? jQuery? ???? ??? ?? ? ?? ??? ???? ?? ??? ?? ???? JavaScript ??? ?????. ??? ??? ????? ???? ??? ?? ?? ???? ??? ? ????. ?? ??, ??? ?? ?? ??? ??? ? ??? ? ? ? ?? ? ??? ??? Ajax ?? ?? ??? ????? ?????.

Vue? ?? ???? ??? ??? ????. VUE ????? ??? ? ?? DOM? ????? "??"? ?????. ??? ??? ??? ?? ? ???? ??? ???.

<header>
  ?? ?? ???</header>
<div id="sidebar">
  ?? ??? ? ???</div>

<main>
  <p id="main-content">
    ?? ? ??? ???, ?? ??? ??? ...
  </p>
  <div id="loginForm">
    ?? ??? ??? ????</div>
</main>

???? jQuery ?? ??????? ??, ??? ?, ??? ?? ?? ?????? ??? ??? ? ????.

 $ (document) .ready (function () {

  $ ( 'Header') // ?? ...

  $ ( '#sidebar') // ?? ...

  $ ( '#loginform') // ?? ...

});

VUE ?? ?????? ?? ?? ? ??? ?????. ??? ?? LoginForm ??? ??? ??? ????? ????? ?? ? ???. VUE ??? ??? ?????.

 ??? vue ({
  el : '#LogInform',
  // ??? ?? ???? ...
});

?, ??? ??? ??? ?? ???? ????? ???? ????? ? ?? VUE ?? ????? ?????.

 ??? vue ({
  el : '#LogInform',
  // ??? ?? ???? ...
});

??? vue ({
  el : '#sidebar',
  // ??? ?? ???? ...
});

?? ?? ???? ????? ????. ??? ?? ??? ??? ?????. ??? ?? ????? ??? ???? ?? (?? ?) ??? ?? ??? ???? ?? ?? ??? ??? ????. ??? ??? ?? ??? ???? ?? ?? ?? ? ??? VUE ?? ??? ???? ??? ?? ? ???? ?? ? ? ????.

??? ??? ?? ????. ??? ?? Vue? ?? ???? ???? ? ??? ??? ?? ??? ???. ?? ??? ?? ??? ?? ?????.

Dom?? ??? ?????

??? ?? ??? ? ?? ????? ??? ??? "DOM?? ??? ?? ??"???. ??? ?? ????? ???? ?? ??? ???. ??? ??? ?? ???? ???? ?????. ??? ?? ??? ????.

 <button id="myButton">?? ?????!</button>

 $ (document) .ready (function () {

  $ ( '#myButton'). ?? (function () {
    ?? (1);
  });

});

?? Vue? ??? ?????? ??? ???.

<div id="app">
  <button>?? ?????!</button>
</div>

const app = new vue ({
  el : '#app',
  ?? : {
    dosomething : function () {
      ?? (1);
    }
  }
});

VUE ?? ????? ????? ??? ?? ? ???? ?? ( "??")? ?? ???? ??? ?? ??????. Vue? ??? DOM? ??? ???? (EL ?? ??, ??? ??? ?? ???? ??? ?????). Vue? ?? ?? ?? ?? ? ? ? ?????. ?? ?? ???? ??? ???? ?? ? ????. ?? ID ?? ???? ?? ?? ??? ??? ????. ??? ??? ?? ID? ???? ??? ???? ??? ????? ?? ??? ??? ????.

? ?? ?? ??? ??? : DOM?? ??? ?? ? ??. ??? ?? ? ? DOM? ?? ??? ???? ?? ? ???? ???????.

 <button id="myButton">?? ?????!</button>

$ (document) .ready (function () {

  $ ( '#myButton'). ?? (function () {
    $ ( '#result'). text ( '??? ?? ??????. ?????!');
  });

});

? ??? ????? ?? ??? ???? ?? ???? ???? jQuery ???? ???? ???? ???? ?????. ?? VUE ??? ??????.

<div id="app">
  <button>?? ?????!</button>
  <span>{{resulttext}}</span>
</div>

const app = new vue ({
  el : '#app',
  ??? : {
    resultText : ''
  },
  ?? : {
    dosomething : function () {
      this.resulttext = '??? ?? ??????. ?????! ';;
    }
  }
});

? ???? vue? ??? ?? (?? ??? ?)? ???? ?? ???? ??? ??? ? ? ??? ?????. ?? ??? ???? ?? ???? ??? ?? ???? ???? ?????.

?? ???, vue? v-on ??? ??? ????? ??? ??? @click = "dosomething"?? ?? ? ? ????.

?? ??? ?? ????

?? ??? ??? JavaScript?? ??? ? ??? ?? ????? ??? ? ? ?? ? ????. JavaScript ???? ??? "? ??"? ???? ?? ??? ???? ?? Perl ????? ???? ?? ????. ??? ??? ????? ?? ????? ??? ?? ????? ??? ? ???? ???? ????. ?? ?? ??? ?? ?? ??? ???? ??? jQuery ??? ??? ???.

= ??? ??????

$ (document) .ready (function () {
  $ first = $ ( '#first');
  $ second = $ ( '#second');
  $ sum = $ ( '#sum');
  $ button = $ ( '#sumbutton');

  $ button.on ( 'click', function (e) {
    e.preventDefault ();
    ? = parseint ($ first.val (), 10) parseint ($ Second.val (), 10);
    $ sum.val (?);
  });
});

? ??? jQuery? Val () ???? ?? ?? ?? ??? ?????. ?? DOM?? 4 ?? ?? (? ?? ?? ?? ? ?? ??)? ?? ?? ??? ?? ??? ???? ??? ?????. ?? VUE ??? ??????.

= ??? ??????

??? vue ({
  el : '#MyForm',
  ??? : {
    ?? : 0,
    ? ?? : 0,
    ? : 0
  },
  ?? : {
    dosum : function () {
      this.sum = this.first this.second;
    }
  }
})

??? ???? Vue ?? ??? ?????. ??, V-Model? VUE? DOM? JavaScript? ??? ??? ??? ???? ??? ?????. ??? ?? ??? ?? ??? ???? ??????. ???? ???? ??? ???????. ??? ???? ???? ???????. .Number? VUE?? ?? ??? ?? ??? ?? ??? ????? ???? ?????. ??? ??? ???? ?? ??? ???? ?? ?? ?? ??? ??? ?????. ?? ?? 1 ?? ?? JavaScript? ??? ??? ??? ??? ???? ??? ????.

? ?? ??? "??"? @click.prevent???. ?? @Click? ??? ?? ???? ?? ? ?? .prevent? ????? ??? ?? ??? ???? ?????? (event.preventDefault ()? ??).

??? ??? ??? ??? ? ?? ???? ???? ????. ??? ?? ? ????? (VUE?? ???? ?????).

??? ?? ???? ?????, Vue? ?? ? ????? ?? ???? ???? HTML? ?????? ? ???? ? ??? ??? ??? ???.

????? ??? ??? ?? ? ?? ????.

=

??? vue ({
  el : '#MyForm',
  ??? : {
    ?? : 0,
    ?? : 0
  },
  ?? : {
    ? : function () {
      ??? ??????.
    }
  }
})

VUE? ? ?? ??? ?? ? ?????. ?? ?? ????????? ???? ?????. ?? ????? ? ?? ?? ? ??? ?? ? ??? ??? ???????. ??? ?? ?? ???? ?????. ??? ??? ?? ??? ??? ? ? ????.

 ?? {{sum}}???.

Ajax ??

????? Ajax? ???? ?? ??? ?? ?. ??, ?? ??? "??"???? Ajax? ????? ?? ? ????. (??? ?? ??? xmlhttprequest? ??? ??? ? ?? ?? ?? ??? ????.) jQuery? ??? $ .get (...) ???? ?? ??? ???? $ .ajax ()? ? ??? ?? ??? ? ?? ????. jQuery? ??? ? ?? ?? JSONP ??? ???? ?????. ???? JSONP? ?? CORS? ???? ?????? JSONP? ?? ????? API? ?? ??? ???? ?????.

???? Vue? Ajax? ? ?? ??? ?? ??? ????? ???? ??!

??, ??? ???? ???? ??? ????. HTTP ??? ???? ? ??? ??? ?? ??? ??? Vue.js? ???? ??? ???? ??? ??? ? ????? ?????? ?? ??? ????. ?????. ? ?? ??? ????? ? ?? ??? ??? ????.

?? ?? ???? ? ?? VUE ?????? ?? ???? ?? ?? ????? ? Axios???. ??? ???? ??? ???? (Readme?? ???).

 axios.get ( '/user? id = 12345')
  . ?? ?? (?? (??) {
    // console.log (??);
  })
  .catch (?? (??) {
    // ?? ?? ?? Console.log (??);
  })
  . ??? (function () {
    // ?? ??});

Axios? ??? ??? ??? ???? ?? ?? ???? ??? ??? ??? ? ????.

Axios? VUE ???? ???? ?? ??? ??? ?? ??? ?? ????. (??? ??? ????.) ??, ?? ??? ?????. Fetch ? ?? ?????? ??? HTTP ??? ???? ?? ? ?????. Fetch? ????? ? 90%?? ? ????? ??? ?? ??? ??? ??? ?? ?? Polyfill? ??? ? ????.

??? ??? ??? ???? ??? ??? ???? ? Kingsley Silas? Axios? ???? React?? ?? ??? ?? ??? ???? ??????.

Axios? ????? Fetch? ?? ??? ?????? ??? API? ??? ????.

 fetch ( 'http://example.com/movies.json')
  . ?? ?? (?? (??) {
    return response.json ();
  })
  .
    console.log (json.stringify (myjson));
  });

Axios? Fetch? ?? ??? HTTP ??? ????? ?? ? ??? ?? ??? ?????. ??? ??? ?? ?????. ??? Star Wars API? ??? ??? jQuery ?????.

<h1> ?? ?? ??</h1>

$ (document) .ready (function () {
  $ .get ( 'https://swapi.com/api/films', function (res) {
    list = '';
    result.results.foreach (function (r) {
      ?? =`

$ {r.title}

`;; }); $ ( '#films'). html (??); }); });

?? ???? $ .get? ???? API? ????? ?? ???? ?????. ?? ?? ?? ???? ???? Li ?? ??? ?? ??? ???? ?? UL ??? ?????.

?? VUE? ???? ??? ??? ???.

<div id="app">
  <h1>?? ?? ??</h1>
  <ul><li v-for="film in films">{{film.title}}</li></ul>
</div>

const app = new vue ({
  el : '#app',
  ??? : {
    ?? : []
  },
  ?? ? () {
    fetch ( 'https://swapi.com/api/films')
      . then (res => res.json ())
      . ??? (res => {
        this.films = result.results;
      });
  }
})

? ?? ??? ??? ??? V-FOR ???? ???? ????. VUE? ???? (??? JavaScript)? ?? ?? ????. ???? API?? ?????. ??? ?????. ????? ??? ?????. ?? ?? ? JavaScript?? HTML? ???? ?? ????? jQuery?? ??? ?? ???? ??? ??? VUE? ????? ????? ??????.

??? (?? ???) ?

? ?? ??? ???? ???? ?? ??? ???. ??? ?? API? ?? ?? ??? Ajax ?? ??? ?? ?? ?????? ????? ??????. ?? ???? ??? ?????.

• ?? ? ?? ?? ? ???? ?????
• ?? ??, ??? ?? ??? ????? ?????.
• API? ????? ?? ????? ???? ???? ?? ??? ???????.
• ???? ?? ???? ??? ???? ??? ??? ???? ????.

jQuery ???? ???????. ? ??? html???.

?? ?? ?? ?? ?? ??

? ?? ??? ? ?? div??? ??? ????. ??? ??? ??????? ? ? ?? ??? ???? ?? ??? ??? ????? ? ?????. ?? ??? ??????.

 // ... (??? ?? ??, ???? ??) ...

? ??? ?? ????? ? DOM ???? (?? ??, ?? ? div)? ?? ?? ??? ????. ??? ??? ??? ?? ???? ????. ??? ?? ?? ????? ???? API? ??? ?????. ???? ???? ??? ??? ?????? ???? ?????.

?? VUE ??? ??? ???. ??, ?????? ???????.

<div id="app">
  <form>
    <p>
      <label for="search">??</label>
      <input type="text" v-model="search" id="search">
    </p>
    <p>
      <label for="category">??</label>
      <select v-model="category" id="category">
        <option value="">??</option>
        <option value="Food">??</option>
        <option value="Games">??</option>
      </select>
    </p>
    <button :disabled="searchBtnDisabled">??</button>
  </form>

  <div v-html="status"></div>
  <ul v-if="results"><li v-for="result in results">{{result.name}}</li></ul>
</div>

???? ???? ?? ??? ??? ????.

• Vue? ???? ?? ? ? ??? ????? div? ?????.
• ?? ??? V- ??? ???? ???? ?? ??????.
• @click.prevent? ???? ?? ?? ??? ??????.
• ?? : ??? ???? ??? VUE ?? ????? ?? ?????? ???????? (??? ???? ??? ? ? ????).
• ?? ?? ?? ??? ?? ????. JQuery? DOM ?????? ???? ???? HTML? ?? ??? ???? ?? ??? ??? ??? vue? ??? ? ?? HTML? ?? ? ? V-HTML? ???????. html? ?? {{status}}? ??????? ??? ?? ????.
• ?????, ??? V-FOR? ???? ??? ? V-IF? ???? ?????.

?? ??? ?? ?????.

 // ... (??? ?? ??, ???? ??) ...

?? ? ????? ? ?? ?? ??? ??? ?? ?????. ??? ??? ???? ??, ?? ??? ??, ?? ??? ?? ?????. SearchProducts ???? jQuery ????? ??? ?? ????? ????? DOM? ?? ????? ??? ?? ????. ?? ??, ??? ??? ?? ??? ???? ??? ?? ???? ?? ??? ?? ??? ????. ??? ??? ?? ???? ?? ????? ? ??? ????. ????? JavaScript ??? jQuery ???? ??? ? ??? ???.

jQuery? ????, Vue? ??? ?????!

??, ??? ?? ???????. ?? ??? ????, ??? jQuery? ???? ?? ??? ???? ??????, ?? ??? ???? ??????? ???? ????.

??? Vue? jQuery? ???? ? ??? ????? ?? "?? ??"?? ?????. VUE? ??? ?? ????? ???? ?? ? ?? ??????? ??? ?? ? ??? ??? ????. ??? ??? ??? ?? Vue? ??? "???? jQuery"????? ?? ????????!

? ??? jQuery?? vue? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!