Vue.js简介 - 图1

    DOM操作频繁,代码繁杂

    DOM操作与逻辑代码混合,可维护性差

    不同功能区域书写在一起,可维护性低

    模块之间的依赖关系复杂

    Vue.js简介 - 图2

    <!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>Document</title> </head> <body> <div id=“app”> <p>当前数值为：{{num}}</p> <button @click=“num++”>点击增大</button> <button @click=“num—“>点击减小</button> </div> <script src=“lib/vue.js”></script> <script> new Vue({ el: ‘#app’, data: { num: 100 } }); </script> </body> </html>