current position:Home>Vue

Vue

2022-04-29 13:34:31Dada front end

Vue brief introduction

jquery Business logic and UI Changes are mixed together Vue Data driven , It's data

Vue、React、Angular Each has its own advantages Vue The easier

Vue official :

https://cn.Vuejs.org/index.html

Development environment installation

npm install -g Vue-cli

Vue init webpack helloworld

function

cd helloworld
npm run dev   Development 
npm run build  compile 
npm install vue-router

Activate the navigation setting method

linkActiveClass:'active'

Data interaction -axios

npm install axios

Sending a request can be done at creted() Inside the hook , It can also be in mounted()

vue.js in data, prop, computed, method,watch Introduce

data Define and present data computed Complex operational transformation of data

├── api
│   └── api.js              // Interface 
├── app.wpy                 // Entrance file 
├── components                  // Components 
│   ├── address_add.wpy         // Add address component 
│   ├── address_edit.wpy        // Edit address component 
│   ├── address_list.wpy        // Address list component 
│   ├── bomb_screen.wpy         // Homepage pop-up screen assembly 
│   ├── collection_list.wpy     // Favorite list component 
│   ├── comment_list.wpy        // Comment list component 
│   ├── common              // Common components 
│   │   ├── bottomLoadMore.wpy      // Load more components at the bottom 
│   │   ├── placeholder.wpy         // The empty list shows the components 
│   │   ├── timer.wpy               // Countdown assembly 
│   │   ├── wepy-area-picker.wpy    // Provincial and urban components 
│   │   ├── wepy-sign-time.wpy      // Check in component 
│   │   └── wepy-swipe-delete.wpy   // Slide left to delete components 
│   ├── discover.wpy        // Discovery list 
│   ├── filterSlider.wpy    // Filter the right column components 
│   ├── filter_bar.wpy      // Sort component 
│   ├── order_item.wpy      // Order list components 
│   ├── points_detail.wpy   // List components 
│   ├── points_rule.wpy     // List components 
│   ├── rate.wpy            // Scoring component 
│   ├── search.wpy          // Search components 
│   ├── shop_cart.wpy       // Shopping cart components 
│   ├── shop_grid_list.wpy  // Matrix list 
│   ├── shop_item_list.wpy  // Bar list 
│   └── tab.wpy             // Tab components 
├── images                  // Picture folder 
├── pages                   // page 
│   ├── address.wpy         // Address 
│   ├── classify.wpy        // classification 
│   ├── collection.wpy      // Collection 
│   ├── comfire_order.wpy   // Confirmation of order 
│   ├── comment.wpy         // Comment list 
│   ├── comment_add.wpy     // Add comments 
│   ├── exchange_goods.wpy  // Exchange goods 
│   ├── filter.wpy          // Screening 
│   ├── goods_detail.wpy    // Goods details 
│   ├── home.wpy            // home page 
│   ├── home_detail.wpy     // Home page details 
│   ├── info.wpy            // my 
│   ├── logistics.wpy       // logistics 
│   ├── messages.wpy        // My news 
│   ├── order.wpy           // Order list 
│   ├── order_detail.wpy    // Order details 
│   ├── pay_success.wpy     // Payment result 
│   ├── points.wpy          // integral 
│   ├── points_more.wpy     // More points 
│   ├── points_rule.wpy     // The rule of points 
│   ├── register.wpy        // register 
│   ├── reorder.wpy         //--
│   ├── replenishment_goods.wpy // replenishment 
│   ├── search.wpy          // Search for 
│   ├── setting.wpy         // Set up 
│   ├── shop_cart.wpy       // The shopping cart 
│   ├── sign_in.wpy         // Sign in 
│   ├── test.wpy            //---
│   └── wholesale.wpy       // Spot wholesale 
├── plugins                 // plug-in unit 
│   └── wxParse             // Rich text 
│       ├── html2json.js
│       ├── htmlparser.js
│       ├── showdown.js
│       ├── wxDiscode.js
│       ├── wxParse.js
│       ├── wxParse.wxml
│       └── wxParse.wxss    
├── styles                  // style 
│   ├── base.less
│   ├── icon.less           //  Icon file 
│   └── style.less
└── utils                   // Tool class 
    ├── constant.js             // Constant 
    ├── md5.js                  //md5
    ├── regions.js              // Provincial and urban data 
    ├── tip.js                  // Prompt the bullet frame assembly 
    ├── util.js                 // Tools 
    └── wxRequest.js            //ajax request 

copyright notice
author[Dada front end],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291041433191.html

Random recommended