Vue與Jquery的區別到底在哪裡?
阿新 • • 發佈:2018-12-14
比如我們用Jquery在Dom中插入一個元素,並且對其繫結一個click事件:
if(showBtn){
var btn=$('<button>click me</button>');
btn.on('click',function(){
console.log('clicked!!!');
});
$('#app').append(btn);
}
這樣寫的缺點是什麼呢?檢視程式碼和業務邏輯緊密的耦合在一起,隨著功能的增加,直接操作Dom會使得程式碼越來越難維護。
而Vue.js通過MVVM將資料和檢視分離開來,我們只需要關心自己的資料即可,Dom的事情Vue會自己幫你搞定,上面的程式碼可以用Vue寫成:
<body> <div id='' app> <button v-if='showBtn' @click='handleClick'>Click me</button> </div> </body> <script> export default { data() { return { showBtn: true } }, methods: { handleClick() { console.log('Click me'); }, } } </script>