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的使用,通过数据控制元素的显示及事件函数

 

posted @ 2019-07-01 16:20  下一页2013  阅读(804)  评论(0编辑  收藏  举报