vue.js? ??? ??? ?????? ???? ? ??? ???? JavaScript ??? ?????. 1) ?? ???? ?? ? ???, ?? ??? ? ?? DOM? ?????. 2) ?? ????????? TODO ?? ????? ???? VUE ???? ???? ?? ? ? ????. 3) ??? ? ? Vue DevTools ? Console.log? ???? ?? ????. 4) ?? ???? V-IF/V- ?, ?? ??? ???, ?? ??? ????? ?? ?? ?? ? ? ????.

??

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

?? ?? ??

vue.js? ?? ????? ????? ???? ???? JavaScript ??? ?????. ?, ?? ?? ????? ? ?? ?? ???? ??? VUE? ?? ????? ????? ?? ? ? ????. ??? ? ????? ??? ???? ????? ??? ??? ?????? ?????.

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

• ?? ??? : vue.js? ?? ? ?? ???? ???? ???? ?? ? ???? ???? ???????.
• ?? ??? : vue.js? ? ?? ??, ????? ??? ??? ??? ?? ??? ????? ?????.
• Virtual Dom : vue.js? Virtual Dom? ???? ??? ??? ????? DOM? ?? ???? ?? ??? ????.

?? ?? ?? ?? ??

vue.js? ?? ? ???

vue.js? ?? ? ???? ?? ? ???? Object.defineProperty ?? Proxy (VUE 3)? ?? ???? ?? ?? ?????. ???? ???? vue.js? ?? ???? ???? ???????. ??? ??? ??? ??? ??? ?? ? ??? ??? ??? ?? ???? ?????.

 const vm = new vue ({
  ??? : {
    ??? : '????? Vue!'
  }
})

// ???? ???? vm.message = 'Hello World!'

?? ? ???? ??? ?? DOM ??? ??? ?? ???? ?? ???? ????. ??? ?? ??? ??????? ?? ?? ??? ??? ? ??? v-once ?? ?? computed ??? ???? ???? ? ???? ??? ?? ?? ???? ????????.

?? ?? ??

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

 <emplate>
  <div>
    <h1> {{title}} </h1>
    <button @click = "incrementCounter"> ?? </button>
    <p> ??? : {{counter}} </p>
  </div>
</???>

<cript>
???? ??? {
  ??? () {
    ?? {
      ?? : &#39;? ?? ??&#39;,
      ??? : 0
    }
  },
  ?? : {
    incrementCounter () {
      this.counter  
    }
  }
}
</????>

?? ?? ??? ??? ?????, ?? ??? ??? ??? ?? ?? ?? ??? ?? ?? ??? ?? ??? ??? ? ? ????. ????? ?? ?? ?? ??? ?????.

??? ?

??? TODO ?? ????? ??????

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

 <emplate>
  <div>
    <?? v-model = "newtodo" @keyup.enter = "addtodo"placeholder = "??? ??? ??">
    <ul>
      <li v-for = "todos in todos": key = "todo.id">
        {{todo.text}}
        <button @click = "removetodo (todo)"> ?? </button>
      </li>
    </ul>
  </div>
</???>

<cript>
???? ??? {
  ??? () {
    ?? {
      Newtodo : &#39;&#39;,
      Todos : []
    }
  },
  ?? : {
    addTodo () {
      if (this.newtodo.trim ()) {
        this.todos.push ({
          id : date.now (),
          ??? : this.newtodo.trim ()
        })
        this.newtodo = &#39;&#39;
      }
    },
    removetodo (todo) {
      this.todos = this.todos.filter (t => t.id! == todo.id)
    }
  }
}
</????>

? ??? v-model ??? ???, v-for Traversal Lists ? v-on ???? ???? ??? ?????. ? ??? ?? ????? ?? Vue.js? ??? ??? ?? ??? ?? ????? ???? ???? ? ????? ??? ??? ? ????.

vue ???? ???? ?? ??? ?? ????? ??????

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

 'vue'?? Vue ?? ??
'vue-router'?? vuerouter ?? ??
'./components/home.vue'?? ??? ?? ??
'./components/about.vue'?? ?? ??

vue.use (vuerouter)

const ?? = [
  {?? : '/', ?? ?? : ?},
  {Path : '/About', ?? ?? : About}
]]

Const Router = New Vuerouter ({{
  ??
})

??? vue ({
  ???,
  ?? : H => H (?)
}). $ mount ( '#app')

Vue ???? ???? ??? ?? ?? ???? ??? ????? ??? ?? ? ? ????. ??? ?? ??? ???????? SEO ?? ? 1 ? ??? ?? ??? ?? ? ?? ????? ?? ? ??? (SSR) ?? ?? ????? ???????.

???? ?? ? ??? ?

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

• Vue DevTools ?? : Vue.js ??????? ??????? ?? ??? ?? ?? ??, ??? ?? ?? ? ? ????.
• ??? ?? ?? : ???? ??? ??? ???? ??????. vue.js?? ?? ??? ???? ???? ??? ????.
• console.log : console.log ??? ??? ??? ???? ??? ?? ? ?? ??? ??????.

?? ??? ? ?? ??

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

• v-if ? v-show ?? : ?? ??? ?? ??? ??? ??????. v-if ? ??? ?? ??? ?? ????? ????? v-show ??? ??? ???? ????? ?????.
• ??? ? ?? ??? : key ??? ???? vue.js ??????? ????? ???? ???? ? ???? ?????.
• ????? ?? ?? : ??? ?? ??? ?? ??? ?? ??? ???? ??? ???? ?? ??? ??? ????? ?? ?? ??? ?? ? ????.

 vue.component ( 'async-example', function (resolve, devrect) {
  settimeout (function () {
    ????({
      ??? : &#39;<div> ?? ??????! </div>&#39;
    })
  }, 1000)
})

• ?? ?? : Webpack? ?? ??? ???? ?? ???? ???? ? ?? ????? ??? ????.
• watch ? ??? ??? ????? : watch ? ????? ??? ?? ??? ??? ????. ?? computed ??? ??????.

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

??

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

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