什么是VUE

Vue 是一套用于构建用户界面的渐进式JavaScript框架，简化dom操作。
基于MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定.
简单可以总结：
VUE是一套前端框架，免除了原生JavaScript中的DOM操作，简化书写
VUE基于MVVM（Model-View_ViewModel）思想，实现数据双向绑定
Vue官网：https://cn.vuejs.org/

演变过程

01.html+js+css（2007）
02.EasyUI+JQuery （2013）
03.node.js + vue（React，Angular）+ElementUI（iview，antDesign）（2018）

什么是MVVM

MVC：
MVC是一种设计模式：
M（Model）：模型层。是应用程序中用于处理应用程序数据逻辑的部分，模型对象负责在数据库中存取数据；
V（View）：视图层。是应用程序中处理数据显示的部分，视图是依据模型数据创建的；
C（Controller）：控制层。是应用程序中处理用户交互的部分，控制器接受用户的输入并调用模型和视图去完成用户的需求，控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示返回的数据。


MVVM：
Vue框架中MVVM的M就是后端的数据，V就是节点树，VM就是new出来的那个Vue({})对象
M（Model）：模型层。就是业务逻辑相关的数据对象，通常从数据库映射而来，我们可以说是与数据库对应的model。
V（View）：视图层。就是展现出来的用户界面。
VM（ViewModel）：视图模型层。连接view和model的桥梁。因为，Model层中的数据往往是不能直接跟View中的控件一一对应上的，所以，需要再定义一个数据对象专门对应view上的控件。而ViewModel的职责就是把model对象封装成可以显示和接受输入的界面数据对象。
MVVM与MVC最大区别：
MVVM与MVC的最大区别就是：它实现了View和Model的自动同步，也就是当Model的数据改变时，我们不用再自己手动操作Dom元素，来改变View的显示，而是改变数据后该数据对应View层显示会自动改变。
image.png

VUE快速入门

