01 Vue.js是什么?

Vue.js的官方文档是这样介绍它的。

简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。

简单小巧是指vue.js压缩后只有17KB。所谓渐进式,就是你可以一步一步、有阶段性地来使用Vue.js,不必一开始就使用所有的东西。随着本身的不断介绍,你会深刻的感受到这一点,这也正是开发者热爱Vue.js的主要原因之一。

使用Vue.js可以让Web开发变得简单,同时也颠覆了传统前端开发模式。它提供了现代Web开发中常见的高级功能,比如:

1 解耦视图与数据

2 可复用的组件

3 前端路由

4 状态管理

5 虚拟DOM

MVVM模式(Model-View-View-Model模式)

Vue.js有什么不同?

 如果你使用过jQuery,那么一定对操作DOM、绑定事件等这些原生JavaScript能力非常熟悉,比如我们在指定DOM中插入一个元素,并给它绑定一个点击事件。

if(showBth){
  var btn=$('<button>Click me</button>');       
  btn.on('click',function(){
    console.log('Clicked');   
  });
  $('#app').append(btn);   
}

 这段代码不难理解,操作的内容也不复杂,不过这样让我们的视图代码和业务逻辑紧耦合在一起,随着功能不断增加,直接操作DOM会使得代码越来越难以维护。

 而Vue.js通过MVVM的模式拆分为视图和数据两部分,并将其分离。因此,你只需要关心你的数据即可,DOM的事情Vue会帮你搞定,比如上面的示例用Vue.js可以改写为:

<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>        

猜你喜欢

转载自www.cnblogs.com/webBirdsFly/p/11797188.html
今日推荐