From scratch to build vue real items (f)

Ten, the left hand pull-down line and a two navigation vue

1. First attach the final image:

   

2. vue Code:

   <div
                         class="dropdown-menu-explore"
                         v-on:mouseover="addDropdownContent(this)"
                         v-on:mouseout="removeDropdownContent(this)"
                       >
                         <span class="dropdown-menu">探索</span>
                         <span class="dropdown-menu-arrow"></span>
                         <div class="dropdown-content" v-bind:style="{display:activeDisplay}">
                           <div class="dropdown-menu-content" id="dropdown-menu-content">
                             <ul>
                               <li
                                 v-for="(list,index) in lists"
                                 v-bind:key="index"
                                 v-on:mouseover="addListContent(index)"
                                 v-on:mouseout="removeListContent(this)"
                               >
                                 <router-link to>{{list.message}}</router-link>
                                 <ul class="dropdown-menu-content-list" v-show="index===isShow">
                                   <li v-for="(item,index) in list.childs" v-bind:key="index">
                                     <router-link to>{{item.subTitle}}</router-link>
                                   </li>
                                 </ul>
                               </li>
                             </ul>
                           </div>
                         </div>
                       </div>

3. event:

   methods: {
       handleSelect: function() {},
       //鼠标覆盖显示下拉内容
       addDropdownContent: function() {
         this.activeDisplay = "block";
         return this.activeDisplay;
       },
       //鼠标移出隐藏内容
       removeDropdownContent: function() {
         this.activeDisplay = "none";
         return this.activeDisplay;
       },
       addListContent: function(index) {
         this.isShow = index;
       },
       removeListContent: function() {
         this.isShow = !this.isShow;
       }
     },
     mounted: function() {
       this.isShow = -1;
     }

4. data

   activeDisplay: "none",
         isShow: 0,
         lists: [
           {
             id: 1,
             message: "理学",
             childs: [{ subTitle: "1", subMessage: "这是子菜单信息" }]
           },
           {
             id: 2,
             message: "工学",
             childs: [{ subTitle: "2", subMessage: "这是子菜单信息" }]
           },
           { id: 3, message: "计算机" },
           { id: 4, message: "管理" },
           { id: 5, message: "经济学" },
           { id: 6, message: "外语" },
           { id: 7, message: "四六级" },
           { id: 8, message: "期末冲刺" },
           { id: 9, message: "考研" },
           { id: 10, message: "更多" }
         ]

XI, based on the introduction of the editor vue support markdown syntax --- mavon-editor

1. Based mavon-editor of silky and simplicity, I chose to introduce it as part of my project, I have enclosed the official website address: https://www.zhystar.com/

2. Next, a step by step introduction to my project:

   1. Firstly npm install:

      npm install mavon-editor --save

   2. Global registration:

XII error summary (b)

1. When I introduced the mavon-editor component, there has been a baffling error:

   

   After investigation, because I would Component Component name value and import of the same name introduced, and only need to make changes to the value of the name:

   

​

XIII, and the back end of the first test data exchange

1. After the basic completion of the login page to start the test before and after the end of the data exchange, the project uses axios, with the back-end PHP, after the front end of a request, the data returned by the backend, once an error, because there are parsing json data, parse the json after the data is successfully resolved the problem.

2. When I was testing, I have such a demand, namely through the element of el-input when the Enter key is pressed, can trigger an event, but have no effect, because el-input component is packaged in its outer layer there is a layer div wrapped, so you must use .native modifier, to monitor the root element of the original event, that is, make the following modifications:

   

   Read: