vue.js? ????? ?? ?? ??? ??? ?? ??????? ???? ? ??? ???? JavaScript ??? ?????. ?? ??? ??? ????. 1. ?? ??? ???, 2. ?? ?? ??, 3. ?? Dom. ??? ??? ?? vue.js? ?? ????? ????? ?? ???? ??? ?? ??? ???? ?? ? ???? ?? ??? ????.

??

Vue.js? ??? ?? ?? ???? ??? ??????? ???? ?? ??? ????? ?? ?????. ???, ??? Vue.js? ?? ??? ??? ???? ?? ? ???? ? ??? ??? ??? ???? ? ??????. ? ??? ?? vue.js? ???? ????? ?? ?? ??? ??? ?? ??????? ???? ???? ??? ??? ?? ??? ????.

?? ?? ??

vue.js? ???? JavaScript ??? ?????. ??? ??? ???? ?? ???? ?? ??? ?? ????? ?? ? ? ????? ????. ???? ?? ? ??? ??? ? ?? ?????? ???? UI ?? ??? ?? ???? ??? ? ? ????. vue.js? ?? ??? ??? ???? ?????? ???? ??? ? ????.

vue.js? ???? ?? ES6 ??, DOM ?? ?? ?? ???? JavaScript ??? ??????. Vue.js? ?? ??? ?? ????? ???? ? ???? ?? ? State Management??? Vue Router ? Vuex? ?? ?? ????? ? ??? ???? ??? ?????.

?? ?? ?? ?? ??

vue.js? ?? ?? ? ??? ???

vue.js? ?? ? ??? ???? ?? ?? ? ???? ???? ??? ???? ??? ??? ???? ??? ? ? ????. ???? ???? Vue.js? ?? ??? ?? ???? ???? ?? DOM? ???? ???????.

 // ?? ??? ??? ?? New Vue ({
  el : '#app',
  ??? : {
    ??? : '????? vue.js!'
  }
})

? ??? ???? vue.js? message ???? ?? ? ? #app ?? ??? ??? ???? ???????. ? ????? ?? ??? ?? ????? DOM? ???? ???? ??? ??? ????.

?? ?? ??

Vue.js? ?? ??? ? ?? ??? ??? ??? ?? ?? ???? ?? ??????. UI ?????? ?? ?? ??? ?????? ???? ??? ?????? ????? ?? ???? ? ? ??????.

 // ?? ?? ? vue.component ( 'todo-item', {
  ?? : [ 'todo'],
  ??? : &#39;<li> {{todo.text}} </li>&#39;
})

??? vue ({
  el : &#39;#app&#39;,
  ??? : {
    ??? ? : [
      {id : 0, text : &#39;??&#39;},
      {id : 1, ??? : &#39;??&#39;},
      {id : 2, ??? : &#39;??? ??? ? ?? ?? ?? ????&#39;}
    ]]
  }
})

? ???? todo-item ?? ??? ???? VUE ?????? ?????. ? ?? ??? ?? ??? ??? ???? ?????? ??? ? ????? ????? ????.

?? ?

vue.js? ?? DOM? ???? ??? ??? ??????. ?? DOM? ?? DOM? ??? ? ?? JavaScript ?????. vue.js? ?? ?? DOM? ??? ?? DOM? ??? ???? ?? ???? ?? ? ?????? ?? DOM? ??? ??? ?? ???? ??? ??????.

??? ?

?? ??

vue.js? ?? ??? ?? ???? ? ?? ??? ??? ?? ????? ?? ? ????.

 // ?? ??? ?? New Vue ({
  el : '#app',
  ??? : {
    ??? : '????? vue.js!'
  },
  ?? : {
    ReverseMessage : function () {
      this.message = this.message.split ( ''). Reverse (). join ( '')
    }
  }
})

? ???? VUE ????? ???? message ? ??? ???? ?? reverseMessage ???? ?????. ? ??? ?? ???? ??? ??? ?????? ???? ?? ? ? ????.

?? ??

vue.js? ?? ???? ?? ? ??, ??? ?? ?? ? ?? ? ?? ??? ?????? ?????? ??? ??????? ?? ? ? ??? ?????.

 // ?? ?? ?? new vue ({
  el : '#app',
  ??? : {
    FirstName : 'foo',
    ??? ?? : '?'
  },
  ?? : {
    fullName : function () {
      this.firstname ''this.lastname? ??????
    }
  }
})

? ???? Computed Attribute fullName ???? firstName ? lastName ? ??? ???? ?????. ? ???? ?? ? ??? ???? ?? ???? ??? ??? ???? ?????? ??? ??? ??????.

???? ?? ? ??? ?

vue.js? ???? ?? ???? ???? ?????? ??? ?? ??? ????? ?? ? ? ?? ???? ??? ?? ? ????. ? ?? ??? ?? ??? ????.

• ??? ???? ?? : ??? ??? ?? ???? ?? VUE? ?? ? ???? ?? ??? ??? ?????? ??????.
• Vue DevTools ?? : VUE ?? ????? ?? ? ?? ????? ????? ? ????? ?? ??? ???? ???????.
• ???? ?? ?? : ??? mounted ??? ???? ??? ?????? ??????.

?? ??? ? ?? ??

?? ????????? vue.js ?? ????? ??? ????? ?? ?? ?????. ??? ? ?? ??? ?? ?? ?????.

• v-if ? v-show ???? ?? ?????? . v-if ? ??? ?? ??? ?? ????? ????? v-show ?? ??? ??? ????? ?????.
• ????? ??? ??? ????? : ??? ?? ??? ?? ?? ?? ? ???? ???? ??? ??????.
• key ?? ?? : v-for ???? key ??? ???? VUE? DOM??? ????? ?????? ? ??? ? ? ????.

 // ?? ??? ?? New Vue ({
  el : '#app',
  ??? : {
    ?? : [
      {id : 1, ?? : '?? 1'},
      {id : 2, ?? : '?? 2'},
      {id : 3, ?? : '?? 3'}
    ]]
  },
  ?? : {
    ? ?? ? : function () {
      // ??? ??? ??}
  },
  ?? : {
    filternitems : function () {
      reture this.items.filter (item => item.id> 1)
    }
  }
})

? ???? ??? ?? ??? methods ? ???? ?? ?? filteredItems ???? ??? ???? ?? ????? ??? ??????.

??? ? ???? ??

vue.js? ?? ??? ??? ???? ???? ??? ??? ????? ????. Vue Router ? Vuex? ?? ??? ???? ???? ???? ???? ?? ?? ????? ?? ? ? ????. ??? ??? ??? ??? ? ??? ? ??? ? ??? ????.

• ? ?? : Vuex? ??? ?? ?? ??? ????? ????? ???? ?? ??? ?? ???? ????? ??? ? ????. Vuex? ???? ?? ??? ???? ?? ?? ? ? ????? ??? ????? ??? ?? ????.
• ??? ?? : VUE ???? ??? ??? ?? ??? ????? ??? ??? ??? ?? ? ? ?? ??? ??? ? ????. ??? ?? ? ?? ?? ????? ?? ??? ????? ?? ??? ????? ? ?? ??? ???? ?? ????.

????? Vue.js? ?? ??? ??? ?? ??? ???? ???, ??? ? ???? ?? ? ???? ??? ?????. ? ??? ??? ??? ?? vue.js? ? ? ???? ??? ? ?? ????? ?? ? ? ????.

? ??? ??? ??? vue.js? ? : ?? ?? ? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!