vue简介：
1、 Vue是什么
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue渐进式的理解:http://www.bslxx.com/a/vue/2017/1205/1490.html
Vue只关注视图层。
Vue通过新的属性（自定义）和{{表达式}}扩展了 HTML。
Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
使用前得引入vue框架js。
2.1 holle vue
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script> </head> <body> <div id="a"> {{val}} <hr> {{user.name}}<br> {{user.age}}<br> {{user.hobby[0]}} {{user.hobby[1]}} {{user.hobby[2]}}<br> {{user}}<br> {{user.hobby}}<hr> <hr> {{eat("吃吃")}} {{eat2("吃吃")}} </div> </body> <script type="text/javascript"> let a = new Vue({ el:"#a", data:{ val:"来来来来", user:{ name:"哈哈", age:"25", hobby:['唱','跳','rap'] } }, methods:{ eat(food){ console.log("吃吃"+food) }, eat2:(food)=>{ console.log("吃吃2"+food) }, eat3:function (food) { console.log("吃吃3"+food) } }, created(){ console.log("-----vue刚出生------"); }, mounted(){ console.log("------钩子------"); // this.eat("栗子"); // this.eat2("桃子"); // this.eat3("苹果"); } }) </script> </html>
2.1 vue 表达式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script> </head> <body> <div id="a"> 5+5:{{5+5}}<br> 5*5:{{5*5}}<br> 5-5:{{5-5}}<br> 5/5:{{5/5}}<br> 5+"5":{{5+"5"}}<br> "5"*"5":{{"5"*"5"}}<br> "5"-5:{{"5"-5}}<br> 5/"5":{{5/"5"}} </div> </body> <script type="text/javascript"> let a = new Vue({ el:"#a", data:{ } }) </script> </html>