zoukankan      html  css  js  c++  java
  • Vue

    Vue简介

    jquery业务逻辑和UI更改混在一起
    Vue数据驱动,玩的就是数据

    Vue、React、Angular各有各的好处
    Vue上手容易

    Vue官方:

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

    开发环境安装

    npm install -g Vue-cli
    
    Vue init webpack helloworld
    

    image.png

    image.png

    运行

    cd helloworld
    npm run dev  开发
    npm run build 编译
    
    npm install vue-router
    

    image.png

    image.png

    激活导航设置方法

    linkActiveClass:'active'
    

    数据交互-axios

    npm install axios
    

    image.png

    image.png

    发送请求可以在creted()钩子内,也可以在mounted()

    image.png

    vue.js 中 data, prop, computed, method,watch 介绍

    data 定义以及展示数据
    computed 对数据进行复杂的操作转换

    image.png

    image.png

    ├── api
    │   └── api.js              //接口
    ├── app.wpy                 //入口文件
    ├── components                  //组件
    │   ├── address_add.wpy         //新增地址组件
    │   ├── address_edit.wpy        //编辑地址组件
    │   ├── address_list.wpy        //地址列表组件
    │   ├── bomb_screen.wpy         //首页弹屏组件
    │   ├── collection_list.wpy     //收藏列表组件
    │   ├── comment_list.wpy        //评论列表组件
    │   ├── common              //公共组件
    │   │   ├── bottomLoadMore.wpy      //底部加载更多组件
    │   │   ├── placeholder.wpy         //空列表显示组件
    │   │   ├── timer.wpy               //倒计时组件
    │   │   ├── wepy-area-picker.wpy    //省市区组件
    │   │   ├── wepy-sign-time.wpy      //签到组件
    │   │   └── wepy-swipe-delete.wpy   //左滑删除组件
    │   ├── discover.wpy        //发现列表
    │   ├── filterSlider.wpy    //筛选右侧栏组件
    │   ├── filter_bar.wpy      //分类排序组件
    │   ├── order_item.wpy      //订单列表组件
    │   ├── points_detail.wpy   //列表组件
    │   ├── points_rule.wpy     //列表组件
    │   ├── rate.wpy            //评分组件
    │   ├── search.wpy          //搜索组件
    │   ├── shop_cart.wpy       //购物车组件
    │   ├── shop_grid_list.wpy  //矩阵列表
    │   ├── shop_item_list.wpy  //条形列表
    │   └── tab.wpy             //选项卡组件
    ├── images                  //图片文件夹
    ├── pages                   //页面
    │   ├── address.wpy         //地址
    │   ├── classify.wpy        //分类
    │   ├── collection.wpy      //收藏
    │   ├── comfire_order.wpy   //确认订单
    │   ├── comment.wpy         //评论列表
    │   ├── comment_add.wpy     //添加评论
    │   ├── exchange_goods.wpy  //换货
    │   ├── filter.wpy          //筛选
    │   ├── goods_detail.wpy    //商品详情
    │   ├── home.wpy            //首页
    │   ├── home_detail.wpy     //首页详情
    │   ├── info.wpy            //我的
    │   ├── logistics.wpy       //物流
    │   ├── messages.wpy        //我的消息
    │   ├── order.wpy           //订单列表
    │   ├── order_detail.wpy    //订单详情
    │   ├── pay_success.wpy     //支付结果
    │   ├── points.wpy          //积分
    │   ├── points_more.wpy     //更多积分
    │   ├── points_rule.wpy     //积分规则
    │   ├── register.wpy        //注册
    │   ├── reorder.wpy         //--
    │   ├── replenishment_goods.wpy //补货
    │   ├── search.wpy          //搜索
    │   ├── setting.wpy         //设置
    │   ├── shop_cart.wpy       //购物车
    │   ├── sign_in.wpy         //签到
    │   ├── test.wpy            //---
    │   └── wholesale.wpy       //现货批发
    ├── plugins                 //插件
    │   └── wxParse             //富文本
    │       ├── html2json.js
    │       ├── htmlparser.js
    │       ├── showdown.js
    │       ├── wxDiscode.js
    │       ├── wxParse.js
    │       ├── wxParse.wxml
    │       └── wxParse.wxss    
    ├── styles                  //样式
    │   ├── base.less
    │   ├── icon.less           // 图标文件
    │   └── style.less
    └── utils                   //工具类
        ├── constant.js             //常量
        ├── md5.js                  //md5
        ├── regions.js              //省市区数据
        ├── tip.js                  //提示弹框组件
        ├── util.js                 //工具
        └── wxRequest.js            //ajax请求
    

    请点赞!因为你的鼓励是我写作的最大动力!

    官方微信公众号

    吹逼交流群:711613774

    吹逼交流群

  • 相关阅读:
    autocomplete自动完成搜索提示仿google提示效果
    实现子元素相对于父元素左右居中
    javascript 事件知识集锦
    让 IE9 以下的浏览器支持 Media Queries
    「2013124」Cadence ic5141 installation on CentOS 5.5 x86_64 (limited to personal use)
    「2013420」SciPy, Numerical Python, matplotlib, Enthought Canopy Express
    「2013324」ClipSync, Youdao Note, GNote
    「2013124」XDMCP Configuration for Remote Access to Linux Desktop
    「2013115」Pomodoro, Convert Multiple CD ISO to One DVD ISO HowTo.
    「2013123」CentOS 5.5 x86_64 Installation and Configuration (for Univ. Labs)
  • 原文地址:https://www.cnblogs.com/dashucoding/p/11932382.html
Copyright © 2011-2022 走看看