VUE

vue2,经典版本,现在绝大部分的企业项目都是vue2

vue3,新版本 ，趋势

VUE初体验

基于vue.js框架来编写项目需要以下几个步骤：

  • 导入vue.js包（CDN）
  1. <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  2. <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  4. <!-- 生产环境版本，优化了尺寸和速度 -->
  5. <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  7. # 当然，也可以将文件下载下来再通过本地导入。
  • 应用
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <!-- 1.引入vue.js文件 -->
  7.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  8. </head>
  9. <body>
  11. <!-- 2.指定区域，该区域的内容希望由vue.js来接管。 -->
  12. <div id="app">
  13.     <h1>欢迎学习Vue.js</h1>
  14.     <div>我叫{{name}}，微信{{wechat}}</div>  <!-- {{}}会去vue对象的data属性里面找值-->
  16.     <input type="button" value="点我" v-on:click="clickMe">  <!-- v-on:click点击事件 当点击的时候执行vue对象里的clickMe函数-->
  17. </div>
  20. <script>
  21.     // 3.创建Vue对象，并关联指定HTML区域。
  22.     var app = new Vue({
  23.         el: '#app',
  24.         data: {
  25.             name: '123',
  26.             wechat: '123888'
  27.         },
  28.         methods: {
  29.             clickMe: function () {
  30.                 // 获取值this.name
  31.                 // 修改值this.name = "xx"
  32.                 this.name = "455";
  33.                 this.wechat = "455666";
  34.             }
  35.         }
  36.     })
  37. </script>
  38. </body>
  39. </html>

vue常见指令

想要使用vue.js来进行开发，就必须学会vue.js中提供的指令，明白每个指令是什么意思，才能更灵活的让他去显示我们想要的效果。

插值表达式

一般在显示文本内容的标签中使用。就是将js中的值显示在html标签中

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.     <div>我叫{{name}}，我喜欢{{hobby}}，邮箱:{{dataInfo.email}}</div>
  11.     <ul>
  12.         <li>{{'456'}}</li> <!--{{}}里面可以引用vue中的值，也可以直接写一些值-->
  13.         <li>{{'456' + "土鳖"}}</li>
  14.         <li>{{ base + 1 + 1 }}</li>
  15.         <li>{{ 1===1 ?"456":"789"}}</li> <!--1===1条件成立就是456 不成立就是789 -->
  16.     </ul>
  17.     <ul>
  18.         <li>{{ condition?"12":"34"}}</li> <!--condition的值是用的vue对象里的值 -->
  19.     </ul>
  20.     <input type="button" value="点我" v-on:click="clickMe">
  21. </div>
  24. <script>
  25.     var app = new Vue({
  26.         el: '#app',
  27.         data: {
  28.             name: '123',
  29.             hobby: '篮球',
  30.             dataInfo: {
  31.                 id: 1,
  32.                 email: "xxx.com"
  33.             },
  34.             condition: false,
  35.             base: 1
  36.         },
  37.         methods: {
  38.             clickMe: function () {
  39.                 this.name = "小马哥";
  40.                 this.condition = true;
  41.                 this.dataInfo.email = "xmg@live.com";
  42.                 this.base += 100;
  43.             }
  44.         }
  45.     })
  46. </script>
  47. </body>
  48. </html>

v-bind

