vue从零开始(一)
首先对vue进行一个初步的认识,为什么jquery用的好好的一定要使用vue呢,从一个例子来进行对比
如果你使用过jQ即可,那你一定对操作DOM 、绑定事件等这些原生JavaScript 能力非常熟悉,
比如我们在指定DOM 中插入一个元素,并给它绑定一个点击事件:
if (showBtn) { var btn = $( ’ <button>Click me</button>’) ; btn . on (’ click ’, function () { console.log (’ Clicked !’); }); $(’# app ’) .appeηd(btn); }
这段代码实现的功能很简单,而且不难理解,但是缺点是以上代码把视图的代码和业务功能的代码放在一起了,如果代码量少没有什么问题,但是如果代码量很大就会出现大量的元素操作和业务功能放在一起,那样代码不便于阅读从而导致维护起来相当麻烦
而vue的最大的特点就是使用了MVVM模式来将试图和数据分开,我们只需要关心数据的变化就可以了,vue会自动完成渲染,会在虚拟DOM改变的时候自动更新
<body> <div id=” app ”> <button v-if=” showBtn ” v-on:click=” handleClick ”>Click me</button> </div> </body> <script> new Vue ( { el :’ #app ’, data : { showBtn: true methods: {
handleClick: function () {
console . log ( ’ Clicked ! ’);
}
})
</script >
上边代码就是基本的vue的使用,通过数据控制元素的显示及事件函数