1、Vuejs
（1）渐进式
可以将vue作为应用的一部分嵌入其中，例如：在重构的时候可以一点一点的进行
（2）特点
解耦数据和视图
可复用的组件
前端路由技术
状态管理
虚拟DOM
2、Vuejs的安装
方式一：CDN引入（利用的是网络资源）
方式二：下载并引入
方式三：NPM安装
3、Vuejs初体验
（1）创建项目
（2）创建文件夹并将vuejs放入文件夹
（3）书写测试代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--去查询data里面的message--> <div id="app">{{message}}</div> <script src="../js/vue.js"></script> <script> <!--let定义的变量可以修改值/const定义的不可修改相当于常量--> const app=new Vue({ el:"#app",//用于挂载要管理的元素 data:{//定义数据 message:"hello Vue" } }) </script> </body> </html>
（4）执行流程
- 创建一个Vue实例并传入一些options：{}
- el属性决定了Vue对象挂载到哪一个元素上
- data属性用于存储一些数据：数据可以是自定义的也可以来自服务器
（5）特点
以前利用js或jq开发是命令式编程：第一步、第二步... ...一步一步要非常清晰，Vue的编程范式是声明式范式，具体的内部实现不用关心
能够实现数据和显示的分离
响应式：当时据发生改变的时候界面会自动发生改变
4、列表展示
<body> <div id="app"> <ul> <li v-for="item in books">{{item}}</li> </ul> </div> <script src="../js/vue.js"></script> <script> const app=new Vue({ el:"#app",//用于挂载要管理的元素 data:{//定义数据 message:"hello Vue", books:["骆驼祥子","百年孤独","假如给我三天光明","水浒传","西游记"] } }) </script> </body>
5、计数器
（1）普通方式
<body> <div id="app"> <h2>当前计数:{{counter}}</h2> <button v-on:click="counter++">+</button> <button v-on:click="counter--">-</button> </div> <script src="../js/vue.js"></script> <script> const app=new Vue({ el:"#app", data:{ counter:0 } }) </script> </body> </html>
（2）函数方式
<body> <div id="app"> <h2>当前计数:{{counter}}</h2> <button v-on:click="add">+</button> <button v-on:click="sub">-</button> </div> <script src="../js/vue.js"></script> <script> const app=new Vue({ el:"#app", data:{ counter:0 }, methods:{ add:function () { console.log("加");//this代表当前对象 this.counter++ }, sub:function () { console.log("减"); this.counter-- } } }) </script> </body>
