精华内容
下载资源
问答
  • 本文通过实例代码给大家介绍了vue2.0实现前端星星评分功能组件,非常不错,具有参考借鉴价值,需要的朋友参考下吧
  • Vue提供了强大的前端开发架构,很多时候我们需要判断数据对象是否为空,使用typeof判断是个不错选择,具体代码见图。 补充知识:vue打包后 history模式 跟子目录 静态文件路径 分析 history 根目录 路由mode变为...
  •  前后端分离的开发模式,前端需要向后端请求数据(ajax请求),但实际开发过程中,前后端会约定一份接口文档,但前后端开发进度并不一致,当后端没有完善接口功能时,前端需要在本地模拟数据返回,此时需要使用到...
  • antd vue 文件上传实例

    千次阅读 2020-03-16 17:47:06
    antd vue 文件上传实例 ...这里仅仅是展示前端antd vue代码 限制文件类型配置查看 这里 <template> <a-upload :headers="headers" :action="url" :fileList="fileList" @change="handleChang...

    antd vue 文件上传实例

    说明

    该实例是后端进行文件上传至minio服务器
    这里仅仅是展示前端antd vue得代码

    限制文件类型配置查看
    这里

    <template>
      <a-upload
        :headers="headers"
        :action="url"
        :fileList="fileList"
        @change="handleChange"
        :beforeUpload="beforeUpload"
      >
        <a-button :disabled="isShow"> <a-icon type="upload" /> Upload </a-button>
      </a-upload>
    </template>
    <script>
    import { mapGetters } from 'vuex'
    export default {
      name: 'MinioUplode',
      // 此处接收仅仅针对有有父组件得情况,如果直接使用a-upload则不需要
      props: {
        url: {
          type: String,
          default: 'api/storage/upload'
        },
        fileListTemp: {
          type: Array,
          default: () => []
        },
        isShow: {
          type: Boolean,
          default: false
        }
      },
      data () {
        return {
          fileList: this.fileListTemp,
          // 请求头里要携带token用来识别身份
          headers: {
            'Authorization': 'Bearer' + this.token()
          }
        }
      },
      methods: {
        ...mapGetters(['token']),
        // 此方法主要用来处理回显列表,以及去除没有实际上传得文件
        // 图片一旦长传在file中会有status字段,如果没有则没有实际上传
        // status有四种状态  'uploading' 'done' 'error' 'removed'
        handleChange (info) {
          let fileList = [...info.fileList]
          // 这里用来处理,页面中展示已经上传得个数
          // .slice(),括号里是负数是从尾部开始截取 限制最长15
          fileList = fileList.slice(-15)
          // 此处去除fileList中status为undefined得对象
          // 注意此处不是null!!!!
          fileList = fileList.filter(item => item.status !== undefined)
          // 从后端得回调 response 中获取url,并复制给fileList对象得url
          // 作用,有了url 前端才可以下载查看
          fileList = fileList.map(file => {
            if (file.response) {
              // 获取回调url
              file.url = file.response.data.url
            }
            return file
          })
          this.fileList = fileList
        },
        beforeUpload (file) {
          // 此处针对修改操作时,如果之前没有数据this.fileList时null 进行...this.fileList会报错
          // 错误类型: Invalid attempt to spread non-iterable instance
          if (this.fileList === null) {
            this.fileList = []
          }
          const list = [...this.fileList]
          // 限制最多只能穿15个文件
          const listLength = list.length > 14
          console.log(list.length, 'list.length')
          if (listLength) {
            this.$message.warning('最多上传15个文件')
          }
          // 限制单个文件的大小不大于100MB
          const size = file.size / 1024 / 1024 > 100
          if (size) {
            this.$message.warning('上传文件不能大于100MB')
          }
          // 返回时注意,此处要把所有得标识flag全部返回并且使用&
          // 原因:有一个条件不满足,就不能进行文件上传
          return !size && !listLength
        }
      },
      // 此处监听仅仅针对有有父组件得情况,如果直接使用a-upload则不需要
      watch: {
        fileList (val) {
          this.fileList = val
          // 向父组件更新
          this.$emit('updateFileList', val)
        },
        fileListTemp (val) {
          this.fileList = val
        }
      }
    }
    </script>
    <style scoped>
    </style>
    
    展开全文
  • 1、后台Django代码 def storage(req): ''' 存储图片接口: 1、根据roomid查询出数据 ''' # 从数据库选出所需数据 roomid = req['roomid'] data_list = Memory.objects.filter(roomid=roomid).order_by('-...
    1、后台Django代码
    
    def storage(req):
        '''
        存储图片接口:
            1、根据roomid查询出数据
        '''
        # 从数据库选出所需数据
        roomid = req['roomid']
        data_list = Memory.objects.filter(roomid=roomid).order_by('-addtime')
        # 构造分页器
        page_robot = Paginator(data_list, 2)
        page_num = req.get('page')   根据page的值得到对应的数据
        try:
            data_list = page_robot.page(page_num)
        except InvalidPage:
            data_list = page_robot.page(1)
        except ValueError:
            data_list = page_robot.page(1)
        except EmptyPage:
            data_list = page_robot.page(page_robot.page_num)
        except PageNotAnInteger:
            data_list = page_robot.page(1)
        serializer = MemorySerializer(data_list, many=True).data
        context = {"status": "success", "data": serializer}
        return context
    2、前端组件Vue代码
    
    <template>
      <div>
        <b-container class="bv-example-row">
          <b-row>
            <b-col><b-table striped hover :items="items.data"></b-table></b-col>
          </b-row>
          <b-row>
            <b-col>
              1、每次点触发一下getGoodsList()函数,改变一下page码调接口
              <b-pagination size="md" :total-rows="100" v-model="currentPage" :per-
    page="10"  align="right"  @click.native="getGoodsList()"></b-pagination>
              <div>第: {{ currentPage }}页</div>
            </b-col>
          </b-row>
        </b-container>
    
        {{ items }}
    
      </div>
    </template>
    
    <script>
        import axios from 'axios'
    
        export default {
          name: "PageLayout",
          data(){
            return {
    
              roomid: '1',
              4、定义一个列表存储返回数据
              items: [],
              5、设置默认页码
              currentPage: 1,
            }
    
          },
          mounted(){
            3、初始化一下接口,这样呢在加载的时候就会自动调用接口
            this.getGoodsList();
          },
          methods: {
            2、写一个函数调接口getGoodsList
            getGoodsList: function() {
              axios.get("http://192.168.0.144:9999/skyapi/storage/", {
                params: { roomid:this.roomid, page:this.currentPage }
              }).then(res => {
                this.items = res.data
              })
                .catch((error) => {
                  this.msg = error
                })
            },
    
          }
        }
    </script>
    
    <style scoped>
    
    </style>
    
    
    

     

    展开全文
  • 实例如下所示: onBridgeReady: function () { const openId = localStorage.getItem('openId') payService.payment(this.$route.params.orderId, 1, openId).then(rt => { //1:支付类型,可不填 this.message =...
  • 2.建立第一个实例 代码 <html> <head> <meta charset="utf8"> <title>hello vue.js</title> <!-- <script src="resource/vue.js" type="text/javascript" type="utf8">...

    1.vue大的基础

    在这里插入图片描述

    1.vue的介绍
    在这里插入图片描述
    2.建立第一个实例
    在这里插入图片描述

    代码

    <html>
    
    <head>
        <meta charset="utf8">
        <title>hello vue.js</title>
        <!-- <script src="resource/vue.js" type="text/javascript" type="utf8"></script> -->
       
    </head>
    <body>
        <div id="app">
    {{message}}
        </div>
    
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
    
    var app = new Vue({
      el: '#app',  //# 是id
      data: {
        message: 'Hello Vue!'
      }
    })
    
        </script>
        </body>
        </html>
    
    1. el:挂载点的问题。
      在这里插入图片描述
      el的作用范围在标注的元素的内部。
      在这里插入图片描述
      {{message}}

    选择器可以使用id,class,div 等去绑定,一般用id选择器,因为定义id一帮唯一。
    在这里插入图片描述
    body不可以进行挂载

    在这里插入图片描述
    在这里插入图片描述

    data: 数据对象。
    在这里插入图片描述
    data:数据对象

    数组类型可以定义复杂类型的数据。使用{{}}使用即可。数组使用索引。
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

    2.vue指令

    在这里插入图片描述

    2.1 v-text指令
    {{}} 和v-text 都可以设置文本值。

    在这里插入图片描述

    在这里插入图片描述
    但是标签中{{}}设置的值不会被替换掉。v-text中的值会被替换掉
    部分替换。
    在这里插入图片描述
    在这里插入图片描述、总结

    在这里插入图片描述

    2.2 v-html

    对于普通文本没有差异,但是对于html的标签就有区别。如果需要解析文本内容则要分析它。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述

    2.3 v-on
    为元素绑定事件

    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    @ 是v-on的简写
    在这里插入图片描述
    改变原值。
    在这里插入图片描述

    在这里插入图片描述
    总结
    在这里插入图片描述
    2.4 computed的使用

    可以用方法实现计算的功能
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • vue双向绑定一般是用在向数据库写数据,或修改数据的时候,使用vue的数据双向绑定可以大大简化前端代码量,让页面看起来更加简洁,更容易维护。下面就用实际开发中的一个实例来讲解一下vue的双向绑定: 实例是新增...

    vue双向绑定一般是用在向数据库写数据,或修改数据的时候,使用vue的数据双向绑定可以大大简化前端代码量,让页面看起来更加简洁,更容易维护。下面就用实际开发中的一个实例来讲解一下vue的双向绑定:

    实例是新增一个保险方案,其中包含一个客户信息和多个被保险人信息,被保险人信息要实现动态的 增 、删、 改,这样看来使用vue的动态双向绑定是最合适不过的了。

    其中html代码如下:

    <div class="formwrapper" style="padding-top: 0">
                <p class="midtitle">方案信息</p>
                <div class="formbox nomarginbot">
                    <dl>
                        <dt>方案名称</dt>
                        <dd><input type="text" placeholder="方案名称" v-model="proname" id="ProgramName"></dd>
                    </dl>
                </div>
                <p class="midtitle">客户信息</p>
                <div class="formbox nomarginbot">
                    <dl>
                        <dt>客户称呼</dt>
                        <dd><input type="text" placeholder="请输入客户称呼" v-model="customername" id="Name"></dd>
                    </dl>
                    <dl>
                        <dt>出生日期</dt>
                        <dd><input type="date" placeholder="请选择出生日期" v-model="customerbirthday" id="Birthday"></dd>
                    </dl>
                    <dl>
                        <dt>性别</dt>
                        <dd>
                            <select name="Sex" id="Sex" v-model="customersex" class="{c999: customersex==-1}">
                                <option value="-1" disabled style="display: none;">请选择性别</option>
                                <option value="0">男</option>
                                <option value="1">女</option>
                            </select>
                        </dd>
                    </dl>
                </div>
                <p class="midtitle">被保险人信息</p>
                <div class="insuredinfo" v-for="(item,index) in insuredinfo">
                    <div class="formbox nomarginbot">
                        <dl v-if="item.relationship != 7">
                            <dt>是客户的</dt>
                            <dd>
                                <select name="relationship" id="relationship" value="-1" v-model="item.relationship" class="{c999: item.relationship==-1}">
                                    <option value="-1" disabled style="display: none;">请选择与客户关系</option>
                                    <option value="0">自己</option>
                                    <option value="1">丈夫</option>
                                    <option value="2">妻子</option>
                                    <option value="3">父亲</option>
                                    <option value="4">母亲</option>
                                    <option value="5">儿子</option>
                                    <option value="6">女儿</option>
                                    <option value="7">自定义称呼</option>
                                </select>
                            </dd>
                        </dl>
                        <dl v-if="item.relationship == 7">
                            <dt>被保险人称呼</dt>
                            <dd><input type="text" placeholder="请输入被保险人称呼" v-model="item.name" id="InsuredName"></dd>
                        </dl>
                        <dl v-if="item.relationship != -1 && item.relationship != 0">
                            <dt>出生日期</dt>
                            <dd><input type="date" placeholder="请选择出生日期" v-model="item.birthday" id="InsuredBirth"></dd>
                        </dl>
                        <dl v-if="item.relationship == 7">
                            <dt>性别</dt>
                            <dd>
                                <select name="InsuredSex" id="InsuredSex" v-model="item.sex" class="{c999: item.sex==-1}">
                                    <option value="-1" disabled style="display: none;">请选择性别</option>
                                    <option value="0">男</option>
                                    <option value="1">女</option>
                                </select>
                            </dd>
                        </dl>
                    </div>
                    <p v-if="index != 0" class="deleteinsbtn" v-on:click="deleteinsured(index)"><span>删除被保险人</span></p>
                </div>
                <div class="addinsured" v-on:click="addinsured">
                    <i class="iconfont icon-tianjiabeibaoxianren"></i>新增被保险人
                </div>
            </div>
            <div class="blockbtnwrap">
                <a href="javascript:;" onclick="addProgram()" class="btn btn-block btn-org">确定</a>
            </div>

    js代码如下:

    <script type="text/javascript">
    
            var fadata = new Vue({
                el: "#fainfo",
                data: {
                    proname: '',
                    customername: '',
                    customerbirthday: '',
                    customersex: '-1',
                    insuredinfo: [{
                        relationship: -1,
                        birthday: '',
                        name: '',
                        sex: -1,
                    }]
    
                },
                methods: {
                    deleteinsured: function (index) {
                        this.insuredinfo.splice(index, 1);
                        
                    },
                    addinsured: function () {
                        var obj = {
                            relationship: -1,
                            birthday: '',
                            name: '',
                            sex: -1
                        };
                        this.insuredinfo.push(obj);
    
                    }
                }
            })
    
            function addProgram() {
                var ProgramName = $('#ProgramName').val().trim();
                if (ProgramName == "") {
                    layer.msg("方案名称不能为空");
                    return;
                }
                var Name = $('#Name').val().trim();
                if (Name == "") {
                    layer.msg("客户称呼不能为空");
                    return;
                }
                var Birthday = $('#Birthday').val().trim();
                if (Birthday == "") {
                    layer.msg("请选择出生日期");
                    return;
                }
                var Sex = $('#Sex').val();
                if (Sex == null || Sex == "-1") {
                    layer.msg("请选择性别");
                    return;
                }
    
                $('.insuredinfo').each(function (i) {
                    var that = this;
    
                    var relationship = $(that).find('#relationship').val();
                    var InsuredName = $(that).find('#InsuredName').val();
                    var InsuredBirth = $(that).find('#InsuredBirth').val();
                    var InsuredSex = $(that).find('#InsuredSex').val();
                    if (relationship === null || relationship == "-1") {
                        layer.msg("请选择客户关系");
                        return;
                    } else if (relationship == "7" || relationship == undefined) {
                        if (InsuredName == "") {
                            layer.msg("请输入被保险人称呼");
                            return;
                        }
                        if (InsuredBirth == "") {
                            layer.msg("请选择被保人出生日期");
                            return;
                        }
                        if (InsuredSex == null || InsuredSex == "-1") {
                            layer.msg("请选择被保人性别");
                            return;
                        }
                    } else if (relationship != "0") {
                        if (InsuredBirth == "") {
                            layer.msg("请选择被保人出生日期");
                            return;
                        }
                    }
    
                })
    
                var insuredinfo = JSON.stringify(fadata.insuredinfo)
                $.ajax({
                    url: '/HKBProgram/AddProgramList',
                    beforeSend: function () {
                        var index = layer.load(1, {
                            shade: [0.1, '#000'] //0.1透明度的白色背景
                        });
                    },
                    data: {
                        ProgramName: ProgramName,
                        Name: Name,
                        Birthday: Birthday,
                        Sex: parseInt(Sex),
                        InsuredInfo: fadata.insuredinfo,
                    },
                    cache: false,
                    type: 'Post',
                    dataType: 'json',
                    success: function (response) {
                        layer.closeAll();
                        if (response == "1") {
                            layer.msg('添加成功!');
                        } else {
                            layer.msg('添加失败!');
                        }
                    },
                    error: function () {
                        layer.closeAll();
                        layer.msg('系统异常');
                    }
                });
    
            }
    
    
        </script>

    代码很简单,vue初始化,默认数据data,新增被保险人的时候只需要向insuredinfo数组新增一个对象:

    var obj = {
                            relationship: -1,
                            birthday: '',
                            name: '',
                            sex: -1
                        };
                        this.insuredinfo.push(obj);

    删除一个被保险人信息只需要删除insuredinfo数组的当前的对象:

    deleteinsured: function (index) {
                        this.insuredinfo.splice(index, 1);                
                    },

    html代码会自动更新。

    当信息输入完成点击确认存入数据库的时候,只需要获取vue里面的data数据就可以了,因为是双向绑定,data里面的数据就是input输入框对应的值,这样一来就免去单独获取每个input输入框的值。

     

    我们也可以在浏览器下查看是否是双向绑定:

    可以看到,当只有一个被保险人信息的时候insuredinfo数组也只对应当前一个对象

    当新增一个被保险人信息以后,insuredinfo数组也对应新增了一个对象

    同样,删除一个被保险人信息,insuredinfo数组也会同事删除当前对象

    展开全文
  • 从网上下载了一个免费的vue.js前端模板,准备和Django整合出一个项目出来,然后发现前端代码都是.vue文件,已经整合过.html,很容易,感觉这个.vue的前端稍微复杂一些 本文主要参考博客及网页,在此表示感谢:...
  • 最近爱上了用vue.js做前端,昨天用vue上传图片时遇到了问题,最后半天时间终于摸索出来,我将相关部分的代码贴出来。 前端部分 背景图 <input type=file class=form-control @change=onFileChange> ...
  • 官方文档: Bootstrap 中文文档 · Bootstrap 是世界上最流行的、移动设备优先的、响应式前端开发框架。 官方文档:Vue.js 文章目录功能需求结果展示源代码文件目录index.html 功能需求 实现商品页面 (基于...
  • vue常用代码

    2018-05-06 11:17:57
    Xftp软件的前端代码路径/usr/local/tomcat/webapps/lcwy_home/css/usr/local/tomcat/webapps 欧洲花园wap页面服务器地址vue动态修改标题在main.js中实例之前加这段代码Vue.directive('title', { inserted: function...
  • 单页应用及支持它们的前端框架提供了一个很好的机会,可以为程序设计提供令人惊叹的交互层,本文,我们将了解 vue.js 及如何集成 GASP 动画库来添加令人惊叹的动画效果。 Vue.js 是一个功能强大且易掌握的 JS 框架...
  • 前端部分(对axios设置Authorization) import axios from 'axios' import store from '../store' import router from '../router' //设置全局axios默认值 axios.defaults.timeout = 6000; //6000的超时验证 axios....
  • vue构造、vue组件和vue实例这三个是不同的概念,它们的关系有点类似于Java的继承概念:关系:vue构造->vue组件->vue实例也就是说不同的vue组件可以共用同一个vue构造,不同的vue实例可以共用同一个vue组件。在...
  • vue常用代码2

    2018-12-07 15:28:32
    Xftp软件的前端代码路径 /usr/local/tomcat/webapps/lcwy_home/css /usr/local/tomcat/webapps 欧洲花园wap页面服务器地址 vue动态修改标题 在main.js中实例之前加这段代码 Vue.directive('title', {  inserted: ...
  • 实例搜索应用 实现效果: 实现代码与注释: <!DOCTYPE html> 实例搜索 ...
  • 前端大屏实例汇总

    2021-02-01 13:44:08
    前端大屏实例汇总,网上找的资料整理如下: - 工程化,基于React 和Vue https://gitee.com/MTrun/big-screen-vue-datav - 提供源码的大屏实例(30个) 下载地址进入官网:https://www.narutogis.com/ (下载...
  • 闲下来记录下iview+vue+plupload前端上传图片的实例(话不多说直接看代码) 这是一个子组件部分 <template> <div class="uploader"> <div class="demo-upload-list" v-for="(item,index) in pic_...
  • 目录 数据驱动 new Vue 发生了什么 ...它相比我们传统的前端开发,如使用 jQuery 等前端库直接修改 DOM,大大简化了代码量。特别是当交互复杂的时候,只关心数据的修改会让代码的逻辑变的非常清晰,因为 DOM ...
  • 废话少说,代码如下所述:/p>显示123/p>补充:vuejs {{}},v-text 和 v-html的区别{{message}} let app = new Vue({el: "#app",data: {message: "通过双括号绑定",html: "html标签在渲染的时候被解析",text: ...
  • 图片轮播是前端项目必有项,当前有很多效果很酷炫的轮播插件,例如Swiper。 但是当项目中的图片轮播只需要一个很简单的轮播样式,比如这样的 我们引用这样一个110k的大插件,就大材小用了。再安利一下,swiper2.x...
  • 本文通过实例代码给大家介绍了基于vue2.0实现仿百度前端分页效果,在文中给大家记录了遇到的问题及解决方法,需要的朋友可以参考下
  • 16年底,公司项目番茄表单的前端部分,开始了从传统的jquery到vue 2.0的彻底重构。但是上传部分,无论是之前的传统版本,还是Vue新版本,都是在使用着FileAPI这款优秀的开源库,只是进行了简单的directive化。为什么...
  • 最近在学习前端制作了一个购物车小球的动画效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
  • mui+vue开发的商城APP实例前端开发实例代码vue.min.js,mui.js

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 609
精华内容 243
热门标签
关键字:

vue前端代码实例

vue 订阅