1、新建HTML页面，引入Vue.js文件
](https://cdn.bootcss.com/vue/2.5.16/vue.min.js">)
2、在JS代码区域，创建VUE核心对象，进行数据绑定

  1. new Vue({
  2.   el:"#app",
  3.   data(){
  4.     return{
  5.       username:"mayikt"你
  6.     }
  7.   }
  8. });

3、编写视图

  1. <div id = "app">
  2.   <input type="text" name="username" v-model="username">
  3.   {{username}}
  4. </div>

4、效果演示
image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>vue-demo01</title>
  6. </head>
  8. <body>
  10. <div id="app">
  11.     <input type="text" name="username" v-model="username">
  12.     <!-- 插值表达式 -->
  13.     {{username}}
  14. </div>
  15. <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  16. <script>
  17.     // 1.创建vue核心对象
  18.     new Vue({
  19.         el: "#app",
  20.         data() {
  21.             return {
  22.                 username: "mayikt"
  23.             }
  24.         }
  25.     });
  26. </script>
  27. </body>
  28. </html>

VUE常用指令

Vue指令是带有v-前缀的特殊属性，它们作用于HTML元素，表示它们是Vue提供的特殊属性。将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为
v-if指令:条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else指令:条件性的渲染某元素，判定为true时渲染,否则不渲染
v-show指令:条件渲染指令，根据表达式的真假删除和插入元素
v-for指令:列表渲染，遍历容器的元素或者对象的属性
v-bind指令:为HTML标签绑定属性值，如设置 href , css样式等
v-on指令 :为HTML标签绑定事件
v-model指令:在表单元素上创建双向数据绑定

v-bind指令

v-bind指令:为HTML标签绑定属性值，如设置 href , css样式等
相关例子：

  2. <div id="app">
  3.     <a v-bind:href="url">点击跳转www.mayikt.com</a>
  4.     <a :href="url">简写点击跳转www.mayikt.com</a>
  5. </div>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>vue-demo01</title>
  6. </head>
  8. <body>
  10. <div id="app">
  11.     <a v-bind:href="url">点击跳转www.mayikt.com</a>
  12.     <a :href="url">简写点击跳转www.mayikt.com</a>
  13. </div>
  14. <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  15. <script>
  16.     // 1.创建vue核心对象
  17.     new Vue({
  18.         el: "#app",
  19.         data() {
  20.             return {
  21.                 username: "mayikt",
  22.                 url: "http://www.mayikt.com"
  23.             }
  24.         }
  25.     });
  26. </script>
  27. </body>
  28. </html>

v-model指令

v-model指令:在表单元素上创建双向数据绑定

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>vue-demo01</title>
  6. </head>
  8. <body>
  10. <div id="app">
  11.     <a v-bind:href="url">点击跳转www.mayikt.com</a>
  12.     <a :href="url">简写点击跳转www.mayikt.com</a>
  13.     <input type="text" v-model="username">
  14.     {{username}}
  15. </div>
  16. <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  17. <script>
  18.     // 1.创建vue核心对象
  19.     new Vue({
  20.         el: "#app",
  21.         data() {
  22.             return {
  23.                 username: "mayikt",
  24.                 url: "http://www.mayikt.com"
  25.             }
  26.         }
  27.     });
  28. </script>
  29. </body>
  30. </html>

v-on指令

为HTML标签绑定事件

  2. <div id="app">
  3.     <input type="button" value="点击我" v-on:click="mayiktShow()">
  4.     <input type="button"  value="点击我" @click="mayiktShow()">
  5. </div>
  6. <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  7. <script>
  8.     // 1.创建vue核心对象
  9.     new Vue({
  10.         el: "#app",
  11.         data() {
  12.             return {
  13.                 username: "mayikt",
  14.                 url: "http://www.mayikt.com"
  15.             }
  16.         },
  17.         methods: {
  18.             mayiktShow() {
  19.                 alert("我是mayikt");
  20.             }
  21.         }
  22.     });
  23. </script>

单击事件 ： 事件属性名是 onclick，而在vue中使用是 v-on:click
失去焦点事件：事件属性名是 onblur，而在vue中使用时 v-on:blur

v-if指令

v-if指令:条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else指令:条件性的渲染某元素，判定为true时渲染,否则不渲染
v-show指令:条件渲染指令，根据表达式的真假删除和插入元素 根据条件展示某元素，区别在于切换的是display属性的值

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>vue-demo01</title>
  6. </head>
  8. <body>
  10. <div id="app">
  11.     <div v-if="state==1">
  12.         div1成功显示
  13.     </div>
  14.     <div v-else>
  15.         其他div成功显示
  16.     </div>
  17.     <input type="text" v-model="state">
  19.     <div v-show="showState==2">显示 show div</div>
  20. </div>
  21. <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  22. <script>
  23.     // 1.创建vue核心对象
  24.     new Vue({
  25.         el: "#app",
  26.         data() {
  27.             return {
  28.                 username: "mayikt",
  29.                 url: "http://www.mayikt.com",
  30.                 state: 1,
  31.                 showState:3
  32.             }
  33.         },
  34.         methods: {
  35.             mayiktShow() {
  36.                 alert("我是mayikt");
  37.             },
  38.             mayiktShow2() {
  39.                 alert("我是meite");
  40.             }
  41.         }
  42.     });
  43. </script>
  44. </body>
  45. </html>

v-for指令

列表渲染，遍历容器的元素或者对象的属性

  1. <标签 v-for="变量名 in 集合模型数据">
  2.     {{变量名}}
  3. </标签>
  1. <div id="app">
  2.      <div v-for="name in arrays">
  3.          <li>{{name}}</li>
  4.      </div>
  5. </div>

加上索引

  1. <div id="app">
  2.      <div v-for="(name,i) in arrays">
  3.          <li>{{i}}:{{name}}</li>
  4.      </div>
  5. </div>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>vue-demo01</title>
  6. </head>
  8. <body>
  10. <div id="app">
  11.      <div v-for="(name,i) in arrays">
  12.          <li>{{i}}:{{name}}</li>
  13.      </div>
  14. </div>
  15. <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  16. <script>
  17.     // 1.创建vue核心对象
  18.     new Vue({
  19.         el: "#app",
  20.         data() {
  21.             return {
  22.                 arrays: ["mayikt", "meite", "wangmazi"]
  23.             }
  24.         }
  25.     });
  26. </script>
  27. </body>
  28. </html>

vue整合ssm开发学生系统

index.html首页整合vue

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.     <title>开始使用 layui</title>
  7.     <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css"/>
  8.     <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  9.     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  10. </head>
  11. <body>
  12. <div id="app">
  13.     <table class="layui-table">
  14.         <colgroup>
  15.             <col width="150">
  16.             <col width="200">
  17.             <col>
  18.         </colgroup>
  19.         <thead>
  20.         <tr>
  21.             <th>学生ID</th>
  22.             <th>学生名称</th>
  23.             <th>学生年龄</th>
  24.             <th>学生地址</th>
  25.             <th>操作</th>
  26.         </tr>
  27.         </thead>
  28.         <tbody>
  29.         <tr v-for="user in users">
  30.             <th>{{user.id}}</th>
  31.             <th>{{user.name}}</th>
  32.             <th>{{user.age}}</th>
  33.             <th>{{user.addres}}</th>
  34.             <th>操作</th>
  35.         </tr>
  36.         </tbody>
  37.     </table>
  38. </div>
  40. <script>
  41.     new Vue({
  42.         el: "#app",
  43.         data() {
  44.             return {
  45.                 users: []
  46.             }
  47.         },
  48.         mounted() {
  49.             // 页面加载完成之后 加载数据
  50.             var _this = this;
  51.             axios({
  52.                 // 请求方式
  53.                 method: 'GET',
  54.                 // 请求的地址
  55.                 url: 'http://127.0.0.1/user/getUsersAll',
  56.             }).then(function (result) {
  57.                 var code = result.data.code;
  58.                 var data = result.data.data;
  59.                 if (code == "200") {
  60.                     _this.users = data;
  61.                 }
  63.             })
  65.         }
  66.     });
  67. </script>
  68. </body>
  69. </html>

新增数据整合vue

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>新增用户数据</title>
  6.     <!-- 引入layui css -->
  7.     <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css"/>
  8.     <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  9.     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  11. </head>
  12. <body>
  13. <div id="app">
  14.     <form class="layui-form" action="">
  15.         <div class="layui-form-item">
  16.             <label class="layui-form-label">用户名称</label>
  17.             <div class="layui-input-block">
  18.                 <input type="text" name="name" v-model="user.name" required lay-verify="required" placeholder="请输入用户名称"
  19.                        autocomplete="off"
  20.                        class="layui-input">
  21.             </div>
  22.         </div>
  24.         <div class="layui-form-item">
  25.             <label class="layui-form-label">用户年龄</label>
  26.             <div class="layui-input-block">
  27.                 <input type="text" name="age" v-model="user.age" required lay-verify="required" placeholder="请输入用户年龄"
  28.                        autocomplete="off"
  29.                        class="layui-input">
  30.             </div>
  31.         </div>
  34.         <div class="layui-form-item layui-form-text">
  35.             <label class="layui-form-label">用户地址</label>
  36.             <div class="layui-input-block">
  37.                 <textarea name="addres" v-model="user.addres" placeholder="请输入地址" class="layui-textarea"></textarea>
  38.             </div>
  39.         </div>
  40.         <div class="layui-form-item">
  41.             <div class="layui-input-block">
  42.                 <input type="button" class="layui-btn" @click="suAddUser()" value="立即提交">
  43.                 <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  44.             </div>
  45.         </div>
  46.     </form>
  47. </div>
  49. <script>
  50.     new Vue({
  51.         el: "#app",
  52.         data() {
  53.             return {
  54.                 user: {}
  55.             }
  56.         },
  57.         methods: {
  58.             suAddUser() {
  59.                 alert("点击提交" + this.user.name + "," + this.user.name);
  60.                 var _this = this;
  61.                 axios({
  62.                     method: "POST",
  63.                     url: "http://127.0.0.1/user/insertUser/",
  64.                     data: _this.user,
  65.                     headers: {
  66.                         'Content-Type': 'application/json;charset=UTF-8'
  67.                     }
  68.                 }).then(resp => {
  69.                     var code = resp.data.code;
  70.                     if (code == "200") {
  71.                         alert("新增数据成功");
  72.                         window.location.href = "vueIndex.html";
  73.                     } else {
  74.                         alert("新增数据失败");
  75.                     }
  77.                 })
  78.             }
  79.         }
  80.     })
  81. </script>
  82. </body>
  83. </html>

修改数据整合vue

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>修改用户数据</title>
  6.     <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css"/>
  7.     <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  8.     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  9. </head>
  10. <body>
  11. <div id="app">
  12.     <form class="layui-form" action="">
  13.         <div class="layui-form-item">
  14.             <label class="layui-form-label">用户ID</label>
  15.             <div class="layui-input-block">
  16.                 <input type="text" name="id" v-model="user.id" id="id" required lay-verify="required"
  17.                        autocomplete="off"
  18.                        class="layui-input">
  19.             </div>
  20.         </div>
  21.         <div class="layui-form-item">
  22.             <label class="layui-form-label">用户名称</label>
  23.             <div class="layui-input-block">
  24.                 <input type="text" name="name" v-model="user.name" id="name" required lay-verify="required"
  25.                        placeholder="请输入用户名称"
  26.                        autocomplete="off"
  27.                        class="layui-input">
  28.             </div>
  29.         </div>
  31.         <div class="layui-form-item">
  32.             <label class="layui-form-label">用户年龄</label>
  33.             <div class="layui-input-block">
  34.                 <input type="text" name="age" v-model="user.age" id="age" required lay-verify="required"
  35.                        placeholder="请输入用户年龄"
  36.                        autocomplete="off"
  37.                        class="layui-input">
  38.             </div>
  39.         </div>
  42.         <div class="layui-form-item layui-form-text">
  43.             <label class="layui-form-label">用户地址</label>
  44.             <div class="layui-input-block">
  45.                 <textarea name="addres" v-model="user.addres" id="addres" placeholder="请输入地址"
  46.                           class="layui-textarea"></textarea>
  47.             </div>
  48.         </div>
  49.         <div class="layui-form-item">
  50.             <div class="layui-input-block">
  51.                 <input type="button" class="layui-btn" @click="updateUser()" value="立即修改">
  52.                 <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  53.             </div>
  54.         </div>
  55.     </form>
  56. </div>
  57. <script>
  59.     function getUrlParam(name) {
  60.         var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
  61.         var r = window.location.search.substr(1).match(reg);  //匹配目标参数
  62.         if (r != null)
  63.             return unescape(r[2]);
  64.         return null; //返回参数值
  65.     }
  67.     new Vue({
  68.         el: "#app",
  69.         data() {
  70.             return {
  71.                 user: {}
  72.             }
  73.         },
  74.         methods: {
  75.             updateUser() {
  76.                 alert("修改用户数据");
  77.                 var _this = this;
  78.                 axios({
  79.                     method: "PUT",
  80.                     url: "http://127.0.0.1/user/updateUser/",
  81.                     data: _this.user,
  82.                     headers: {
  83.                         'Content-Type': 'application/json;charset=UTF-8'
  84.                     }
  85.                 }).then(resp => {
  86.                     var code = resp.data.code;
  87.                     if (code == "200") {
  88.                         alert("修改数据成功");
  89.                         window.location.href = "vueIndex.html";
  90.                     } else {
  91.                         alert("修改数据失败");
  92.                     }
  94.                 })
  95.             }
  97.         },
  98.         mounted() {
  99.             //1.获取地址栏参数
  100.             var id = getUrlParam("id");
  101.             //2.发送ajax请求
  102.             var _this = this;
  103.             axios({
  104.                 // 请求方式
  105.                 method: 'get',
  106.                 // 请求的地址
  107.                 url: 'http://127.0.0.1/user/getById/' + id,
  108.             }).then(function (result) {
  109.                 var code = result.data.code;
  110.                 if (code == "200") {
  111.                     _this.user = result.data.data;
  112.                 } else {
  113.                     alert("查询用户信息数据失败!");
  114.                 }
  116.             })
  117.         }
  118.     })
  119. </script>
  120. </body>
  121. </html>

删除数据整合vue

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.     <title>开始使用 layui</title>
  7.     <!-- 引入layui css -->
  8.     <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css"/>
  9.     <!--引入vue.js -->
  10.     <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  11.     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  13. </head>
  14. <body>
  15. <a href="vueAddUser.html">新增数据</a>
  16. <div id="app">
  18.     <table class="layui-table">
  19.         <colgroup>
  20.             <col width="150">
  21.             <col width="200">
  22.             <col>
  23.         </colgroup>
  24.         <thead>
  25.         <tr>
  26.             <th>学生ID</th>
  27.             <th>学生名称</th>
  28.             <th>学生年龄</th>
  29.             <th>学生地址</th>
  30.             <th>操作</th>
  31.         </tr>
  32.         </thead>
  33.         <tbody>
  34.         <tr v-for="(user,i) in users">
  35.             <td>{{user.id}}</td>
  36.             <td>{{user.name}}</td>
  37.             <td>{{user.age}}</td>
  38.             <td>{{user.addres}}</td>
  39.             <td><a href="#" @click="delUser(i,user.id)">删除</a>&nbsp;&nbsp;<a
  40.                     :href="'vueUpdateUser.html?id='+user.id">修改</a></td>
  41.         </tr>
  42.         </tbody>
  43.     </table>
  44. </div>
  46. <script>
  47.     /**
  48.      * 页面加载完毕之后开始发送ajax请求
  49.      */
  50.     new Vue({
  51.         el: "#app",
  52.         data() {
  53.             return {
  54.                 users: []
  55.             }
  56.         },
  57.         methods: {
  58.             delUser(index, id) {
  59.                 alert(index + "," + id);
  60.                 //id根据id 调用到后端接口
  61.                 var _this = this;
  62.                 axios({
  63.                     // 请求方式
  64.                     method: 'delete',
  65.                     // 请求的地址
  66.                     url: 'http://127.0.0.1/user/deleteById/' + id,
  67.                 }).then(function (result) {
  68.                     var code = result.data.code;
  69.                     if (code == "200") {
  70.                         // 如果code值是为200 后端数据就删除成功
  71.                         //前端技术将该行数据删除
  72.                         alert("删除成功");
  73.                         _this.users.splice(index, 1);
  74.                     }
  76.                 })
  77.             }
  78.         },
  79.         mounted() {
  80.             // 页面加载完成之后处理;
  81.             // 发送ajax获取
  82.             var _this = this;
  83.             axios({
  84.                 // 请求方式
  85.                 method: 'GET',
  86.                 // 请求的地址
  87.                 url: 'http://127.0.0.1/user/getUsersAll',
  88.             }).then(function (result) {
  89.                 var code = result.data.code;
  90.                 var data = result.data.data;
  91.                 if (code == "200") {
  92.                     // 返回200 后端接口中响应 data数据 给users
  93.                     _this.users = data;
  94.                 }
  96.             })
  97.         }
  99.     });
  100. </script>
  102. </body>
  103. </html>