一般用于对标签中的属性进行操作。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  7.     <style>
  8.         .ig {
  9.             border: 2px solid red;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14. <div id="app">
  15.     <img src='xx.png' class='c1' />
  17.     <img alt="" v-bind:src="imageUrl" v-bind:class="cls"> <!--v-bind:src对应的imageUrl会去vue对象中找imageUrl然后复制过来 -->
  19. </div>
  22. <script>
  23.     var app = new Vue({
  24.         el: '#app',
  25.         data: {
  26.             imageUrl: 'https://hcdn2.luffycity.com/media/frontend/public_class/PY1@2x_1566529821.1110113.png',
  27.             cls: "ig",
  28.         }
  29.     })
  30. </script>
  31. </body>
  32. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  7.     <style>
  8.         .ig {
  9.             border: 2px solid red;
  10.         }
  12.         .info {
  13.             color: red;
  14.         }
  16.         .danger {
  17.             font-size: 10px;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22. <div id="app">
  23.     <img src='xx.png' class='c1'/>
  25.     <img alt="" v-bind:src="imageUrl" v-bind:class="cls">
  26.     <!--内部会判断v1和v2的值，值也是去vue对象中找，只会找值为True的并赋值给class -->
  27.     <h1 v-bind:class="{info:v1,danger:v2}">你好呀111</h1> 
  29.     <!--clsDict也是去vue对象中找，会找值为True的将键放到此处 -->
  30.     <h1 v-bind:class="clsDict">你好呀</h1>
  31.     <!--会将vue对象的data对象中的a1 和 a2的值放到此处 -->
  32.     <h2 v-bind:class="[a1,a2]"></h2>
  34.     <!--条件成立是a1，不成立是‘y’,然后还有一个a1-->
  35.     <h2 v-bind:class="[1===1?a1:'y',a2]">111</h2>
  36.     <!--clr会去vue data对象中去找，size也是-->
  37.     <h3 v-bind:style="{ color:clr,fontSize:size+'px'}">222</h3>
  38.     <h3 style="color: red;font-size: 19px">333</h3>
  39.     <!--给input添加一个点击事件 当点击的时候执行vue data 属性里的clickme -->
  40.     <input type="button" value="点我" v-on:click="clickMe">
  41. </div>
  44. <script>
  45.     var app = new Vue({
  46.         el: '#app',
  47.         data: {
  48.             imageUrl: 'https://hcdn2.luffycity.com/media/frontend/public_class/PY1@2x_1566529821.1110113.png',
  49.             cls: "ig",
  50.             v1: true,
  51.             v2: true,
  52.             clsDict: {
  53.                 info: false,
  54.                 danger: false
  55.             },
  56.             a1: "info",
  57.             a2: "danger",
  58.             clr: "red",
  59.             size: "19",
  60.         },
  61.         methods:{
  62.             clickMe:function () {
  63.                 this.v1 = false;
  64.             }
  65.         }
  66.     })
  67. </script>
  68. </body>
  69. </html>

v-bind注意：

  • 简写的格式::属性名=xxx，例如： 
    1. <h1 v-bind:class="v1"></h1>
    2. <h1 :class="v1"></h1>
    3. <img :src="xx" />
  • v-bind属于单向绑定（ JS修改->HTML修改 )。

v-model

一般用于在交互的表中中使用，例如：input、select、textarea等。【双向绑定】

JS修改->HTML修改

HTML修改 -> JS修改

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.     <div>
  11.         用户名：<input type="text" v-model="user">
  12.     </div>
  13.     <div>
  14.         密码：<input type="password" v-model="pwd">
  15.     </div>
  16.     <input type="button" value="登录" v-on:click="clickMe"/>
  17.     <input type="button" value="重置" v-on:click="resetForm"/>
  18. </div>
  21. <script>
  22.     var app = new Vue({
  23.         el: '#app',
  24.         data: {
  25.             user: "",
  26.             pwd: "",
  27.         },
  28.         methods: {
  29.             clickMe: function () {
  30.                 console.log(this.user, this.pwd)
  31.             },
  32.             resetForm: function () {
  33.                 this.user = "";
  34.                 this.pwd = "";
  35.             }
  36.         }
  37.     })
  38. </script>
  39. </body>
  40. </html>

更多标签实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.     <div>
  11.         用户名：<input type="text" v-model="user">
  12.     </div>
  13.     <div>
  14.         密码：<input type="password" v-model="pwd">
  15.     </div>
  16.     <div>
  17.         性别：
  18.         <input type="radio" v-model="sex" value="1">男
  19.         <input type="radio" v-model="sex" value="2">女
  20.     </div>
  21.     <div>
  22.         爱好：
  23.         <input type="checkbox" v-model="hobby" value="11">篮球
  24.         <input type="checkbox" v-model="hobby" value="22">足球
  25.         <input type="checkbox" v-model="hobby" value="33">评判求
  26.     </div>
  27.     <div>
  28.         城市：
  29.         <select v-model="city">
  30.             <option value="sh">上海</option>
  31.             <option value="bj">北京</option>
  32.             <option value="sz">深圳</option>
  33.         </select>
  34.     </div>
  35.     <div>
  36.         擅长领域：
  37.         <select v-model="company" multiple>
  38.             <option value="11">技术</option>
  39.             <option value="22">销售</option>
  40.             <option value="33">运营</option>
  41.         </select>
  42.     </div>
  43.     <div>
  44.         其他：<textarea v-model="more"></textarea>
  45.     </div>
  47.     <input type="button" value="注 册" v-on:click="clickMe"/>
  48. </div>
  51. <script>
  52.     var app = new Vue({
  53.         el: '#app',
  54.         data: {
  55.             user: "",
  56.             pwd: "",
  57.             sex: "2",
  58.             hobby: ["22"],
  59.             city: "sz",
  60.             company: ["22", "33"],
  61.             more: '...'
  62.         },
  63.         methods: {
  64.             clickMe: function () {
  65.                 console.log(this.user, this.pwd, this.sex, this.hobby, this.city, this.company, this.more);
  66.             },
  67.         }
  68.     })
  69. </script>
  70. </body>
  71. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.     <div>
  11.         用户名：<input type="text" v-model="info.user">
  12.     </div>
  13.     <div>
  14.         密码：<input type="password" v-model="info.pwd">
  15.     </div>
  16.     <div>
  17.         性别：
  18.         <input type="radio" v-model="info.sex" value="1">男
  19.         <input type="radio" v-model="info.sex" value="2">女
  20.     </div>
  21.     <div>
  22.         爱好：
  23.         <input type="checkbox" v-model="info.hobby" value="11">篮球
  24.         <input type="checkbox" v-model="info.hobby" value="22">足球
  25.         <input type="checkbox" v-model="info.hobby" value="33">评判求
  26.     </div>
  27.     <div>
  28.         城市：
  29.         <select v-model="info.city">
  30.             <option value="sh">上海</option>
  31.             <option value="bj">北京</option>
  32.             <option value="sz">深圳</option>
  33.         </select>
  34.     </div>
  35.     <div>
  36.         擅长领域：
  37.         <select v-model="info.company" multiple>
  38.             <option value="11">技术</option>
  39.             <option value="22">销售</option>
  40.             <option value="33">运营</option>
  41.         </select>
  42.     </div>
  43.     <div>
  44.         其他：<textarea v-model="info.more"></textarea>
  45.     </div>
  47.     <input type="button" value="注 册" v-on:click="clickMe"/>
  48. </div>
  51. <script>
  52.     var app = new Vue({
  53.         el: '#app',
  54.         data: {
  55.             info: {
  56.                 user: "",
  57.                 pwd: "",
  58.                 sex: "2",
  59.                 hobby: ["22"],
  60.                 city: "sz",
  61.                 company: ["22", "33"],
  62.                 more: '...'
  63.             }
  64.         },
  65.         methods: {
  66.             clickMe: function () {
  67.                 console.log(this.info);
  68.             },
  69.         }
  70.     })
  71. </script>
  72. </body>
  73. </html>

v-for

用户数据进行循环并展示。

示例1：

  1. <div id="app">
  2.     <ul>
  3.         <!--会生成三个li标签-->
  4.         <li v-for="item in dataList">{{ item }}</li>
  5.     </ul>
  6. </div>
  7. <script>
  8.     var app = new Vue({
  9.         el: '#app',
  10.         data: {
  11.             dataList: ["郭德纲", "于谦", "三哥"],
  12.         }
  13.     })
  14. </script>

示例2：

  1. <div id="app">
  2.     <ul>
  3.         <!--可以得到值和索引 item是值 idx是索引-->
  4.         <li v-for="(item,idx) in dataList">{{idx}} - {{ item }}</li>
  5.     </ul>
  6. </div>
  7. <script>
  8.     var app = new Vue({
  9.         el: '#app',
  10.         data: {
  11.             dataList: ["郭德纲", "于谦", "三哥"],
  12.         }
  13.     })
  14. </script>

示例3：

  1. <div id="app">
  2.     <ul>
  3.         <!--循环字典时 value 是值 key 是键-->
  4.         <li v-for="(value,key) in dataDict">{{key}} - {{ value }}</li>
  5.     </ul>
  6. </div>
  7. <script>
  8.     var app = new Vue({
  9.         el: '#app',
  10.         data: {
  11.             dataDict: {
  12.                 id: 1,
  13.                 age: 18,
  14.                 name: "xxx"
  15.             }
  16.         }
  17.     })
  18. </script>

示例4：

  1. <div id="app">
  2.     <ul>
  3.         <!--此时的item是一个字典，通过item.取值-->
  4.         <li v-for="(item,idx) in cityList">{{item.id}} - {{ item.text }}</li>
  5.     </ul>
  6. </div>
  7. <script>
  8.     var app = new Vue({
  9.         el: '#app',
  10.         data: {
  11.             cityList: [
  12.                 {id: 11, text: "上海"},
  13.                 {id: 12, text: "北京"},
  14.                 {id: 13, text: "深圳"},
  15.             ]
  16.         }
  17.     })
  18. </script>

实例5：

  1. <ul>
  2.     <li> <span>id 11</span>  <span>text 上海</span> </li>
  3.     。。
  4.     。。
  5. </ul>
  1. <div id="app">
  2.     <ul>
  3.         <!--支持双层循环-->
  4.         <li v-for="(item,idx) in cityList">
  5.             <span v-for="(v,k) in item">{{k}} {{v}}</span>
  6.         </li>
  7.     </ul>
  8. </div>
  9. <script>
  10.     var app = new Vue({
  11.         el: '#app',
  12.         data: {
  13.             cityList: [
  14.                 {id: 11, text: "上海"},
  15.                 {id: 12, text: "北京"},
  16.                 {id: 13, text: "深圳"},
  17.             ]
  18.         }
  19.     })
  20. </script>

v-on

事件相关的指令，例如：

  1. v-on:click 点击
  2. v-on:dblclick 双击
  3. v-on:mouseover， 
  4. v-on:mouseout，
  5. v-on:change
  6. v-on:focus
  7. ...
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.     <ul>
  11.         <li v-on:click="clickMe">点击</li>
  12.         <!--简便写法-->
  13.         <li @click="clickMe">点击</li>
  14.         <li v-on:dblclick="doSomething('双击')">双击</li>
  15.         <!--可以传参-->
  16.         <li v-on:mouseover="doSomething('进入')" v-on:mouseout="doSomething('离开')">进入&离开</li>
  17.     </ul>
  18. </div>
  20. <script>
  21.     var app = new Vue({
  22.         el: '#app',
  23.         data: {},
  24.         methods: {
  25.             clickMe: function () {
  26.                 alert("点击了")
  27.             },
  28.             doSomething: function (msg) {
  29.                 console.log(msg);
  30.             }
  31.         }
  32.     })
  33. </script>
  34. </body>
  35. </html>

案例

数据的管理包括对数据：展示、动态添加、删除、修改。

  • 数据列表展示
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  7.     <style>
  8.         .penal {
  9.             border: 1px solid #dddddd;
  10.             margin: 20px 0 0 0;
  11.             padding: 10px;
  12.             border-bottom: 0;
  13.             background-color: #d9d9d9;
  14.         }
  16.         .table {
  17.             width: 100%;
  18.             border-collapse: collapse;
  19.             border-spacing: 0;
  20.         }
  22.         .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
  23.             padding: 8px;
  24.             vertical-align: top;
  25.             border: 1px solid #ddd;
  26.             text-align: left;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  32. <div id="app">
  33.     <h3 class="penal">数据列表</h3>
  34.     <table class="table">
  35.         <thead>
  36.         <tr>
  37.             <td>姓名</td>
  38.             <td>年龄</td>
  39.         </tr>
  40.         </thead>
  41.         <tbody>
  42.         <tr v-for="item in dataList">
  43.             <td>{{item.name}}</td>
  44.             <td>{{item.age}}</td>
  45.         </tr>
  46.         </tbody>
  47.     </table>
  48. </div>
  49. <script>
  50.     var app = new Vue({
  51.         el: '#app',
  52.         data: {
  53.             dataList: [
  54.                 {"name": "武沛齐", "age": 19},
  55.                 {"name": "alex", "age": 89},
  56.             ]
  57.         }
  58.     })
  59. </script>
  60. </body>
  61. </html>
  • 数据添加
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  7.     <style>
  8.         .penal {
  9.             border: 1px solid #dddddd;
  10.             margin: 20px 0 0 0;
  11.             padding: 10px;
  12.             border-bottom: 0;
  13.             background-color: #d9d9d9;
  14.         }
  16.         .table {
  17.             width: 100%;
  18.             border-collapse: collapse;
  19.             border-spacing: 0;
  20.         }
  22.         .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
  23.             padding: 8px;
  24.             vertical-align: top;
  25.             border: 1px solid #ddd;
  26.             text-align: left;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  32. <div id="app">
  33.     <h3 class="penal">表单区域</h3>
  34.     <div>
  35.         <div>
  36.             <label>姓名</label>
  37.             <input type="text" v-model="user">
  38.         </div>
  39.         <div>
  40.             <label>年龄</label>
  41.             <input type="text" v-model="age">
  42.             <input type="button" value="新建" @click="addUser">
  43.         </div>
  44.     </div>
  46.     <h3 class="penal">数据列表</h3>
  47.     <table class="table">
  48.         <thead>
  49.         <tr>
  50.             <td>姓名</td>
  51.             <td>年龄</td>
  52.         </tr>
  53.         </thead>
  54.         <tbody>
  55.         <tr v-for="item in dataList">
  56.             <td>{{item.name}}</td>
  57.             <td>{{item.age}}</td>
  58.         </tr>
  59.         </tbody>
  60.     </table>
  61. </div>
  62. <script>
  63.     var app = new Vue({
  64.         el: '#app',
  65.         data: {
  66.             user: "",
  67.             age: "",
  68.             dataList: [
  69.                 {name: "武沛齐", age: 19},
  70.                 {name: "alex", age: 89},
  71.             ]
  72.         },
  73.         methods: {
  74.             addUser: function () {
  75.                 let row = {name: this.user, age: this.age};
  76.                 this.dataList.push(row);
  77.                 this.user = "";
  78.                 this.age = "";
  79.             }
  80.         }
  81.     })
  82. </script>
  83. </body>
  84. </html>
  • 删除数据
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  7.     <style>
  8.         .penal {
  9.             border: 1px solid #dddddd;
  10.             margin: 20px 0 0 0;
  11.             padding: 10px;
  12.             border-bottom: 0;
  13.             background-color: #d9d9d9;
  14.         }
  16.         .table {
  17.             width: 100%;
  18.             border-collapse: collapse;
  19.             border-spacing: 0;
  20.         }
  22.         .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
  23.             padding: 8px;
  24.             vertical-align: top;
  25.             border: 1px solid #ddd;
  26.             text-align: left;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  32. <div id="app">
  33.     <h3 class="penal">表单区域</h3>
  34.     <div>
  35.         <div>
  36.             <label>姓名</label>
  37.             <input type="text" v-model="user">
  38.         </div>
  39.         <div>
  40.             <label>年龄</label>
  41.             <input type="text" v-model="age">
  42.             <input type="button" value="新建" @click="addUser">
  43.         </div>
  44.     </div>
  46.     <h3 class="penal">数据列表</h3>
  47.     <table class="table">
  48.         <thead>
  49.         <tr>
  50.             <td>姓名</td>
  51.             <td>年龄</td>
  52.             <td>操作</td>
  53.         </tr>
  54.         </thead>
  55.         <tbody>
  56.         <tr v-for="(item,idx) in dataList">
  57.             <td>{{item.name}}</td>
  58.             <td>{{item.age}}</td>
  59.             <td>
  60.                 // :data-idx="idx" 会将idx的值传递给deleteRow函数
  61.                 <input type="button" value="删除" @click="deleteRow" :data-idx="idx"/>
  62.             </td>
  63.         </tr>
  64.         </tbody>
  65.     </table>
  66. </div>
  67. <script>
  68.     var app = new Vue({
  69.         el: '#app',
  70.         data: {
  71.             user: "",
  72.             age: "",
  73.             dataList: [
  74.                 {name: "武沛齐", age: 19},
  75.                 {name: "alex", age: 89},
  76.             ]
  77.         },
  78.         methods: {
  79.             addUser: function () {
  80.                 let row = {name: this.user, age: this.age};
  81.                 this.dataList.push(row);
  82.                 this.user = "";
  83.                 this.age = "";
  84.             },
  85.             deleteRow: function (event) {
  86.                 // event当前事件的触发对象是默认传递进来的
  87.                 // event.target.dataset默认格式
  88.                 // 根据索引删除dataList中的值
  90.                 let idx = event.target.dataset.idx;
  91.                 // 1是删除1个
  92.                 this.dataList.splice(idx, 1);
  93.             }
  94.         }
  95.     })
  96. </script>
  97. </body>
  98. </html>
  • 编辑修改数据
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  7.     <style>
  8.         .penal {
  9.             border: 1px solid #dddddd;
  10.             margin: 20px 0 0 0;
  11.             padding: 10px;
  12.             border-bottom: 0;
  13.             background-color: #d9d9d9;
  14.         }
  16.         .table {
  17.             width: 100%;
  18.             border-collapse: collapse;
  19.             border-spacing: 0;
  20.         }
  22.         .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
  23.             padding: 8px;
  24.             vertical-align: top;
  25.             border: 1px solid #ddd;
  26.             text-align: left;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  32. <div id="app">
  33.     <h3 class="penal">表单区域</h3>
  34.     <div>
  35.         <div>
  36.             <label>姓名</label>
  37.             <input type="text" v-model="user">
  38.         </div>
  39.         <div>
  40.             <label>年龄</label>
  41.             <input type="text" v-model="age">
  42.             <input type="button" :value="title" @click="addUser">
  43.         </div>
  44.     </div>
  46.     <h3 class="penal">数据列表</h3>
  47.     <table class="table">
  48.         <thead>
  49.         <tr>
  50.             <td>姓名</td>
  51.             <td>年龄</td>
  52.             <td>操作</td>
  53.         </tr>
  54.         </thead>
  55.         <tbody>
  56.         <tr v-for="(item,idx) in dataList">
  57.             <td>{{item.name}}</td>
  58.             <td>{{item.age}}</td>
  59.             <td>
  60.                 <input type="button" value="删除" @click="deleteRow" :data-idx="idx"/>
  61.                 <input type="button" value="编辑" @click="editRow" :data-idx="idx"/>
  62.             </td>
  63.         </tr>
  64.         </tbody>
  65.     </table>
  66. </div>
  67. <script>
  68.     var app = new Vue({
  69.         el: '#app',
  70.         data: {
  71.             editIndex: undefined,
  72.             title: "新建",
  73.             user: "",
  74.             age: "",
  75.             dataList: [
  76.                 {name: "武沛齐", age: 19},
  77.                 {name: "alex", age: 89},
  78.             ]
  79.         },
  80.         methods: {
  81.             addUser: function () {
  82.                 if (this.editIndex) {
  83.                     // 修改
  84.                     this.dataList[this.editIndex].name = this.user;
  85.                     this.dataList[this.editIndex].age = this.age;
  86.                 } else {
  87.                     let row = {name: this.user, age: this.age};
  88.                     this.dataList.push(row);
  89.                 }
  90.                 this.user = "";
  91.                 this.age = "";
  92.                 this.editIndex = undefined;
  93.                 this.title = "新建";
  94.             },
  95.             deleteRow: function (event) {
  96.                 // 根据索引删除dataList中的值
  97.                 let idx = event.target.dataset.idx;
  98.                 this.dataList.splice(idx, 1);
  99.             },
  100.             editRow: function (event) {
  101.                 let idx = event.target.dataset.idx;
  102.                 // let name = this.dataList[idx].name;
  103.                 // let age = this.dataList[idx].age;
  104.                 // let {id, name} = {id: 1, name: "武沛齐"};
  105.                 // console.log(id, name);
  106.                 let {name, age} = this.dataList[idx];
  107.                 this.user = name;
  108.                 this.age = age;
  109.                 this.title = "编辑";
  110.                 this.editIndex = idx;
  111.             }
  112.         }
  113.     })
  114. </script>
  115. </body>
  116. </html>

v-if指令

条件指令 用来做判断 条件不成立标签都不会渲染到页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.     //判断 isLogin 的值是否为True 是的话执行{{user}}
  11.     <a v-if="isLogin">{{user}}</a>
  12.     //v-else 就是else
  13.     <a v-else>登录</a>
  14. </div>
  16. <script>
  17.     var app = new Vue({
  18.         el: '#app',
  19.         data: {
  20.             isLogin: false,
  21.             user: "武沛齐"
  22.         }
  23.     })
  24. </script>
  25. </body>
  26. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.     <h1 v-if="v1">阿里无人区</h1>
  13.     <h1 v-if="v2">去西藏</h1>
  14.     <h1 v-else>去新疆</h1>
  17.     <div v-if="v3 === '北京'">
  18.         <h1>天安门</h1>
  19.     </div>
  20.     <div v-else-if="v3 === '新疆'">
  21.         <h1>乌鲁木齐</h1>
  22.     </div>
  23.     <div v-else-if="v3 ==='西藏'">
  24.         <h1>拉萨</h1>
  25.     </div>
  26.     <div v-else>
  27.         <h1>大理</h1>
  28.     </div>
  29. </div>
  31. <script>
  32.     var app = new Vue({
  33.         el: '#app',
  34.         data: {
  35.             v1: true,
  36.             v2: true,
  37.             v3: "新疆"
  38.         }
  39.     })
  40. </script>
  41. </body>
  42. </html>

v-show

根据条件显示或隐藏（标签都会渲染到页面）。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.     <h1 v-show="v1">可可西里</h1>
  11.     <h1 v-show="!v1">罗布泊</h1>
  12. </div>
  14. <script>
  15.     var app = new Vue({
  16.         el: '#app',
  17.         data: {
  18.             v1: false,
  19.         }
  20.     })
  21. </script>
  22. </body>
  23. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  7.     <style>
  8.         label {
  9.             width: 60px;
  10.             display: inline-block;
  11.             text-align: right;
  12.             margin-right: 8px;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17. <div id="app">
  18.     // isSms=false 将isSms对应的值修改为false
  19.     <input type="button" value="密码登录" @click="isSms=false"/>
  20.     <input type="button" value="短信登录" @click="isSms=true"/>
  22.     <div v-show="isSms">
  23.         <p>
  24.             <label>手机号</label>
  25.             <input type="text" placeholder="手机号">
  26.         </p>
  27.         <p>
  28.             <label>验证码</label>
  29.             <input type="text" placeholder="验证码">
  30.         </p>
  31.     </div>
  32.     <div v-show="!isSms">
  33.         <p>
  34.             <label>用户名</label>
  35.             <input type="text" placeholder="用户名">
  36.         </p>
  37.         <p>
  38.             <label>密码</label>
  39.             <input type="password" placeholder="密码">
  40.         </p>
  41.     </div>
  43. </div>
  45. <script>
  46.     var app = new Vue({
  47.         el: '#app',
  48.         data: {
  49.             isSms: false,
  50.         }
  51.     })
  52. </script>
  53. </body>
  54. </html>

登录案例

在编写案例之前，现在来学下axios，他是一个HTTP 库，可以发送Http请求。

  1. // 引入 axios库
  2. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  3. // axios 里面放一个对象 params是url中携带的参数，data是请求体中携带的参数
  4. <script>
  5.     axios({
  6.         method: "post", 
  7.         url: 'https://api.luf...ord/login/',
  8.         params: {
  9.             v1:123,
  10.             v2:456
  11.         },
  12.         data: {
  13.             name:"武沛齐",
  14.             pwd:"123"
  15.         },
  16.         headers: {
  17.             "Content-Type": "application/json"
  18.         }
  19.     }).then(function (res) {
  20.         console.log(res.data);
  21.     }).catch(function (error) {
  22.         console.log(error);
  23.     })
  24. </script>
  26. .then是发送请求后执行的回调函数res是请求返回的内容，catch回调函数是捕获错误信息的
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  7.     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  8.     <style>
  9.         label {
  10.             width: 60px;
  11.             display: inline-block;
  12.             text-align: right;
  13.             margin-right: 8px;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18. <div id="app">
  19.     <input type="button" value="密码登录" @click="isSms=false"/>
  20.     <input type="button" value="短信登录" @click="isSms=true"/>
  22.     <div v-show="isSms">
  23.         <p>
  24.             <label>手机号</label>
  25.             <input type="text" placeholder="手机号" v-model="sms.mobile">
  26.         </p>
  27.         <p>
  28.             <label>验证码</label>
  29.             <input type="text" placeholder="验证码" v-model="sms.code">
  30.         </p>
  31.     </div>
  32.     <div v-show="!isSms">
  33.         <p>
  34.             <label>用户名</label>
  35.             <input type="text" placeholder="用户名" v-model="info.username">
  36.         </p>
  37.         <p>
  38.             <label>密码</label>
  39.             <input type="password" placeholder="密码" v-model="info.password">
  40.         </p>
  41.     </div>
  43.     <input type="button" value="登 录" @click="loginForm"/>
  44. </div>
  46. <script>
  47.     var app = new Vue({
  48.         el: '#app',
  49.         data: {
  50.             isSms: false,
  51.             info: {
  52.                 username: "",
  53.                 password: "",
  54.             },
  55.             sms: {
  56.                 mobile: "",
  57.                 code: ""
  58.             }
  59.         },
  60.         methods: {
  61.             loginForm: function () {
  62.                 // 1.获取用户输入的值
  63.                 let dataDict = this.isSms ? this.sms : this.info;
  65.                 let url;
  66.                 if (this.isSms) {
  67.                     url = "https://api.luffycity.com/api/v1/auth/mobile/login/?loginWay=mobile";
  68.                 } else {
  69.                     url = "https://api.luffycity.com/api/v1/auth/password/login/?loginWay=password";
  70.                 }
  72.                 // 2.想某个地址发送网络请求 axios
  73.                 // https://api.luffycity.com/api/v1/auth/password/login/?loginWay=password
  74.                 // {"username":"alex123","password":"999"}
  76.                 // https://api.luffycity.com/api/v1/auth/mobile/login/?loginWay=mobile
  77.                 // {"mobile":"18630087660","code":"123123"}
  78.                 axios({
  79.                     method: "post",
  80.                     url: url,
  81.                     data: dataDict,
  82.                     headers: {
  83.                         "Content-Type": "application/json"
  84.                     }
  85.                 }).then(function (res) {
  86.                     if (res.data.code === -1) {
  87.                         alert(res.data.msg);
  88.                         return;
  89.                     }
  90.                     // 登录成功后跳转
  91.                     window.location.href = "https://www.luffycity.com"
  92.                 }).catch(function (error) {
  93.                     alert("请求异常，请重新操作。")
  94.                 })
  95.             }
  96.         }
  97.     })
  98. </script>
  99. </body>
  100. </html>

组件化开发

在开发过程中，我们可以将页面中 某一部分 的功能编写成一个组件，然后再在页面上进行引用。

  • 有利于划分功能模块的开发（HTML、CSS、JavaScript等相关代码都集成到组件中）。
  • 有利于重用

局部组件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.     <h1>=======当前页面=======</h1>
  11.     {{name}}
  13.     <h1>=======引入子组件=======</h1>
  14.     <Demo></Demo> //使用组件
  15.     <Demo></Demo> //组件可以复用
  16.     <Bb></Bb>
  17.     <Bb></Bb>
  18.     <hr/>
  19.     <Bb></Bb>
  20. </div>
  21. <script>
  22.     //创建子组件 template子组件模板 就是 html页面  {{msg}}是 data定义的函数的返回值一定是返回值才能在 模板中引用 
  23.     const Demo = {
  24.         data:function() {
  25.             return {
  26.                 msg: '哈哈哈哈哈'
  27.             }
  28.         },
  29.         template: `
  30.             <div>
  31.                 <h1>{{msg}}</h1>
  32.                 <input type="text" v-model="msg"/>
  33.                 <input type="button" @click="showMeg" value="点我呀">
  34.             </div>
  35.         `,
  36.         methods: {
  37.             showMeg: function () {
  38.                 alert(this.msg);
  39.             }
  40.         }
  41.     }
  43.     //创建子组件
  44.     const Bili = {
  45.         // 组件中的data是一个方法，并返回值（与Vue对象创建不同）
  46.         data:function() {
  47.             return {
  48.                 dataList: [
  49.                     {"id": 1, "title": "路飞学城倒闭了"},
  50.                     {"id": 2, "title": "老板和保洁阿姨跑了"},
  51.                 ]
  52.             }
  53.         },
  54.         template: `
  55.             <div>
  56.                 <h1>数据列表</h1>
  57.                 <table border="1">
  58.                     <thead>
  59.                     <tr>
  60.                         <th>ID</th>
  61.                         <th>标题</th>
  62.                     </tr>
  63.                     </thead>
  64.                     <tbody>
  65.                     <tr v-for="item in dataList">
  66.                         <td>{{item.id}}</td>
  67.                         <td>{{item.title}}</td>
  68.                     </tr>
  69.                     </tbody>
  70.                 </table>
  71.             </div>
  72.         `
  73.     }
  75.     var app = new Vue({
  76.         el: '#app',
  77.         data: {
  78.             name: "武沛齐",
  79.         },
  80.         <!--components放的是待指组件的名字，想当于挂载组件-->
  81.         components: {
  82.             Demo,
  83.             Bb: Bili
  84.         },
  85.         methods: {}
  86.     })
  87. </script>
  88. </body>
  89. </html>

全局组件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.     <h1>=======当前页面=======</h1>
  11.     {{name}}
  13.     <h1>=======引入子组件=======</h1>
  14.     <Demo></Demo>
  15.     <Demo></Demo>
  16.     <Bili></Bili>
  17.     <Bili></Bili>
  18. </div>
  19. <script>
  20.     //创建子组件 Demo 组件的名字
  21.     Vue.component('Demo', {
  22.         data: function () {
  23.             return {
  24.                 msg: '哈哈哈哈哈'
  25.             }
  26.         },
  27.         template: `
  28.             <div>
  29.                 <h1>{{msg}}</h1>
  30.                 <input type="text" v-model="msg"/>
  31.                 <input type="button" @click="showMeg" value="点我呀">
  32.             </div>
  33.         `,
  34.         methods: {
  35.             showMeg: function () {
  36.                 alert(this.msg);
  37.             }
  38.         }
  39.     });
  41.     //创建子组件
  42.     Vue.component('Bili', {
  43.         // 组件中的data是一个方法，并返回值（与Vue对象创建不同）
  44.         data: function () {
  45.             return {
  46.                 dataList: [
  47.                     {"id": 1, "title": "路飞学城倒闭了"},
  48.                     {"id": 2, "title": "老板和保洁阿姨跑了"},
  49.                 ]
  50.             }
  51.         },
  52.         template: `
  53.             <div>
  54.                 <h1>数据列表</h1>
  55.                 <table border="1">
  56.                     <thead>
  57.                     <tr>
  58.                         <th>ID</th>
  59.                         <th>标题</th>
  60.                     </tr>
  61.                     </thead>
  62.                     <tbody>
  63.                     <tr v-for="item in dataList">
  64.                         <td>{{item.id}}</td>
  65.                         <td>{{item.title}}</td>
  66.                     </tr>
  67.                     </tbody>
  68.                 </table>
  69.             </div>
  70.         `
  71.     });
  73.     var app = new Vue({
  74.         el: '#app',
  75.         data: {
  76.             name: "武沛齐",
  77.         },
  78.         methods: {}
  79.     })
  80. </script>
  81. </body>
  82. </html>

vue-router 组件

vue + vue-router组件可以实现 SPA（single Page Application），即：单页面应用。

单页面应用，简而言之就是项目只有一个页面。

一个页面如何呈现多种界面的效果呢？

  • 基于vue开发多个组件，例如：活动组件、课程组件、咨询组件
  • 在页面上 vue-router 用来管理这些组件，用户点击某个按钮，就显示特定的组件（数据基于Ajax获取）。

13.vue - 图1

官方地址：https://router.vuejs.org/zh/

下载地址：https://unpkg.com/vue-router@4

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.     <!--  vue-router.js 依赖 vue.js -->
  8.     <script src="vue.js"></script>
  9.     <script src="vue-router.js"></script>
  11. </head>
  12. <body>
  14. </body>
  15. </html>

注意：后期用脚手架开发时，可以直接使用npm下载和引用。

快速上手

13.vue - 图2

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         body {
  8.             margin: 0;
  9.         }
  11.         .container {
  12.             width: 980px;
  13.             margin: 0 auto;
  14.         }
  16.         .menu {
  17.             height: 48px;
  18.             background-color: #499ef3;
  19.             line-height: 48px;
  21.         }
  23.         .menu a {
  24.             color: white;
  25.             text-decoration: none;
  26.             padding: 0 10px;
  27.         }
  28.     </style>
  30.     <script src="vue.js"></script>
  31.     <script src="vue-router.js"></script>
  32. </head>
  33. <body>
  34. <div id="app">
  35.     <div class="menu">
  36.         <div class="container">
  37.             //router-link 相当于a标签 定义菜单一般使用router-link
  38.             <router-link to="/">Logo</router-link>
  39.             <router-link to="/home">首页</router-link>
  40.             <router-link to="/course">课程</router-link>
  41.             <router-link to="/news">资讯</router-link>
  42.         </div>
  43.     </div>
  44.     <div class="container">
  45.         //router-view 里面放的是加载的组件
  46.         <router-view></router-view>
  47.     </div>
  49. </div>
  51. <script>
  52.     //定义了三个组件
  53.     const Home = {template: '<div>首页内容...</div>'}
  54.     const Course = {template: '<div>课程内容..</div>'}
  55.     const News = {template: '<div>资讯内容..</div>'}
  57.     //定义VueRouter 管理三个组件 访问'/'路径 加载Home组件
  58.     const router = new VueRouter({
  59.         routes: [
  60.             { 
  61.                 path: '/', 
  62.                 component: Home
  63.             },
  64.             {path: '/home', component: Home},
  65.             {path: '/course', component: Course},
  66.             {path: '/news', component: News}
  67.         ],
  68.     })
  70.     var app = new Vue({
  71.         el: '#app',
  72.         data: {
  73.             name: "武沛齐",
  74.         },
  75.         methods: {},
  76.         router: router //router 添加到router
  77.     })
  78. </script>
  79. </body>
  80. </html>

案例 第一版

13.vue - 图3

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         body {
  8.             margin: 0;
  9.         }
  11.         .container {
  12.             width: 1100px;
  13.             margin: 0 auto;
  14.         }
  16.         .menu {
  17.             height: 48px;
  18.             background-color: #499ef3;
  19.             line-height: 48px;
  21.         }
  23.         .menu a {
  24.             color: white;
  25.             text-decoration: none;
  26.             padding: 0 10px;
  27.         }
  29.         .course-list {
  30.             display: flex;
  31.             flex-wrap: wrap;
  32.             justify-content: flex-start;
  33.         }
  35.         .course-list .item {
  36.             width: 248px;
  37.             padding: 10px;
  38.             border: 1px solid #dddddd;
  39.             margin-right: 5px;
  40.             margin-top: 10px;
  41.         }
  43.         .course-list .item img {
  44.             width: 100%;
  45.             height: 120px;
  46.         }
  47.     </style>
  48.     // 引入环境
  49.     <script src="vue.js"></script>
  50.     <script src="vue-router.js"></script>
  51.     <script src="axios.min.js"></script>
  52. </head>
  53. <body>
  54. <div id="app">
  55.     <div class="menu">
  56.         <div class="container">
  57.             <router-link to="/">路飞学城</router-link>
  58.             <router-link to="/home">首页</router-link>
  59.             <router-link to="/course">课程</router-link>
  60.             <router-link to="/news">资讯</router-link>
  61.         </div>
  62.     </div>
  63.     <div class="container">
  64.         <router-view></router-view>
  65.     </div>
  67. </div>
  69. <script>
  71.     const Home = {
  72.         data: function () {
  73.             return {
  74.                 title: "欢迎使用路飞学城"
  75.             }
  76.         },
  77.         template: `<h2>{{title}}</h2>`
  78.     }
  79.     const Course = {
  80.         data: function () {
  81.             return {
  82.                 courseList: []
  83.             }
  84.         },
  85.         created: function () {
  86.             /* 组件创建完成之后自动触发【此时组件的对象已创建，但还未将页面相关的DOM创建并显示在页面上】
  87.                  - 可以去操作组件对象，例如：this.courseList = [11,22,33]
  88.                  - 不可以去操作DOM，例如：document.getElementById （未创建）
  89.              */
  90.             axios({
  91.                 method: "get",
  92.                 url: 'https://api.luffycity.com/api/v1/course/actual/?limit=5&offset=0',
  93.                 headers: {
  94.                     "Content-Type": "application/json"
  95.                 }
  96.             }).then((res) => {
  97.                 this.courseList = res.data.data.result;
  98.             })
  100.         },
  101.         mounted: function () {
  102.             /* DOM对象已在页面上生成，此时就可以 */
  103.         },
  104.         template: `
  105.             <div class="course-list">
  106.                 <div class="item" v-for="item in courseList">
  107.                     <img :src="item.cover" alt="">
  108.                     <a>{{item.name}}</a>
  109.                 </div>
  110.             </div>`
  111.     }
  112.     const News = {
  113.         data: function () {
  114.             return {
  115.                 dataList: []
  116.             }
  117.         },
  118.         created: function () {
  119.             /* 组件创建完成之后自动触发【此时组件的对象已创建，但还未将页面先关的DOM创建并显示在页面上】
  120.                  - 可以去操作组件对象，例如：this.courseList = [11,22,33]
  121.                  - 不可以去操作DOM，例如：document.getElementById （未创建）
  122.              */
  123.             axios({
  124.                 method: "get",
  125.                 url: 'https://api.luffycity.com/api/v1/course/actual/?limit=5&offset=10',
  126.                 headers: {
  127.                     "Content-Type": "application/json"
  128.                 }
  129.             }).then((res) => {
  130.                 this.dataList = res.data.data.result;
  131.             })
  133.         },
  134.         template: `<ul><li v-for="item in dataList">{{item.name}}</li></ul>`
  135.     }
  137.     const router = new VueRouter({
  138.         routes: [
  139.             {path: '/', component: Home},
  140.             {path: '/home', component: Home},
  141.             {path: '/course', component: Course},
  142.             {path: '/news', component: News}
  143.         ],
  144.         //mode: 'history'
  145.     })
  147.     var app = new Vue({
  148.         el: '#app',
  149.         data: {},
  150.         methods: {},
  151.         router: router
  152.     })
  153. </script>
  154. </body>
  155. </html>

路由和传值

当某个组件可以根据某些参数值的不同，展示不同效果时，需要用到动态路由。

例如：访问网站看到课程列表，点击某个课程，就可以跳转到课程详细页面（根据课程ID不同展示不同数据）。

如何来设置动态路由呢？

  • 定义路由
  1. const router = new VueRouter({
  2.     routes: [
  3.         { path: '/', component: Home}, //component是组件的名字
  4.         { path: '/course', component: Course, name: "Course"} // name待指这个路由
  5.         { path: '/detail/:id', component: Detail, name: "Detail"} //:id 表示/detail/可以跟参数
  6.     ],
  7. })
  • HTML展示
  1. <div>
  2.     <router-link to="/">首页</router-link>
  3.     <router-link to="/course">课程</router-link>
  4.     <router-link to="/detail/123">课程</router-link>
  6.     <router-link :to="{path:'/course'}">课程</router-link>
  7.     <router-link :to="{path:'/course?size=19&page=2'}">课程</router-link>
  8.     <router-link :to="{path:'/course', query:{size:19,page:2}">课程</router-link>
  10.     <router-link :to="{name:'Course'}">课程</router-link>
  11.     <router-link :to="{name:'Course', query:{size:19,page:2} }">课程</router-link>
  12.     //query就是在url中传参，?size-123&
  13.     <router-link :to="{path:'/detail/22',query:{size:123}}">Linux</router-link>
  14.     //params:{id:3}是指给/detail/:id中的：id传参数
  15.     <router-link :to="{name:'Detail',params:{id:3}, query:{size:29}}">网络安全</router-link>
  16. </div>
  18. <h1>内容区域</h1>
  19. <router-view></router-view>
  • 组件获取URL传值和GET参数
  1.  const Detail = {
  2.      data: function () {
  3.          return {
  4.              title: "详细页面",
  5.              paramDict: null,
  6.              queryDict: null,
  8.          }
  9.      },
  10.      created: function () {
  11.          this.paramDict = this.$route.params; //this.$route.params读的是'/detail/:id'这种格式传的值
  12.          this.queryDict = this.$route.query;//this.$route.query读的是url中传过来的值？后的值
  13.          // 发送axios请求
  14.      },
  15.      template: `<div><h2>{{title}}</h2><div>当前请求的数据 {{paramDict}}  {{queryDict}}</div></div>`
  16.  }

案例：路飞学城（第2版）

点击课程，查看课程详细页面。

13.vue - 图4

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         body {
  8.             margin: 0;
  9.         }
  11.         .container {
  12.             width: 1100px;
  13.             margin: 0 auto;
  14.         }
  16.         .menu {
  17.             height: 48px;
  18.             background-color: #499ef3;
  19.             line-height: 48px;
  21.         }
  23.         .menu a {
  24.             color: white;
  25.             text-decoration: none;
  26.             padding: 0 10px;
  27.         }
  29.         .course-list {
  30.             display: flex;
  31.             flex-wrap: wrap;
  32.             justify-content: flex-start;
  33.         }
  35.         .course-list .item {
  36.             width: 248px;
  37.             padding: 10px;
  38.             border: 1px solid #dddddd;
  39.             margin-right: 5px;
  40.             margin-top: 10px;
  41.         }
  43.         .course-list .item img {
  44.             width: 100%;
  45.             height: 120px;
  46.         }
  47.     </style>
  49.     <script src="vue.js"></script>
  50.     <script src="vue-router.js"></script>
  51.     <script src="axios.min.js"></script>
  52. </head>
  53. <body>
  54. <div id="app">
  55.     <div class="menu">
  56.         <div class="container">
  57.             <router-link to="/">路飞学城</router-link>
  58.             <router-link to="/home">首页</router-link>
  59.             <router-link to="/course">课程</router-link>
  60.             <router-link to="/news">资讯</router-link>
  61.         </div>
  62.     </div>
  63.     <div class="container">
  64.         <router-view></router-view>
  65.     </div>
  67. </div>
  69. <script>
  71.     const Home = {
  72.         data: function () {
  73.             return {
  74.                 title: "欢迎使用路飞学城"
  75.             }
  76.         },
  77.         template: `<h2>{{title}}</h2>`
  78.     }
  79.     const Course = {
  80.         data: function () {
  81.             return {
  82.                 courseList: []
  83.             }
  84.         },
  85.         created: function () {
  86.             /* 组件创建完成之后自动触发【此时组件的对象已创建，但还未将页面先关的DOM创建并显示在页面上】
  87.                  - 可以去操作组件对象，例如：this.courseList = [11,22,33]
  88.                  - 不可以去操作DOM，例如：document.getElementById （未创建）
  89.              */
  90.             axios({
  91.                 method: "get",
  92.                 url: 'https://api.luffycity.com/api/v1/course/actual/?limit=5&offset=0',
  93.                 headers: {
  94.                     "Content-Type": "application/json"
  95.                 }
  96.             }).then((res) => {
  97.                 this.courseList = res.data.data.result;
  98.             })
  100.         },
  101.         mounted: function () {
  102.             /* DOM对象已在页面上生成，此时就可以 */
  103.         },
  104.         template: `
  105.             <div class="course-list">
  107.                 <div class="item" v-for="item in courseList">
  108.                     <router-link :to="{name:'Detail',params:{id:item.id}}">
  109.                         <img :src="item.cover" alt="">
  110.                         <a>{{item.name}}</a>
  111.                      </router-link>
  112.                 </div>
  114.             </div>`
  115.     }
  116.     const News = {
  117.         data: function () {
  118.             return {
  119.                 dataList: []
  120.             }
  121.         },
  122.         created: function () {
  123.             /* 组件创建完成之后自动触发【此时组件的对象已创建，但还未将页面先关的DOM创建并显示在页面上】
  124.                  - 可以去操作组件对象，例如：this.courseList = [11,22,33]
  125.                  - 不可以去操作DOM，例如：document.getElementById （未创建）
  126.              */
  127.             axios({
  128.                 method: "get",
  129.                 url: 'https://api.luffycity.com/api/v1/course/actual/?limit=5&offset=10',
  130.                 headers: {
  131.                     "Content-Type": "application/json"
  132.                 }
  133.             }).then((res) => {
  134.                 this.dataList = res.data.data.result;
  135.             })
  137.         },
  138.         template: `<ul><li v-for="item in dataList">{{item.name}}</li></ul>`
  139.     }
  141.     const Detail = {
  142.         data: function () {
  143.             return {
  144.                 title: "详细页面",
  145.                 courseId: null
  146.             }
  147.         },
  148.         created: function () {
  149.             this.courseId = this.$route.params.id;
  150.             // 此处可以根据课程ID，发送ajax请求获取课程详细信息
  151.         },
  152.         template: `<div><h2>课程详细页面</h2><div>当前课程ID为：{{courseId}}</div></div>`
  153.     }
  155.     const router = new VueRouter({
  156.         routes: [
  157.             {path: '/', component: Home},
  158.             {path: '/home', component: Home},
  159.             {path: '/course', component: Course},
  160.             {path: '/news', component: News},
  161.             {path: '/detail/:id', component: Detail, name: 'Detail'}
  162.         ],
  163.         //mode: 'history'
  164.     })
  166.     var app = new Vue({
  167.         el: '#app',
  168.         data: {},
  169.         methods: {},
  170.         router: router
  171.     })
  172. </script>
  173. </body>
  174. </html>

页面无法刷新问题

上述编写案例是没有问题，但如果在开发中会涉及到 同一个路由的跳转（默认不会重新加载页面，数据无法获取）。

例如：在详细页面再出现一个课程推荐，即：在课程详细，点击推荐的课程后跳转到课程详细页面（课程ID不同），此时课程的ID还是原来加载的ID，无法获取推荐课程的ID。

如何解决呢？

在课程详细的组件中设置watch属性即可，watch会监测$route 值，一旦发生变化，就执行相应的函数。

  1. const Detail = {
  2.     data: function () {
  3.         return {
  4.             title: "详细页面",
  5.             courseId: null,
  7.         }
  8.     },
  9.     created: function () {
  10.         this.courseId = this.$route.params.id;
  11.         this.getCourseDetail();
  12.     },
  13.     watch: {
  14.         //监听路由里面的值发生改变就执行定义的这个函数 to表示要跳转到的那个路由相关的值，from表示原来页面的值
  15.         $route:function(to, from) {
  16.             this.courseId = to.params.id;
  17.             // this.getCourseDetail();
  18.         }
  19.     },
  20.     methods: {
  21.         getCourseDetail: function () {
  22.             // 根据this.courseId获取课程详细信息
  23.         }
  24.     },
  25.     template: `<div><h2>{{title}}</h2><div>当前请求的数据 {{paramDict}}  {{queryDict}}</div></div>`
  26. }

案例：路飞学城（第3版）

在详细页面实现推荐课程

13.vue - 图5

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         body {
  8.             margin: 0;
  9.         }
  11.         .container {
  12.             width: 1100px;
  13.             margin: 0 auto;
  14.         }
  16.         .menu {
  17.             height: 48px;
  18.             background-color: #499ef3;
  19.             line-height: 48px;
  21.         }
  23.         .menu a {
  24.             color: white;
  25.             text-decoration: none;
  26.             padding: 0 10px;
  27.         }
  29.         .course-list {
  30.             display: flex;
  31.             flex-wrap: wrap;
  32.             justify-content: flex-start;
  33.         }
  35.         .course-list .item {
  36.             width: 248px;
  37.             padding: 10px;
  38.             border: 1px solid #dddddd;
  39.             margin-right: 5px;
  40.             margin-top: 10px;
  41.         }
  43.         .course-list .item img {
  44.             width: 100%;
  45.             height: 120px;
  46.         }
  47.     </style>
  49.     <script src="vue.js"></script>
  50.     <script src="vue-router.js"></script>
  51.     <script src="axios.min.js"></script>
  52. </head>
  53. <body>
  54. <div id="app">
  55.     <div class="menu">
  56.         <div class="container">
  57.             <router-link to="/">路飞学城</router-link>
  58.             <router-link to="/home">首页</router-link>
  59.             <router-link to="/course">课程</router-link>
  60.             <router-link to="/news">资讯</router-link>
  61.         </div>
  62.     </div>
  63.     <div class="container">
  64.         <router-view></router-view>
  65.     </div>
  67. </div>
  69. <script>
  71.     const Home = {
  72.         data: function () {
  73.             return {
  74.                 title: "欢迎使用路飞学城"
  75.             }
  76.         },
  77.         template: `<h2>{{title}}</h2>`
  78.     }
  79.     const Course = {
  80.         data: function () {
  81.             return {
  82.                 courseList: []
  83.             }
  84.         },
  85.         created: function () {
  86.             /* 组件创建完成之后自动触发【此时组件的对象已创建，但还未将页面先关的DOM创建并显示在页面上】
  87.                  - 可以去操作组件对象，例如：this.courseList = [11,22,33]
  88.                  - 不可以去操作DOM，例如：document.getElementById （未创建）
  89.              */
  90.             axios({
  91.                 method: "get",
  92.                 url: 'https://api.luffycity.com/api/v1/course/actual/?limit=5&offset=0',
  93.                 headers: {
  94.                     "Content-Type": "application/json"
  95.                 }
  96.             }).then((res) => {
  97.                 this.courseList = res.data.data.result;
  98.             })
  100.         },
  101.         mounted: function () {
  102.             /* DOM对象已在页面上生成，此时就可以 */
  103.         },
  104.         template: `
  105.             <div class="course-list">
  107.                 <div class="item" v-for="item in courseList">
  108.                     <router-link :to="{name:'Detail',params:{id:item.id}}">
  109.                         <img :src="item.cover" alt="">
  110.                         <a>{{item.name}}</a>
  111.                      </router-link>
  112.                 </div>
  114.             </div>`
  115.     }
  116.     const News = {
  117.         data: function () {
  118.             return {
  119.                 dataList: []
  120.             }
  121.         },
  122.         created: function () {
  123.             /* 组件创建完成之后自动触发【此时组件的对象已创建，但还未将页面先关的DOM创建并显示在页面上】
  124.                  - 可以去操作组件对象，例如：this.courseList = [11,22,33]
  125.                  - 不可以去操作DOM，例如：document.getElementById （未创建）
  126.              */
  127.             axios({
  128.                 method: "get",
  129.                 url: 'https://api.luffycity.com/api/v1/course/actual/?limit=5&offset=10',
  130.                 headers: {
  131.                     "Content-Type": "application/json"
  132.                 }
  133.             }).then((res) => {
  134.                 this.dataList = res.data.data.result;
  135.             })
  137.         },
  138.         template: `<ul><li v-for="item in dataList">{{item.name}}</li></ul>`
  139.     }
  141.     const Detail = {
  142.         data: function () {
  143.             return {
  144.                 title: "详细页面",
  145.                 courseId: null,
  146.                 hotCourseList: [
  147.                     {id: 1000, title: "python全栈开发"},
  148.                     {id: 2000, title: "异步编程"},
  149.                 ],
  150.             }
  151.         },
  152.         created: function () {
  153.             this.courseId = this.$route.params.id;
  154.             // 此处可以根据课程ID，发送ajax请求获取课程详细信息
  155.             this.getCourseDetail();
  156.         },
  157.         watch: {
  158.             $route: function (to, from) {
  159.                 this.courseId = to.params.id;
  160.                 this.getCourseDetail();
  161.             }
  162.         },
  163.         methods: {
  164.             getCourseDetail: function () {
  165.                 // 根据this.courseId获取课程详细信息
  166.             }
  167.         },
  168.         template: `
  169.                 <div>
  170.                     <h2>课程详细页面</h2>
  171.                     <div>当前课程ID为：{{courseId}}</div>
  172.                     <h3>课程推荐</h3>
  173.                     <ul>
  174.                         <li v-for="item in hotCourseList">
  175.                             <router-link :to="{name:'Detail', params:{id:item.id}}">{{item.title}}</router-link>
  176.                         </li>
  177.                     </ul>
  178.                 </div>`
  179.     }
  181.     const router = new VueRouter({
  182.         routes: [
  183.             {path: '/', component: Home},
  184.             {path: '/home', component: Home},
  185.             {path: '/course', component: Course},
  186.             {path: '/news', component: News},
  187.             {path: '/detail:id', component: Detail, name: 'Detail'}
  188.         ],
  189.         //mode: 'history'
  190.     })
  192.     var app = new Vue({
  193.         el: '#app',
  194.         data: {},
  195.         methods: {},
  196.         router: router
  197.     })
  198. </script>
  199. </body>
  200. </html>

路由嵌套

13.vue - 图6

  1. const router = new VueRouter({
  2.   routes: [
  3.     {
  4.       path: '/pins/',
  5.       component: Pins,
  6.       // children是子路由
  7.       children: [
  8.         {
  9.           // 当 /pins/hot 匹配成功，
  10.           // Hot组件 会被渲染在 Pins 的 <router-view> 中
  11.           path: 'hot',
  12.           component: Hot
  13.         },
  14.         {
  15.           // 当 /pins/following 匹配成功，
  16.           // Following组件 会被渲染在 Pins 的 <router-view> 中
  17.           path: 'following',
  18.           component: Following
  19.         }
  20.       ]
  21.     }
  22.   ]
  23. })

案例：路飞学城（第4版）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         body {
  8.             margin: 0;
  9.         }
  11.         .container {
  12.             width: 1100px;
  13.             margin: 0 auto;
  14.         }
  16.         .menu {
  17.             height: 48px;
  18.             background-color: #499ef3;
  19.             line-height: 48px;
  21.         }
  23.         .menu a {
  24.             color: white;
  25.             text-decoration: none;
  26.             padding: 0 10px;
  27.         }
  29.         .course-list {
  30.             display: flex;
  31.             flex-wrap: wrap;
  32.             justify-content: flex-start;
  33.         }
  35.         .course-list .item {
  36.             width: 248px;
  37.             padding: 10px;
  38.             border: 1px solid #dddddd;
  39.             margin-right: 5px;
  40.             margin-top: 10px;
  41.         }
  43.         .course-list .item img {
  44.             width: 100%;
  45.             height: 120px;
  46.         }
  47.     </style>
  49.     <script src="vue.js"></script>
  50.     <script src="vue-router.js"></script>
  51.     <script src="axios.min.js"></script>
  52. </head>
  53. <body>
  54. <div id="app">
  55.     <div class="menu">
  56.         <div class="container">
  57.             <router-link to="/">路飞学城</router-link>
  58.             <router-link to="/pins">沸点</router-link>
  59.             <router-link to="/home">首页</router-link>
  60.             <router-link to="/course">课程</router-link>
  61.             <router-link to="/news">资讯</router-link>
  62.         </div>
  63.     </div>
  64.     <div class="container">
  65.         <router-view></router-view>
  66.     </div>
  68. </div>
  70. <script>
  72.     const Home = {
  73.         data: function () {
  74.             return {
  75.                 title: "欢迎使用路飞学城"
  76.             }
  77.         },
  78.         template: `<h2>{{title}}</h2>`
  79.     }
  80.     const Course = {
  81.         data: function () {
  82.             return {
  83.                 courseList: []
  84.             }
  85.         },
  86.         created: function () {
  87.             /* 组件创建完成之后自动触发【此时组件的对象已创建，但还未将页面先关的DOM创建并显示在页面上】
  88.                  - 可以去操作组件对象，例如：this.courseList = [11,22,33]
  89.                  - 不可以去操作DOM，例如：document.getElementById （未创建）
  90.              */
  91.             axios({
  92.                 method: "get",
  93.                 url: 'https://api.luffycity.com/api/v1/course/actual/?limit=5&offset=0',
  94.                 headers: {
  95.                     "Content-Type": "application/json"
  96.                 }
  97.             }).then((res) => {
  98.                 this.courseList = res.data.data.result;
  99.             })
  101.         },
  102.         mounted: function () {
  103.             /* DOM对象已在页面上生成，此时就可以 */
  104.         },
  105.         template: `
  106.             <div class="course-list">
  108.                 <div class="item" v-for="item in courseList">
  109.                     <router-link :to="{name:'Detail',params:{id:item.id}}">
  110.                         <img :src="item.cover" alt="">
  111.                         <a>{{item.name}}</a>
  112.                      </router-link>
  113.                 </div>
  115.             </div>`
  116.     }
  117.     const News = {
  118.         data: function () {
  119.             return {
  120.                 dataList: []
  121.             }
  122.         },
  123.         created: function () {
  124.             /* 组件创建完成之后自动触发【此时组件的对象已创建，但还未将页面先关的DOM创建并显示在页面上】
  125.                  - 可以去操作组件对象，例如：this.courseList = [11,22,33]
  126.                  - 不可以去操作DOM，例如：document.getElementById （未创建）
  127.              */
  128.             axios({
  129.                 method: "get",
  130.                 url: 'https://api.luffycity.com/api/v1/course/actual/?limit=5&offset=10',
  131.                 headers: {
  132.                     "Content-Type": "application/json"
  133.                 }
  134.             }).then((res) => {
  135.                 this.dataList = res.data.data.result;
  136.             })
  138.         },
  139.         template: `<ul><li v-for="item in dataList">{{item.name}}</li></ul>`
  140.     }
  141.     const Detail = {
  142.         data: function () {
  143.             return {
  144.                 title: "详细页面",
  145.                 courseId: null,
  146.                 hotCourseList: [
  147.                     {id: 1000, title: "python全栈开发"},
  148.                     {id: 2000, title: "异步编程"},
  149.                 ],
  150.             }
  151.         },
  152.         created: function () {
  153.             this.courseId = this.$route.params.id;
  154.             // 此处可以根据课程ID，发送ajax请求获取课程详细信息
  155.             this.getCourseDetail();
  156.         },
  157.         watch: {
  158.             $route: function (to, from) {
  159.                 this.courseId = to.params.id;
  160.                 this.getCourseDetail();
  161.             }
  162.         },
  163.         methods: {
  164.             getCourseDetail: function () {
  165.                 // 根据this.courseId获取课程详细信息
  166.             }
  167.         },
  168.         template: `
  169.                 <div>
  170.                     <h2>课程详细页面</h2>
  171.                     <div>当前课程ID为：{{courseId}}</div>
  172.                     <h3>课程推荐</h3>
  173.                     <ul>
  174.                         <li v-for="item in hotCourseList">
  175.                             <router-link :to="{name:'Detail', params:{id:item.id}}">{{item.title}}</router-link>
  176.                         </li>
  177.                     </ul>
  178.                 </div>`
  179.     }
  181.     const Pins = {
  182.         data: function () {
  183.             return {}
  184.         },
  185.         template: `
  186.             <div>
  187.                 <h2>沸点专区</h2>
  188.                 <router-link :to="{name:'Hot'}">热点</router-link>
  189.                 <router-link :to="{name:'Following'}">关注</router-link>                
  190.                 //因为有了路由嵌套的关系 点击热点 组件是加载在这个router-view里，而不是全局的router-view
  191.                 <router-view></router-view>
  192.             </div>
  193.          `
  194.     };
  196.     const Hot = {template: `<div><h2>Hot页面</h2></div>`};
  197.     const Following = {template: `<div><h2>Following页面</h2></div>`};
  199.     const router = new VueRouter({
  200.         routes: [
  201.             {path: '/', component: Home},
  202.             {path: '/home', component: Home},
  203.             {path: '/course', component: Course},
  204.             {path: '/news', component: News},
  205.             {path: '/detail:id', component: Detail, name: 'Detail'},
  206.             {
  207.                 path: '/pins',
  208.                 component: Pins,
  209.                 name: 'Pins',
  210.                 children: [
  211.                     {
  212.                         // 当 /pins/hot 匹配成功，
  213.                         // Hot组件 会被渲染在 Pins 的 <router-view> 中
  214.                         path: 'hot',
  215.                         component: Hot,
  216.                         name:'Hot'
  217.                     },
  218.                     {
  219.                         // 当 /pins/following 匹配成功，
  220.                         // Following组件 会被渲染在 Pins 的 <router-view> 中
  221.                         path: 'following',
  222.                         component: Following,
  223.                         name:'Following'
  224.                     }
  225.                 ]
  226.             }
  227.         ],
  228.         //mode: 'history'
  229.     })
  231.     var app = new Vue({
  232.         el: '#app',
  233.         data: {},
  234.         methods: {},
  235.         router: router
  236.     })
  237. </script>
  238. </body>
  239. </html>

案例：后台分类菜单

13.vue - 图7

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         body {
  8.             margin: 0;
  9.         }
  11.         .header {
  12.             height: 48px;
  13.             background-color: #499ef3;
  14.             line-height: 48px;
  16.         }
  18.         .header a {
  19.             color: white;
  20.             text-decoration: none;
  21.             padding: 0 10px;
  22.         }
  24.         .body .left-menu {
  25.             width: 180px;
  26.             border: 1px solid #dddddd;
  27.             border-bottom: 0;
  28.             position: absolute;
  29.             left: 1px;
  30.             top: 50px;
  31.             bottom: 0;
  32.             overflow: auto;
  33.             background-color: #f3f5f7;
  34.         }
  36.         .body .left-menu .head {
  37.             border-bottom: 1px solid #dddddd;
  38.             text-align: center;
  39.             font-size: 18px;
  40.             font-weight: bold;
  41.             padding: 15px;
  42.         }
  44.         .body .left-menu a {
  45.             display: block;
  46.             padding: 10px;
  47.             border-bottom: 1px solid #dddddd;
  48.         }
  50.         .body .right-body {
  51.             position: absolute;
  52.             left: 183px;
  53.             top: 50px;
  54.             right: 0;
  55.             bottom: 0;
  56.             overflow: auto;
  57.             padding: 10px;
  59.         }
  60.     </style>
  62.     <script src="vue.js"></script>
  63.     <script src="vue-router.js"></script>
  64.     <script src="axios.min.js"></script>
  65. </head>
  66. <body>
  67. <div id="app">
  68.     <div class="header">
  69.         <router-link to="/">Logo</router-link>
  70.         <router-link to="/home">首页</router-link>
  71.         <router-link to="/task">任务宝</router-link>
  72.         <router-link to="/message">消息宝</router-link>
  73.     </div>
  74.     <div class="body">
  75.         <router-view></router-view>
  76.     </div>
  78. </div>
  80. <script>
  82.     const Home = {
  83.         data: function () {
  84.             return {
  85.                 title: "欢迎使用xx系统"
  86.             }
  87.         },
  88.         template: `<h2>{{title}}</h2>`
  89.     };
  91.     const Task = {
  92.         data: function () {
  93.             return {}
  94.         },
  95.         template: `
  96.             <div>
  97.                 <div class="left-menu">
  98.                     <div class="head">任务宝</div>
  99.                     <router-link :to="{name:'Fans'}">粉丝</router-link>
  100.                     <router-link :to="{name:'Spread'}">推广码</router-link>
  101.                     <router-link :to="{name:'Statistics'}">数据统计</router-link>
  102.                 </div>
  103.                 <div class="right-body">
  104.                     <router-view></router-view>
  105.                 </div>
  107.             </div>`
  108.     };
  110.     const Fans = {template: `<h3>粉丝页面</h3>`};
  111.     const Spread = {template: `<h3>推广码页面</h3>`};
  112.     const Statistics = {template: `<h3>数据统计页面</h3>`};
  114.     const Message = {
  115.         data: function () {
  116.             return {}
  117.         },
  118.         template: `
  119.             <div>
  120.                 <div class="left-menu">
  121.                     <div class="head">消息宝</div>
  122.                     <router-link :to="{name:'Sop'}">SOP</router-link>
  123.                     <router-link :to="{name:'Send'}">推送管理</router-link>
  124.                 </div>
  125.                 <div class="right-body">
  126.                     <router-view></router-view>
  127.                 </div>
  129.             </div>`
  130.     };
  132.     const Sop = {template: `<h3>SOP页面</h3>`};
  133.     const Send = {template: `<h3>推送管理页面</h3>`};
  135.     const router = new VueRouter({
  136.         routes: [
  137.             {path: '/', component: Home},
  138.             {path: '/home', component: Home},
  139.             {
  140.                 path: '/task',
  141.                 component: Task,
  142.                 name: 'Task',
  143.                 children: [
  144.                     {
  145.                         path: '',
  146.                         // component: Fans,
  147.                         // redirect:'/task/fans'
  148.                         //重订向
  149.                         redirect: {name: 'Fans'}
  150.                     },
  151.                     {
  152.                         path: 'fans',
  153.                         component: Fans,
  154.                         name: 'Fans'
  155.                     },
  156.                     {
  157.                         path: 'spread',
  158.                         component: Spread,
  159.                         name: 'Spread'
  160.                     },
  161.                     {
  162.                         path: 'statistics',
  163.                         component: Statistics,
  164.                         name: 'Statistics'
  165.                     }
  166.                 ]
  167.             },
  168.             {
  169.                 path: '/message',
  170.                 component: Message,
  171.                 name: 'Message',
  172.                 children: [
  173.                     {
  174.                         path: 'sop',
  175.                         component: Sop,
  176.                         name: 'Sop'
  177.                     },
  178.                     {
  179.                         path: 'send',
  180.                         component: Send,
  181.                         name: 'Send'
  182.                     }
  183.                 ]
  184.             }
  185.         ]
  186.     })
  188.     var app = new Vue({
  189.         el: '#app',
  190.         data: {},
  191.         methods: {},
  192.         router: router
  193.     })
  194. </script>
  195. </body>
  196. </html>

编程式导航

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

  • router.push

往history 栈添加元素 ，同时跳转过去

  1. // 字符串
  2. router.push('home')
  4. // 对象
  5. router.push({ path: 'home' })
  7. // 命名的路由 name就是路由里的name,并携带参数
  8. router.push({ name: 'user', params: { userId: '123' }}) //
  10. // 带查询参数，变成 /register?plan=private
  11. router.push({ path: 'register', query: { plan: 'private' }})
  • router.replace

把当前页面替换成某个页面

  1. // 字符串
  2. router.replace('home')
  4. // 对象
  5. router.replace({ path: 'home' })
  7. // 命名的路由
  8. router.replace({ name: 'user', params: { userId: '123' }})
  10. // 带查询参数，变成 /register?plan=private
  11. router.replace({ path: 'register', query: { plan: 'private' }})
  13. # 跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
  • router.go 这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步
  1. // 在浏览器记录中前进一步，等同于 history.forward()
  2. router.go(1)
  4. // 后退一步记录，等同于 history.back()
  5. router.go(-1)
  7. // 前进 3 步记录
  8. router.go(3)
  10. // 如果 history 记录不够用，那就默默地失败呗
  11. router.go(-100)
  12. router.go(100)

案例：登录跳转（含顶部）

13.vue - 图8

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         body {
  8.             margin: 0;
  9.         }
  11.         .header {
  12.             height: 48px;
  13.             background-color: #499ef3;
  14.             line-height: 48px;
  16.         }
  18.         .header a {
  19.             color: white;
  20.             text-decoration: none;
  21.             padding: 0 10px;
  22.         }
  25.     </style>
  26.     <script src="vue.js"></script>
  27.     <script src="vue-router.js"></script>
  28. </head>
  29. <body>
  30. <div id="app">
  31.     <div class="header">
  32.         <router-link to="/">Logo</router-link>
  33.         <router-link to="/home">首页</router-link>
  34.         <router-link to="/task">任务宝</router-link>
  35.         <router-link to="/message">消息宝</router-link>
  37.         <div style="float: right;">
  38.             <router-link to="/login">登录</router-link>
  39.         </div>
  40.     </div>
  41.     <div class="body">
  42.         <router-view></router-view>
  43.     </div>
  45. </div>
  47. <script>
  49.     const Home = {
  50.         data: function () {
  51.             return {
  52.                 title: "欢迎使用xx系统"
  53.             }
  54.         },
  55.         template: `<h2>{{title}}</h2>`
  56.     };
  58.     const Task = {
  59.         data: function () {
  60.             return {}
  61.         },
  62.         template: `
  63.             <div>
  64.                 <h2>任务宝页面</h2>
  65.             </div>`
  66.     };
  68.     const Message = {
  69.         data: function () {
  70.             return {}
  71.         },
  72.         template: `
  73.             <div>
  74.                 <h2>消息宝页面</h2>
  75.             </div>`
  76.     };
  78.     const Login = {
  79.         data: function () {
  80.             return {
  81.                 user: '',
  82.                 pwd: ''
  83.             }
  84.         },
  85.         methods: {
  86.             doLogin: function () {
  87.                 if (this.user.length > 0 && this.pwd.length > 0) {
  88.                     this.$router.push({name: 'Task'});
  89.                     // this.$router.replace({name: 'Task'});
  90.                 }
  91.             }
  92.         },
  93.         template: `
  94.             <div style="width: 500px;margin: 100px auto">
  95.                 <input type="text" placeholder="用户名" v-model="user"/>
  96.                 <input type="text" placeholder="密码" v-model="pwd" />
  97.                 <input type="button" value="提 交"  @click="doLogin" />
  98.             </div>
  99.          `
  100.     };
  101.     const router = new VueRouter({
  102.         routes: [
  103.             {path: '/', component: Home},
  104.             {path: '/home', component: Home},
  105.             {path: '/login', component: Login, name: 'Login'},
  106.             {path: '/task', component: Task, name: 'Task'},
  107.             {path: '/message', component: Message, name: 'Message'}
  108.         ]
  109.     })
  111.     var app = new Vue({
  112.         el: '#app',
  113.         data: {},
  114.         methods: {},
  115.         router: router
  116.     })
  117. </script>
  118. </body>
  119. </html>

案例：登录跳转（不含顶部）

13.vue - 图9

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         body {
  8.             margin: 0;
  9.         }
  11.         .header {
  12.             height: 48px;
  13.             background-color: #499ef3;
  14.             line-height: 48px;
  16.         }
  18.         .header a {
  19.             color: white;
  20.             text-decoration: none;
  21.             padding: 0 10px;
  22.         }
  24.         .body .left-menu {
  25.             width: 180px;
  26.             border: 1px solid #dddddd;
  27.             border-bottom: 0;
  28.             position: absolute;
  29.             left: 1px;
  30.             top: 50px;
  31.             bottom: 0;
  32.             overflow: auto;
  33.             background-color: #f3f5f7;
  34.         }
  36.         .body .left-menu .head {
  37.             border-bottom: 1px solid #dddddd;
  38.             text-align: center;
  39.             font-size: 18px;
  40.             font-weight: bold;
  41.             padding: 15px;
  42.         }
  44.         .body .left-menu a {
  45.             display: block;
  46.             padding: 10px;
  47.             border-bottom: 1px solid #dddddd;
  48.         }
  50.         .body .right-body {
  51.             position: absolute;
  52.             left: 183px;
  53.             top: 50px;
  54.             right: 0;
  55.             bottom: 0;
  56.             overflow: auto;
  57.             padding: 10px;
  59.         }
  60.     </style>
  61.     <script src="vue.js"></script>
  62.     <script src="vue-router.js"></script>
  63. </head>
  64. <body>
  65. <div id="app">
  66.     <router-view></router-view>
  67. </div>
  69. <script>
  71.     const Home = {
  72.         data: function () {
  73.             return {
  74.                 title: "欢迎使用xx系统"
  75.             }
  76.         },
  77.         template: `
  78.             <div>
  79.                 <div class="header">
  80.                     <router-link to="/">Logo</router-link>
  81.                     <router-link to="/home">首页</router-link>
  82.                     <router-link :to="{name:'Task'}">任务宝</router-link>
  83.                     <router-link :to="{name:'Message'}">消息宝</router-link>
  85.                     <div style="float: right;">
  86.                         <router-link to="/login">登录</router-link>
  87.                     </div>
  88.                 </div>
  89.                 <div class="body">
  90.                     <router-view></router-view>
  91.                 </div>
  93.             </div>
  94.         `
  95.     };
  97.     const Index = {template: '<h3>这是个首页呀...</h3>'}
  99.     const Task = {
  100.         data: function () {
  101.             return {}
  102.         },
  103.         template: `
  104.             <div>
  105.                 <div class="left-menu">
  106.                     <div class="head">任务宝</div>
  107.                     <router-link :to="{name:'Fans'}">粉丝</router-link>
  108.                     <router-link :to="{name:'Spread'}">推广码</router-link>
  109.                     <router-link :to="{name:'Statistics'}">数据统计</router-link>
  110.                 </div>
  111.                 <div class="right-body">
  112.                     <router-view></router-view>
  113.                 </div>
  115.             </div>`
  116.     };
  118.     const Fans = {template: `<h3>粉丝页面</h3>`};
  119.     const Spread = {template: `<h3>推广码页面</h3>`};
  120.     const Statistics = {template: `<h3>数据统计页面</h3>`};
  122.     const Message = {
  123.         data: function () {
  124.             return {}
  125.         },
  126.         template: `
  127.             <div>
  128.                 <div class="left-menu">
  129.                     <div class="head">消息宝</div>
  130.                     <router-link :to="{name:'Sop'}">SOP</router-link>
  131.                     <router-link :to="{name:'Send'}">推送管理</router-link>
  132.                 </div>
  133.                 <div class="right-body">
  134.                     <router-view></router-view>
  135.                 </div>
  137.             </div>`
  138.     };
  140.     const Sop = {template: `<h3>SOP页面</h3>`};
  141.     const Send = {template: `<h3>推送管理页面</h3>`};
  142.     const Login = {
  143.         data: function () {
  144.             return {
  145.                 user: '',
  146.                 pwd: ''
  147.             }
  148.         },
  149.         methods: {
  150.             doLogin: function () {
  151.                 if (this.user.length > 0 && this.pwd.length > 0) {
  152.                     this.$router.push({name: 'Index'});
  153.                     // this.$router.replace({name: 'Task'});
  154.                 }
  155.             }
  156.         },
  157.         template: `
  158.             <div style="width: 500px;margin: 100px auto">
  159.                 <input type="text" placeholder="用户名" v-model="user"/>
  160.                 <input type="text" placeholder="密码" v-model="pwd" />
  161.                 <input type="button" value="提 交"  @click="doLogin" />
  162.             </div>
  163.          `
  164.     };
  168.     const router = new VueRouter({
  169.         routes: [
  170.             {
  171.                 path: '/',
  172.                 // component: Home,
  173.                 redirect: '/login'
  174.             },
  175.             {path: '/login', component: Login, name: 'Login'},
  176.             {
  177.                 path: '/home',
  178.                 component: Home,
  179.                 children: [
  180.                     {
  181.                         path: '',
  182.                         component: Index,
  183.                         name: "Index"
  184.                     },
  185.                     {
  186.                         path: 'task',
  187.                         component: Task,
  188.                         name: 'Task',
  189.                         children: [
  190.                             {
  191.                                 path: 'fans',
  192.                                 component: Fans,
  193.                                 name: 'Fans'
  194.                             },
  195.                             {
  196.                                 path: 'spread',
  197.                                 component: Spread,
  198.                                 name: 'Spread'
  199.                             },
  200.                             {
  201.                                 path: 'statistics',
  202.                                 component: Statistics,
  203.                                 name: 'Statistics'
  204.                             }
  205.                         ]
  206.                     },
  207.                     {
  208.                         path: 'message',
  209.                         component: Message,
  210.                         name: 'Message',
  211.                         children: [
  212.                             {
  213.                                 path: 'sop',
  214.                                 component: Sop,
  215.                                 name: 'Sop'
  216.                             },
  217.                             {
  218.                                 path: 'send',
  219.                                 component: Send,
  220.                                 name: 'Send'
  221.                             }
  222.                         ]
  223.                     }
  224.                 ],
  225.             },
  227.         ]
  228.     })
  230.     var app = new Vue({
  231.         el: '#app',
  232.         data: {},
  233.         methods: {},
  234.         router: router
  235.     })
  236. </script>
  237. </body>
  238. </html>

导航守卫

在基于vue-router实现访问跳转时，都会执行一个钩子。

  1. const router = new VueRouter({ ... })
  3. # router.beforeEach 每个url执行之前                              
  4. router.beforeEach((to, from, next) => {
  5.     // to: Route: 即将要进入的目标 路由对象
  6.     // from: Route: 当前导航正要离开的路由
  7.     // next() 继续向后执行
  8.     // next(false) 中断导航，保持当前所在的页面。
  9.     // next('/')   next({path:'/'}) next({name:'Login'})  跳转到指定页面
  10. })

注意：可以基于他实现未登录跳转登录页面。

案例：登录拦截（全局）

未登录时，访问后台管理页面，自动跳转到登录页面。

13.vue - 图10

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         body {
  8.             margin: 0;
  9.         }
  11.         .header {
  12.             height: 48px;
  13.             background-color: #499ef3;
  14.             line-height: 48px;
  16.         }
  18.         .header a {
  19.             color: white;
  20.             text-decoration: none;
  21.             padding: 0 10px;
  22.         }
  24.         .body .left-menu {
  25.             width: 180px;
  26.             border: 1px solid #dddddd;
  27.             border-bottom: 0;
  28.             position: absolute;
  29.             left: 1px;
  30.             top: 50px;
  31.             bottom: 0;
  32.             overflow: auto;
  33.             background-color: #f3f5f7;
  34.         }
  36.         .body .left-menu .head {
  37.             border-bottom: 1px solid #dddddd;
  38.             text-align: center;
  39.             font-size: 18px;
  40.             font-weight: bold;
  41.             padding: 15px;
  42.         }
  44.         .body .left-menu a {
  45.             display: block;
  46.             padding: 10px;
  47.             border-bottom: 1px solid #dddddd;
  48.         }
  50.         .body .right-body {
  51.             position: absolute;
  52.             left: 183px;
  53.             top: 50px;
  54.             right: 0;
  55.             bottom: 0;
  56.             overflow: auto;
  57.             padding: 10px;
  59.         }
  60.     </style>
  61.     <script src="vue.js"></script>
  62.     <script src="vue-router.js"></script>
  63. </head>
  64. <body>
  65. <div id="app">
  66.     <router-view></router-view>
  67. </div>
  69. <script>
  71.     const Home = {
  72.         data: function () {
  73.             return {
  74.                 title: "欢迎使用xx系统"
  75.             }
  76.         },
  77.         methods: {
  78.             doLogout: function () {
  79.                 sessionStorage.clear();
  80.                 this.$router.push({name: "Login"});
  81.             }
  82.         },
  83.         template: `
  84.             <div>
  85.                 <div class="header">
  86.                     <router-link to="/">Logo</router-link>
  87.                     <router-link to="/home">首页</router-link>
  88.                     <router-link :to="{name:'Task'}">任务宝</router-link>
  89.                     <router-link :to="{name:'Message'}">消息宝</router-link>
  91.                     <div style="float: right;">
  92.                         <a @click="doLogout">注销</a>
  93.                     </div>
  94.                 </div>
  95.                 <div class="body">
  96.                     <router-view></router-view>
  97.                 </div>
  99.             </div>
  100.         `
  101.     };
  103.     const Index = {template: '<h3>这是个首页呀...</h3>'}
  105.     const Task = {
  106.         data: function () {
  107.             return {}
  108.         },
  109.         template: `
  110.             <div>
  111.                 <div class="left-menu">
  112.                     <div class="head">任务宝</div>
  113.                     <router-link :to="{name:'Fans'}">粉丝</router-link>
  114.                     <router-link :to="{name:'Spread'}">推广码</router-link>
  115.                     <router-link :to="{name:'Statistics'}">数据统计</router-link>
  116.                 </div>
  117.                 <div class="right-body">
  118.                     <router-view></router-view>
  119.                 </div>
  121.             </div>`
  122.     };
  124.     const Fans = {template: `<h3>粉丝页面</h3>`};
  125.     const Spread = {template: `<h3>推广码页面</h3>`};
  126.     const Statistics = {template: `<h3>数据统计页面</h3>`};
  128.     const Message = {
  129.         data: function () {
  130.             return {}
  131.         },
  132.         template: `
  133.             <div>
  134.                 <div class="left-menu">
  135.                     <div class="head">消息宝</div>
  136.                     <router-link :to="{name:'Sop'}">SOP</router-link>
  137.                     <router-link :to="{name:'Send'}">推送管理</router-link>
  138.                 </div>
  139.                 <div class="right-body">
  140.                     <router-view></router-view>
  141.                 </div>
  143.             </div>`
  144.     };
  146.     const Sop = {template: `<h3>SOP页面</h3>`};
  147.     const Send = {template: `<h3>推送管理页面</h3>`};
  148.     const Login = {
  149.         data: function () {
  150.             return {
  151.                 user: '',
  152.                 pwd: ''
  153.             }
  154.         },
  155.         methods: {
  156.             doLogin: function () {
  157.                 if (this.user.length > 0 && this.pwd.length > 0) {
  158.                     sessionStorage.setItem("isLogin", true);
  159.                     this.$router.push({name: 'Index'});
  160.                 }
  161.             }
  162.         },
  163.         template: `
  164.             <div style="width: 500px;margin: 100px auto">
  165.                 <input type="text" placeholder="用户名" v-model="user"/>
  166.                 <input type="text" placeholder="密码" v-model="pwd" />
  167.                 <input type="button" value="提 交"  @click="doLogin" />
  168.             </div>
  169.          `
  170.     };
  171.     const router = new VueRouter({
  172.         routes: [
  173.             {
  174.                 path: '/',
  175.                 component: Home,
  176.                 redirect: '/home'
  177.             },
  178.             {
  179.                 path: '/home',
  180.                 component: Home,
  181.                 name: "Home",
  182.                 children: [
  183.                     {
  184.                         path: '',
  185.                         component: Index,
  186.                         name: "Index"
  187.                     },
  188.                     {
  189.                         path: 'task',
  190.                         component: Task,
  191.                         name: 'Task',
  192.                         children: [
  193.                             {
  194.                                 path: 'fans',
  195.                                 component: Fans,
  196.                                 name: 'Fans'
  197.                             },
  198.                             {
  199.                                 path: 'spread',
  200.                                 component: Spread,
  201.                                 name: 'Spread'
  202.                             },
  203.                             {
  204.                                 path: 'statistics',
  205.                                 component: Statistics,
  206.                                 name: 'Statistics'
  207.                             }
  208.                         ]
  209.                     },
  210.                     {
  211.                         path: 'message',
  212.                         component: Message,
  213.                         name: 'Message',
  214.                         children: [
  215.                             {
  216.                                 path: 'sop',
  217.                                 component: Sop,
  218.                                 name: 'Sop'
  219.                             },
  220.                             {
  221.                                 path: 'send',
  222.                                 component: Send,
  223.                                 name: 'Send'
  224.                             }
  225.                         ]
  226.                     }
  227.                 ],
  228.             },
  229.             {path: '/login', component: Login, name: 'Login'},
  230.         ]
  231.     })
  233.     router.beforeEach((to, from, next) => {
  234.         // 如果已登录，则可以继续访问目标地址
  235.         // sessionStorage存储到游览器上的一个值
  236.         if (sessionStorage.getItem('isLogin')) {
  237.             next();
  238.             return;
  239.         }
  240.         // 未登录，访问登录页面
  241.         if (to.name === "Login") {
  242.             next();
  243.             return;
  244.         }
  245.         // 未登录，跳转登录页面
  246.         // next(false); 保持当前所在页面，不跳转
  247.         next({name: 'Login'});
  248.     })
  250.     var app = new Vue({
  251.         el: '#app',
  252.         data: {},
  253.         methods: {},
  254.         router: router
  255.     })
  256. </script>
  257. </body>
  258. </html>

案例：登录拦截（路由）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         body {
  8.             margin: 0;
  9.         }
  11.         .header {
  12.             height: 48px;
  13.             background-color: #499ef3;
  14.             line-height: 48px;
  16.         }
  18.         .header a {
  19.             color: white;
  20.             text-decoration: none;
  21.             padding: 0 10px;
  22.         }
  24.         .body .left-menu {
  25.             width: 180px;
  26.             border: 1px solid #dddddd;
  27.             border-bottom: 0;
  28.             position: absolute;
  29.             left: 1px;
  30.             top: 50px;
  31.             bottom: 0;
  32.             overflow: auto;
  33.             background-color: #f3f5f7;
  34.         }
  36.         .body .left-menu .head {
  37.             border-bottom: 1px solid #dddddd;
  38.             text-align: center;
  39.             font-size: 18px;
  40.             font-weight: bold;
  41.             padding: 15px;
  42.         }
  44.         .body .left-menu a {
  45.             display: block;
  46.             padding: 10px;
  47.             border-bottom: 1px solid #dddddd;
  48.         }
  50.         .body .right-body {
  51.             position: absolute;
  52.             left: 183px;
  53.             top: 50px;
  54.             right: 0;
  55.             bottom: 0;
  56.             overflow: auto;
  57.             padding: 10px;
  59.         }
  60.     </style>
  61.     <script src="vue.js"></script>
  62.     <script src="vue-router.js"></script>
  63. </head>
  64. <body>
  65. <div id="app">
  66.     <router-view></router-view>
  67. </div>
  69. <script>
  71.     const Home = {
  72.         data: function () {
  73.             return {
  74.                 title: "欢迎使用xx系统"
  75.             }
  76.         },
  77.         methods: {
  78.             doLogout: function () {
  79.                 sessionStorage.clear();
  80.                 this.$router.push({name: "Login"});
  81.             }
  82.         },
  83.         template: `
  84.             <div>
  85.                 <div class="header">
  86.                     <router-link to="/">Logo</router-link>
  87.                     <router-link to="/home">首页</router-link>
  88.                     <router-link :to="{name:'Task'}">任务宝</router-link>
  89.                     <router-link :to="{name:'Message'}">消息宝</router-link>
  91.                     <div style="float: right;">
  92.                         <a @click="doLogout">注销</a>
  93.                     </div>
  94.                 </div>
  95.                 <div class="body">
  96.                     <router-view></router-view>
  97.                 </div>
  99.             </div>
  100.         `
  101.     };
  103.     const Index = {template: '<h3>这是个首页呀...</h3>'}
  105.     const Task = {
  106.         data: function () {
  107.             return {}
  108.         },
  109.         template: `
  110.             <div>
  111.                 <div class="left-menu">
  112.                     <div class="head">任务宝</div>
  113.                     <router-link :to="{name:'Fans'}">粉丝</router-link>
  114.                     <router-link :to="{name:'Spread'}">推广码</router-link>
  115.                     <router-link :to="{name:'Statistics'}">数据统计</router-link>
  116.                 </div>
  117.                 <div class="right-body">
  118.                     <router-view></router-view>
  119.                 </div>
  121.             </div>`
  122.     };
  124.     const Fans = {template: `<h3>粉丝页面</h3>`};
  125.     const Spread = {template: `<h3>推广码页面</h3>`};
  126.     const Statistics = {template: `<h3>数据统计页面</h3>`};
  128.     const Message = {
  129.         data: function () {
  130.             return {}
  131.         },
  132.         template: `
  133.             <div>
  134.                 <div class="left-menu">
  135.                     <div class="head">消息宝</div>
  136.                     <router-link :to="{name:'Sop'}">SOP</router-link>
  137.                     <router-link :to="{name:'Send'}">推送管理</router-link>
  138.                 </div>
  139.                 <div class="right-body">
  140.                     <router-view></router-view>
  141.                 </div>
  143.             </div>`
  144.     };
  146.     const Sop = {template: `<h3>SOP页面</h3>`};
  147.     const Send = {template: `<h3>推送管理页面</h3>`};
  148.     const Login = {
  149.         data: function () {
  150.             return {
  151.                 user: '',
  152.                 pwd: ''
  153.             }
  154.         },
  155.         methods: {
  156.             doLogin: function () {
  157.                 if (this.user.length > 0 && this.pwd.length > 0) {
  158.                     sessionStorage.setItem("isLogin", true);
  159.                     this.$router.push({name: 'Index'});
  160.                 }
  161.             }
  162.         },
  163.         template: `
  164.             <div style="width: 500px;margin: 100px auto">
  165.                 <input type="text" placeholder="用户名" v-model="user"/>
  166.                 <input type="text" placeholder="密码" v-model="pwd" />
  167.                 <input type="button" value="提 交"  @click="doLogin" />
  168.             </div>
  169.          `
  170.     };
  171.     const router = new VueRouter({
  172.         routes: [
  173.             {
  174.                 path: '/',
  175.                 component: Home,
  176.                 redirect: '/home'
  177.             },
  178.             {
  179.                 path: '/home',
  180.                 component: Home,
  181.                 name: "Home",
  182.                 children: [
  183.                     {
  184.                         path: '',
  185.                         component: Index,
  186.                         name: "Index"
  187.                     },
  188.                     {
  189.                         path: 'task',
  190.                         component: Task,
  191.                         name: 'Task',
  192.                         children: [
  193.                             {
  194.                                 path: 'fans',
  195.                                 component: Fans,
  196.                                 name: 'Fans'
  197.                             },
  198.                             {
  199.                                 path: 'spread',
  200.                                 component: Spread,
  201.                                 name: 'Spread'
  202.                             },
  203.                             {
  204.                                 path: 'statistics',
  205.                                 component: Statistics,
  206.                                 name: 'Statistics'
  207.                             }
  208.                         ]
  209.                     },
  210.                     {
  211.                         path: 'message',
  212.                         component: Message,
  213.                         name: 'Message',
  214.                         children: [
  215.                             {
  216.                                 path: 'sop',
  217.                                 component: Sop,
  218.                                 name: 'Sop'
  219.                             },
  220.                             {
  221.                                 path: 'send',
  222.                                 component: Send,
  223.                                 name: 'Send'
  224.                             }
  225.                         ]
  226.                     }
  227.                 ],
  228.                 beforeEnter: (to, from, next) => {
  229.                     if (sessionStorage.getItem('isLogin')) {
  230.                         next();
  231.                         return;
  232.                     }
  233.                     // 未登录，跳转登录页面
  234.                     // next(false); 保持当前所在页面，不跳转
  235.                     next({name: 'Login'});
  236.                 }
  237.             },
  238.             {path: '/login', component: Login, name: 'Login'},
  239.         ]
  240.     })
  242.     var app = new Vue({
  243.         el: '#app',
  244.         data: {},
  245.         methods: {},
  246.         router: router
  247.     })
  248. </script>
  249. </body>
  250. </html>

补充：

  • cookie
  • localStorage 
    1. setItem (key, value)
    2. getItem (key)
    3. removeItem (key)
    4. clear ()
    5. key (index)
  • sessionStorage

脚手架

基于vue+vue-router单文件开发，可以完成小规模的页面的开发，但如果项目大+组件多+依赖多，开发起来就非常不方便。

此时，脚手架（vue cli - Vue Command Line Interface ）是一个基于 Vue.js 进行快速开发的完整系统。

  1. 官方的说法：
  2. Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。
  1. 通俗的说法：
  2. 他帮助我们构内置了很多组件来帮助我们更便捷的的开发vue.js项目。

安装

  • 第一步：安装node.js ``` Vue CLI 4.x+ 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。

https://nodejs.org/en/download/

  1. <br />![](https://typora-image.obs.cn-north-4.myhuaweicloud.com/image/202205031736090.png#crop=0&crop=0&crop=1&crop=1&id=J3Qna&originHeight=136&originWidth=1336&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=)  
  3. -  第二步：关于npm

安装上node之后，自带了npm包管理工具，类似于Python中的pip。

如果想要更新npm到最新版，可以执行命令： sudo npm install npm@latest -g

  1. <br />![](https://typora-image.obs.cn-north-4.myhuaweicloud.com/image/202205031736091.png#crop=0&crop=0&crop=1&crop=1&id=IxvbB&originHeight=152&originWidth=1292&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=) 
  3. -  第三步：npm淘宝源，以后基于npm安装包就会快了（相当于豆瓣的pip源）

npm config set registry https://registry.npm.taobao.org

  3. -  第四步：全局安装vue-cli

安装（最新版）

sudo npm install -g @vue/cli

安装（指定版本）

sudo npm install -g @vue/cli@4.5.14

卸载

sudo npm uninstall -g @vue/cli

  1. <br />![](https://typora-image.obs.cn-north-4.myhuaweicloud.com/image/202205031736092.png#crop=0&crop=0&crop=1&crop=1&id=Qhc3C&originHeight=164&originWidth=1624&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=) 
  3. <a name="39da6755"></a>
  4. ## 创建项目
  6. ```javascript
  7. cd /Users/wupeiqi/WebstormProjects
  8. vue create mysite

13.vue - 图11

提示：babel是一个将ES6语法转化成ES5的工具，eslint是做语法检查。

13.vue - 图12

a few moments later…

13.vue - 图13

按照提示执行如下命令，脚手架就会给我们大家一个Web服务去运行编写的vue项目（便于开发测试）。

  1. cd mysite
  2. npm run serve

13.vue - 图14

13.vue - 图15

编译和部署

项目创建完，脚手架会默认会生成如下文件（包含项目依赖、配置文件、默认代码）。

13.vue - 图16

如果以后项目开发完毕，想要进行项目部署，是不需要这些文件的，执行命令：

  1. cd 项目目录
  2. npm run build

13.vue - 图17

build会将项目中的依赖和代码自动编译成HTML、CSS、JavaScript代码，后续只需要将此代码上传至服务器部署即可。

目录结构

  1. - babel.config.js      babel是ES6转换ES5的组件，这是他所需的配置文件（一般不需要动）。
  2. - package.json         项目所需的包的版本信息。
  3. - package-lock.json    保存项目所需的包细节以及包的依赖等信息。
  4. - node-modules         项目安装依赖包的文件保存的地方。例如：npm install axios 
  5.                        axios包会保存在此目录、信息也会写在 package.json、package-lock.json中   
  6. - src
  7.     - main.js          项目的启动 npm run serve ，用户访问时程序的入门。new vue()
  8.     - App.vue           主组件
  9.     - components       子组件
  10.     - assets           静态文件（自己的静态文件，会被压缩和合并）
  11. - public              【此目录下的文件直接被复制到dist/目录下，一般放不动的数据，引入第三方】
  12.     - index.html       主HTML文件（模板引擎）
  13.     - favicon.icon     图标
  14. - README.md            项目说明文档

main.js

13.vue - 图18

render返回什么页面就看到什么，createElement是创建标签的

App.vue

13.vue - 图19

template 放html代码 script放js style放样式

  1. cd 项目
  2. npm install  #会根据package-lock.json 自动下载所需要的包

本质上，其实就是将原来的代码做了拆分来进行开发，开发完毕之后再编译整合起来。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  7. </head>
  8. <body>
  10. <div id="app">
  11.     <h1>欢迎学习Vue.js</h1>
  12.     <div>我叫{{name}}，微信{{wechat}}</div>
  13. </div>
  15. <script>
  18.     var app = new Vue({
  19.         el: '#app',
  20.         data: {
  21.             name: '武沛齐',
  22.             wechat: 'wupeiqi888'
  23.         },
  24.         methods: {
  25.             clickMe: function () {
  26.                 this.name = "alex";
  27.                 this.wechat = "wupeiqi666";
  28.             }
  29.         }
  30.     })
  31. </script>
  32. </body>
  33. </html>

快速上手

13.vue - 图20

axios组件

安装：

  1. cd 项目目录
  2. npm install axios
  3. npm install vue-axios

导入：main.js文件中引入

  1. import Vue from 'vue'
  2. import axios from 'axios'
  3. import VueAxios from 'vue-axios'
  5. Vue.use(VueAxios, axios) #这两个组件挂载到vue中

使用：

  1. Vue.axios.get(api).then((response) => {
  2.   console.log(response.data)
  3. })
  5. this.axios.get(api).then((response) => {
  6.   console.log(response.data)
  7. })
  9. this.$http.get(api).then((response) => {
  10.   console.log(response.data)
  11. })

vue-router组件

安装：

  1. cd 项目目录
  2. npm install vue-router@3

引入：

  1. // src/router/index.js
  3. import Vue from 'vue'
  4. import VueRouter from 'vue-router'
  7. import Home from '../components/Home'
  10. Vue.use(VueRouter)
  12. const router = new VueRouter({
  13.     routes: [
  14.         {
  15.             path: '/home',
  16.             name: "Home",
  17.             component: Home
  18.         },
  19.     ]
  20. })
  22. export default router #导出router对象 外部就可以使用
  1. // main.js
  2. import Vue from 'vue'
  3. import axios from 'axios'
  4. import VueAxios from 'vue-axios'
  7. import App from './App.vue'
  9. // 导入router文件
  10. import router from "./router"
  13. Vue.use(VueAxios, axios)
  15. Vue.config.productionTip = true
  18. new Vue({
  19.     router: router, #组件使用必须放在new Vue里
  20.     render: h => h(App),
  21. }).$mount('#app')

使用：App.vue

  1. <template>
  2.     <div>
  3.         <router-link to="/home">点我</router-link>
  4.         <router-view></router-view>
  5.     </div>
  6. </template>

案例：路飞学城

基于vue-cli快速开发：路飞学城（第一版）

13.vue - 图21

线上部署

  • 第一步：编译
  1. npm run build
  • 第二步：将编译后的代码dist文件上传到服务器（阿里云、腾讯云）

13.vue - 图22

  • 第三步：安装nginx + 配置 + 启动
  1. yum install nginx
  1.   vim /etc/nginx/nginx.conf
  3.   user nginx;
  4. worker_processes auto;
  5. error_log /var/log/nginx/error.log;
  6. pid /run/nginx.pid;
  8. # Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
  9. include /usr/share/nginx/modules/*.conf;
  11. events {
  12.     worker_connections 1024;
  13. }
  15. http {
  16.     log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
  17.                       '$status $body_bytes_sent "$http_referer" '
  18.                       '"$http_user_agent" "$http_x_forwarded_for"';
  20.     access_log  /var/log/nginx/access.log  main;
  22.     sendfile            on;
  23.     tcp_nopush          on;
  24.     tcp_nodelay         on;
  25.     keepalive_timeout   65;
  26.     types_hash_max_size 4096;
  28.     include             /etc/nginx/mime.types;
  29.     default_type        application/octet-stream;
  31.     include /etc/nginx/conf.d/*.conf;
  33.     server {
  34.         listen       80;
  35.         listen       [::]:80;
  36.         server_name  _;
  37.         # 项目目录
  38.         root         /data/mysite;
  40.         # Load configuration files for the default server block.
  41.         include /etc/nginx/default.d/*.conf;
  43.         error_page 404 /404.html;
  44.         location = /404.html {
  45.         }
  47.         error_page 500 502 503 504 /50x.html;
  48.         location = /50x.html {
  49.         }
  50.     }
  53. }
  • 第四步：访问

vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

就是将组件中需要共享的数据交给vuex来帮我们进行管理，例如：用户登录状态、加入购物车。

13.vue - 图23

案例：登录

  1. vue create vxdemo
  2. npm install vue-router@3
  3. npm install vuex@3
  • main.js
  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. import router from "./router"
  4. import store from "./store"
  6. Vue.config.productionTip = false
  8. new Vue({
  9.     router: router,
  10.     store: store, //store挂载到vue
  11.     render: h => h(App),
  12. }).$mount('#app')
  • App.vue
  1. <template>
  2.     <div id="app">
  3.         <div class="menu">
  4.             <div class="container">
  5.                 <router-link to="/home">首页</router-link>
  6.                 <router-link to="/course">课程</router-link>
  8.                 <div style="float: right">
  9.                     <a v-if="this.$store.state.isLogin">
  10.                         {{this.$store.state.userInfo.username}}
  11.                     </a>
  12.                     <router-link v-else to="/login">登录</router-link>
  14.                 </div>
  15.             </div>
  16.         </div>
  17.         <div class="container">
  18.             <router-view></router-view>
  19.         </div>
  20.     </div>
  21. </template>
  22. <script>
  23.     export default {
  24.         name: 'App',
  25.         data() {
  26.             return {}
  27.         },
  28.         components: {},
  29.     }
  30. </script>
  32. <style>
  33.     body {
  34.         margin: 0;
  35.     }
  36.     .container {
  37.         width: 1100px;
  38.         margin: 0 auto;
  39.     }
  40.     .menu {
  41.         height: 48px;
  42.         background-color: #499ef3;
  43.         line-height: 48px;
  45.     }
  46.     .menu a {
  47.         color: white;
  48.         text-decoration: none;
  49.         padding: 0 10px;
  50.     }
  51. </style>
  • src/store/index.js
  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  4. Vue.use(Vuex)
  7. export default new Vuex.Store({
  8.     //state存储数据的
  9.     state: {
  10.         isLogin: false, //是否登录
  11.         userInfo: null //用户信息
  12.     },
  13.     //通过mutations中的函数来修改state中的值
  14.     //state默认就是当前的，传过来的值在info
  15.     mutations: {
  16.         login: function (state, info) {
  17.             state.userInfo = info;
  18.             state.isLogin = true;
  19.         },
  21.     },
  22.     actions: {}
  23. })
  • router/index.js
  1. // router/index.js
  3. import Vue from 'vue'
  4. import VueRouter from 'vue-router'
  7. import Home from '../components/Home'
  8. import Course from '../components/Course'
  9. import Login from '../components/Login'
  12. Vue.use(VueRouter)
  14. const router = new VueRouter({
  15.     routes: [
  16.         {
  17.             path: '/home',
  18.             name: "Home",
  19.             component: Home
  20.         },
  21.         {
  22.             path: '/course',
  23.             name: "Course",
  24.             component: Course
  25.         },
  26.         {
  27.             path: '/login',
  28.             name: "Login",
  29.             component: Login
  30.         },
  31.     ]
  32. })
  34. export default router
  • components/Login.vue
  1. <template>
  2.     <div>
  3.         <input type="text" v-model="info.username" placeholder="用户名">
  4.         <input type="password" v-model="info.password" placeholder="密码">
  5.         <input type="button" value="登录" @click="doLogin"/>
  6.     </div>
  7. </template>
  9. <script>
  10.     export default {
  11.         name: "Login",
  12.         data() {
  13.             return {
  14.                 info: {
  15.                     username: "",
  16.                     password: ""
  17.                 }
  18.             }
  19.         },
  20.         methods: {
  21.             doLogin: function () {
  22.                 // 1.用户登录
  23.                 this.$store.commit('login', this.info);
  24.                 // 2.登录成功修改状态
  25.                 this.$router.push({name: 'Home'});
  26.             }
  27.         }
  28.     }
  29. </script>
  31. <style scoped>
  33. </style>

关于computed属性

在vue的组件中有一个computed属性（计算属性），监听关联的数据，如果发生变化则重新计算并显示。

  1. <template>
  2.     <div>
  3.         <h1>主页 {{v1}} {{ v2}}</h1>
  4.         //{{totalData}} 是通过computed计算出来的，就是去读取computed中的totalData属性，并执行get方法，返回值放到此处
  5.         <div>总数：{{totalData}}</div>
  6.         <input type="button" value="点我" @click="addData"/>
  7.     </div>
  8. </template>
  10. <script>
  11.     export default {
  12.         name: "Home",
  13.         data() {
  14.             return {
  15.                 v1: 123,
  16.                 v2: 456
  17.             }
  18.         },
  19.         computed: {
  20.             totalData: {
  21.                 get() {
  22.                     let data = this.v1 + this.v2;
  23.                     return data + 1000;
  24.                 },
  25.                 set(value) {
  26.                     this.v1 = value;
  27.                 }
  28.             }
  29.         },
  30.         methods: {
  31.             addData() {
  32.                 // 给totalData设置值的时候就会执行 set方法
  33.                 this.totalData = 999;
  34.                 // this.v2 = 1000;
  35.             }
  36.         }
  37.     }
  38. </script>
  40. <style scoped>
  42. </style>

所以，上述案例也可以用computed属性来实现，例如：App.vue改成：

  1. <template>
  2.     <div id="app">
  3.         <div class="menu">
  4.             <div class="container">
  5.                 <router-link to="/home">首页</router-link>
  6.                 <router-link to="/course">课程</router-link>
  8.                 <div style="float: right">
  9.                     <a v-if="userState">
  10.                         {{userName}}
  11.                     </a>
  12.                     <router-link v-else to="/login">登录</router-link>
  14.                 </div>
  15.             </div>
  16.         </div>
  17.         <div class="container">
  18.             <router-view></router-view>
  19.         </div>
  20.     </div>
  21. </template>
  23. <script>
  25.     export default {
  26.         name: 'App',
  27.         data() {
  28.             return {}
  29.         },
  30.         computed: {
  31.             userState: {
  32.                 get() {
  33.                     return this.$store.state.isLogin;
  34.                 }
  35.             },
  36.             userName() {
  37.                 return this.$store.state.userInfo.username;
  38.             },
  40.         },
  41.         components: {},
  42.     }
  43. </script>
  45. <style>
  46.     body {
  47.         margin: 0;
  48.     }
  50.     .container {
  51.         width: 1100px;
  52.         margin: 0 auto;
  53.     }
  55.     .menu {
  56.         height: 48px;
  57.         background-color: #499ef3;
  58.         line-height: 48px;
  60.     }
  62.     .menu a {
  63.         color: white;
  64.         text-decoration: none;
  65.         padding: 0 10px;
  66.     }
  69. </style>

案例：购物车

13.vue - 图24

  1. vue store存储commit和dispatch
  3. this.$store.commit('toShowLoginDialog', true);
  4. this.$store.dispatch('toShowLoginDialog',false)
  5. 主要区别是：
  6. dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch('mutations方法名',值)
  7. commit：同步操作，写法：this.$store.commit('mutations方法名',值)

关于Action

Action 类似于 mutation，不同在于：

  • Action 提交的是 mutation，而不是直接变更状态。
  • Action 可以包含任意异步操作。

代码示例：

  1. const store = createStore({
  2.   state: {
  3.     count: 0
  4.   },
  5.   mutations: {
  6.     increment (state) {
  7.       state.count+=1;
  8.     }
  9.   },
  10.   actions: {
  11.     increment (context) {
  12.         // 触发mutations
  13.           context.commit('increment')
  14.     }
  15.   }
  16. })

在组件中如果要触发actions中的increment，则应该执行：

  1. this.$store.dispatch('increment')

这就有点像脱裤子放屁，意义何在呢？ 当有异步操作时，应该使用action、而不是mutation，例如：

  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  4. Vue.use(Vuex)
  7. export default new Vuex.Store({
  8.     state: {
  9.         isLogin: false, //是否登录
  10.         userInfo: null, //用户信息
  11.         carNumber: 0,
  12.         xxxxx: 10
  13.     },
  14.     mutations: {
  15.         login: function (state, info) {
  16.             state.userInfo = info;
  17.             state.isLogin = true;
  18.         },
  19.         addCar: function (state) {
  20.             state.carNumber += 1;
  21.         },
  22.         fetchAsync: function (state) {
  23.             // ajax
  24.             //setTimeout 1000毫秒以后才执行函数
  25.             setTimeout(function () {
  26.                 state.xxxxx += 1;
  27.             }, 1000);
  28.         }
  30.     },
  31.     actions: {}
  32. })
  1. this.$store.commit("fetchAsync");

从效果上看是没有问题的，但是通过开发者工具就会发现，监测到的state的数据不准确。

13.vue - 图25

Action里面做异步操作，回调函数执行mutations，mutations里面修改state里面的值

所以，这种情况可以选择用Action。

  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  4. Vue.use(Vuex)
  7. export default new Vuex.Store({
  8.     state: {
  9.         isLogin: false, //是否登录
  10.         userInfo: null, //用户信息
  11.         carNumber: 0,
  12.         xxxxx: 10
  13.     },
  14.     mutations: {
  15.         login: function (state, info) {
  16.             state.userInfo = info;
  17.             state.isLogin = true;
  18.         },
  19.         addCar: function (state) {
  20.             state.carNumber += 1;
  21.         },
  22.         fetchAsync: function (state,data) {
  23.             state.xxxxx += 1;
  24.             console.log(data);
  25.         }
  27.     },
  28.     actions: {
  29.         fetchAsync: function (context,data) {
  30.             setTimeout(function () {
  31.                 context.commit("fetchAsync",data);
  32.             }, 1000);
  33.         }
  34.     }
  35. })

再触发时，调用：

  1. this.$store.dispatch('fetchAsync',{ amount: 10})

flex布局

在CSS3中flex可以非常便捷的可以帮助我们实现对页面的布局。

  • 传统的页面布局，基于div+float来实现。
  • flex可以快速实现页面的布局（很方便）。

关于flex布局你必须要了解的有一下几点：

  1. <div class="menu" 样式>
  2.     <div class="item" 样式>112</div>
  3.     <div class="item">113</div>
  4. </div>

容器

flex布局

在容器元素上应用

  1. <div class="menu">
  2.     <div class="item">112</div>
  3.     <div class="item">113</div>
  4. </div>
  6. <style>
  7.     .menu{
  8.         border: 1px solid red;
  9.         width: 500px;
  10.         display: flex;         // 表示flex布局
  11.     }
  12. </style>

元素的方向（主轴和副轴）

  1. <div class="menu">
  2.     <div class="item">112</div>
  3.     <div class="item">113</div>
  4. </div>
  5. <style>
  6.     .menu{
  7.         border: 1px solid red;
  8.         width: 500px;
  10.         display: flex;         // 表示flex布局
  11.         flex-direction: row;   // 主轴是横向，副轴是纵向。column
  12.     }
  13. </style>

元素排列方式

  1. justify-content，主轴上的元素的排列方式
  2. align-items，副轴上的元素的排列方式。

13.vue - 图26

  1. <div class="menu">
  2.     <div class="item">11</div>
  3.     <div class="item">112</div>
  4.     <div class="item">112</div>
  5. </div>
  6. <style>
  7.     .menu {
  8.         width: 500px;
  9.         border: 1px solid red;
  10.         display: flex;
  12.         flex-direction: row;
  13.         justify-content: flex-start;     /* 主轴=横向，横向从左开始 */
  14.         justify-content: flex-end;       /* 主轴=横向，横向从右开始 */
  15.         justify-content: space-between;   /* 主轴=横向，左右定格，中间元素等分空白 */
  16.         justify-content: space-around;   /* 主轴=横向，所有元素等分空白 */
  17.         justify-content: space-evenly;   /* 主轴=横向，元素间距一样 */
  18.     }
  20.     .item {
  21.         border: 1px solid green;
  22.         padding: 5px 50px;
  23.         height: 50px;
  24.         width: 40px;
  25.     }
  26. </style>

13.vue - 图27

  1. <div class="menu">
  2.     <div class="item">11</div>
  3.     <div class="item">112</div>
  4.     <div class="item">112</div>
  5. </div>
  6. <style>
  7.     .menu {
  8.         width: 500px;
  9.         height: 300px;
  10.         border: 1px solid red;
  11.         display: flex;
  13.         flex-direction: row;
  14.         justify-content: flex-start;     /* 主轴=横向，横向从左开始 */
  15.         justify-content: flex-end;       /* 主轴=横向，横向从右开始 */
  16.         justify-content: space-between;   /* 主轴=横向，左右定格，中间元素等分空白 */
  17.         justify-content: space-around;   /* 主轴=横向，所有元素等分空白 */
  18.         justify-content: space-evenly;   /* 主轴=横向，元素间距一样 */
  20.         align-items: center;             /* 副轴=纵向，元素居中*/
  21.         align-items: flex-start;         /* 副轴=纵向，元素顶部*/
  22.         align-items: flex-end;           /* 副轴=纵向，元素底部*/
  23.     }
  25.     .item {
  26.         border: 1px solid green;
  27.         padding: 5px 50px;
  28.         height: 50px;
  29.         width: 40px;
  30.     }
  31. </style>

换行

  • flex-wrap: nowrap; 元素超过容器，不换行
  • flex-wrap: wrap; 元素超过容器，换行

示例1：不换行

13.vue - 图28

  1. <div class="menu">
  2.     <div class="item">11</div>
  3.     <div class="item">112</div>
  4.     <div class="item">112</div>
  5.     <div class="item">112</div>
  6.     <div class="item">112</div>
  7. </div>
  8. <style>
  9.     .menu {
  10.         width: 500px;
  11.         height: 200px;
  12.         border: 1px solid red;
  13.         display: flex;
  15.         flex-direction: row;
  16.         justify-content: space-evenly;   /* 主轴=横向，元素间距一样 */
  17.         align-items: flex-start;         /* 副轴=纵向，元素顶部*/
  19.         flex-wrap: nowrap;
  21.     }
  23.     .item {
  24.         border: 1px solid green;
  25.         padding: 5px 50px;
  26.         height: 50px;
  27.         width: 40px;
  28.     }
  29. </style>

示例2：换行

13.vue - 图29

  1. <div class="menu">
  2.     <div class="item">111</div>
  3.     <div class="item">112</div>
  4.     <div class="item">112</div>
  5.     <div class="item">112</div>
  6.     <div class="item">112</div>
  8. </div>
  10. <style>
  11.     body{
  12.         margin: 0;
  13.     }
  14.     .menu {
  15.         width: 500px;
  16.         height: 200px;
  17.         border: 1px solid red;
  18.         display: flex;
  20.         flex-direction: row;
  21.         justify-content: space-evenly;   /* 主轴=横向，元素间距一样 */
  22.         align-items: flex-start;         /* 副轴=纵向，元素顶部*/
  24.         flex-wrap: wrap;
  26.     }
  28.     .item {
  29.         border: 1px solid green;
  30.         padding: 5px 50px;
  31.         height: 50px;
  32.         width: 40px;
  33.     }
  34. </style>

多行对齐方式

align-content用于控制多行元素的对齐方式，如果元素只有一行则不会起作用；默认stretch，即在元素没设置高度，或高度为auto情况下让元素填满整个容器。

  1. flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);

元素

顺序

order，默认0，用于决定项目排列顺序，数值越小，项目排列越靠前。

13.vue - 图30

  1. <div class="father">
  2.     <div class="son" style="order: 2">11</div>
  3.     <div class="son" style="order: 0">22</div>
  4.     <div class="son" style="order: 1">33</div>
  5. </div>
  7. <style scoped>
  8.     .father {
  9.         border: 1px solid red;
  10.         width: 500px;
  11.         height: 300px;
  12.         display: flex;
  13.         flex-direction: row;
  14.         justify-content: flex-start;
  15.     }
  17.     .father .son {
  18.         border: 1px solid saddlebrown;
  19.         width: 20px;
  20.         height: 18px;
  21.     }
  22. </style>

剩余空间

flex-grow，默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；

13.vue - 图31

  1. <div class="father">
  2.     <div class="son">11</div>
  3.     <div class="son" style="flex-grow: 1">22</div>
  4.     <div class="son" style="flex-grow: 1">33</div>
  5. </div>

案例：flex页面布局

13.vue - 图32

  1. <template>
  2.     <div>
  3.         <div class="row1">
  4.             <div class="company"></div>
  5.             <div class="pic"></div>
  6.             <div class="pic"></div>
  7.             <div class="pic"></div>
  8.         </div>
  9.         <div class="row2">
  10.             <div class="title">
  11.                 <div>手机</div>
  12.                 <div>查看更多</div>
  13.             </div>
  14.             <div class="pic-list">
  15.                 <div class="big"></div>
  16.                 <div class="right-list">
  17.                     <div class="group">
  18.                         <div class="phone"></div>
  19.                         <div class="phone"></div>
  20.                         <div class="phone"></div>
  21.                         <div class="phone"></div>
  22.                     </div>
  23.                     <div class="group">
  24.                         <div class="phone"></div>
  25.                         <div class="phone"></div>
  26.                         <div class="phone"></div>
  27.                         <div class="phone"></div>
  28.                     </div>
  30.                 </div>
  31.             </div>
  32.         </div>
  34.         <div class="course-list">
  35.             <div class="item"></div>
  36.             <div class="item"></div>
  37.             <div class="item"></div>
  38.             <div class="item"></div>
  39.             <div class="item"></div>
  41.         </div>
  42.     </div>
  43. </template>
  45. <script>
  46.     export default {
  47.         name: "Mi"
  48.     }
  49. </script>
  51. <style scoped>
  52.     .row1 {
  53.         display: flex;
  54.         flex-direction: row;
  55.         justify-content: space-between;
  56.     }
  58.     .row1 .company {
  59.         width: 210px;
  60.         height: 180px;
  61.         background-color: saddlebrown;
  62.     }
  64.     .row1 .pic {
  65.         width: 266px;
  66.         height: 180px;
  67.         background-color: cadetblue;
  68.     }
  70.     .row2 .title {
  71.         display: flex;
  72.         flex-direction: row;
  73.         justify-content: space-between;
  74.     }
  76.     .row2 .pic-list {
  77.         display: flex;
  78.         flex-direction: row;
  79.         justify-content: space-between;
  80.     }
  82.     .row2 .pic-list .big {
  83.         background-color: aquamarine;
  84.         height: 610px;
  85.         width: 210px;
  86.         margin-right: 20px;
  87.     }
  89.     .row2 .pic-list .right-list {
  90.         /*background-color: antiquewhite;*/
  91.         flex-grow: 1;
  92.     }
  94.     .row2 .pic-list .right-list .group {
  97.         display: flex;
  98.         flex-direction: row;
  99.         justify-content: space-between;
  100.         flex-wrap: wrap;
  101.     }
  103.     .row2 .pic-list .right-list .phone {
  104.         margin-bottom: 10px;
  105.         border: 1px solid red;
  106.         width: 200px;
  107.         height: 300px;
  108.     }
  110.     .course-list {
  111.         display: flex;
  112.         justify-content: space-between;
  113.         flex-wrap: wrap;
  114.     }
  116.     .course-list .item {
  117.         width: 24%;
  118.         height: 100px;
  119.         background-color: skyblue;
  120.         margin-top: 15px;
  121.     }
  123.     // 如果最后一个元素，是第3个，右边距=一个位置 + 所有空白位置/3（有三个空白位置）
  124.     .course-list .item:last-child:nth-child(4n - 1) {
  125.         margin-right: calc(24% + 4% / 3);
  126.     }
  128.     // 如果最后一个元素，是第2个，右边距=两个位置 + 所有空白位置/3*2（有三个空白位置）
  129.     .course-list .item:last-child:nth-child(4n - 2) {
  130.         margin-right: calc(48% + 8% / 3);
  131.     }
  132. </style>

至此，结合以上的知识点，我们就可以来开发一个项目，但很多的页面按钮、标签、提示框等都需要自己手动，太费劲。

所以，接下来就要给大家的来聊一个UI框架 - ElementUI，他的内部提供了很多方便的样式和组件，可以加速我们开发。

ElementUI

Element，是有 饿了吗 团队开发一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库（也支持vue3.x）。

在他的基础上来开发，可以大大提升开发进度。

13.vue - 图33

想要在项目中进行使用element-ui需要提前安装并引入。

引入

方式1：完整引入

  • 安装 
    1. cd 项目目录
    2. npm install element-ui
  • 引入 ```javascript import Vue from ‘vue’; import ElementUI from ‘element-ui’; import ‘element-ui/lib/theme-chalk/index.css’; import App from ‘./App.vue’;

Vue.use(ElementUI);

new Vue({ render: h => h(App), }).$mount(‘#app’)

  3. -  在组件中使用 
  4. ```html
  5. <el-button type="success">哈哈哈</el-button>

方式2：局部引入

  • 安装 
    1. cd 项目目录
    2. npm install element-ui
  • 引入 ```javascript import Vue from ‘vue’; import { Button, Select } from ‘element-ui’; import ‘element-ui/lib/theme-chalk/index.css’; import App from ‘./App.vue’;

Vue.use(Button) Vue.use(Select)

new Vue({ render: h => h(App), }).$mount(‘#app’)

  3. -  在组件中使用 
  4. ```html
  5. <el-button type="success">哈哈哈</el-button>


完整组件名称：https://element.eleme.cn/#/zh-CN/component/quickstart

组件的使用

参见官方文档，在后续的项目开发中来应用并使用。