精华内容
下载资源
问答
  • 主要介绍了Javascript vue.js表格分页,ajax异步加载数据的相关资料,需要的朋友可以参考下
  • JavaScript vue 显示网站运行时长 效果图 每一秒都会即时刷新一次,下面是代码 放在vue的mounted中 (如果是js的话放在script里就可以了) function secondToDate(second) { if (!second) { return 0; } var time...

    JavaScript vue 显示网站运行时长

    效果图

    在这里插入图片描述
    每一秒都会即时刷新一次,下面是代码
    放在vue的mounted中
    (如果是js的话放在script里就可以了)

    function secondToDate(second) {
                    if (!second) {
                        return 0;
                    }
                    var time = new Array(0, 0, 0, 0, 0);
                    if (second >= 365 * 24 * 3600) {
                        time[0] = parseInt(second / (365 * 24 * 3600));
                        second %= 365 * 24 * 3600;
                    }
                    if (second >= 24 * 3600) {
                        time[1] = parseInt(second / (24 * 3600));
                        second %= 24 * 3600;
                    }
                    if (second >= 3600) {
                        time[2] = parseInt(second / 3600);
                        second %= 3600;
                    }
                    if (second >= 60) {
                        time[3] = parseInt(second / 60);
                        second %= 60;
                    }
                    if (second > 0) {
                        time[4] = second;
                    }
                    return time;
                }
                function setTime() {
                    //mouth要少一个月不然会出问题
                    var create_time = Math.round(new Date(Date.UTC(2020, 10, 18, 0, 0, 0)).getTime() / 1000);
                    var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
                    var currentTime = secondToDate((  timestamp-create_time));
                    var currentTimeHtml = currentTime[0] + '年' + currentTime[1] + '天'
                        + currentTime[2] + '时' + currentTime[3] + '分' + currentTime[4]
                        + '秒';
    		if(document.getElementById("htmer_time")!=null)
                    document.getElementById("htmer_time").innerHTML = "if小站已经苟活"+currentTimeHtml;
                }
                //即时刷新
                setInterval(setTime, 1000);
    

    在html中调用

    <p id="htmer_time" style="color: #fd7286;font-size: large;font-weight: bolder;margin-left: -18px"></p>
    
    展开全文
  • array.map((item,index) =>{ 业务逻辑............ })

    array.map((item,index) =>{

    业务逻辑............

    })

     

    展开全文
  • npm install vue-resource 2.启动文件main.js,引入文件 import VueResource from 'vue-resource' Vue.use(VueResource) 3.request import header from './components/Header/header.vue' export default {
    1.安装资源包
    npm install vue-resource


    2.启动文件main.js,引入文件

    import VueResource from 'vue-resource'
    Vue.use(VueResource)

    3.request
    <script>
      import header from './components/Header/header.vue'
      export default {
        data () {
          return {
            seller: {}
          }
        },
        created () {
          // GET /someUrl
          this.$http.get('/api/seller').then(response => {
            // get body data
            response = response.body
            if (response.errno === 0) {
              this.seller = response.data
              console.log(this.seller.avatar)
            }
          }, response => {
            // error callback
          })
        },
        components: {
          'v-header': header
        }}
    </script>

    4.v-bind(:) 通过pros传递数据
     <v-header :seller="seller"></v-header>

    5.自定义组件v-header接受参数
    <template>
        <div>
          <img :src="seller.avatar" alt="" width="60" height="60">
          {{seller.avatar}}
        </div>
    </template>
    
    <script type="text/ecmascript-6">
      export default{
        props: {
          seller: {
            type: Object
          }
        }
      }
    </script>


    展开全文
  • vue中在页面渲染完之后获取dom元素 项目新需求 数据版本变更比对,将两组数据的属性值进行对比,不同的地方加以颜色提示,使用compare.js 插件,调用CompareTxt方法,传入需对比的两个dom,CompareTxt对其下的...

    vue中在页面渲染完之后获取dom元素

    项目新需求 数据版本变更比对,将两组数据的属性值进行对比,不同的地方加以颜色提示,使用compare.js 插件,调用CompareTxt方法,传入需对比的两个dom,CompareTxt对其下的innerHtml进行对比。
    项目使用vue.js,html页面:

      <div id="matterCode1" ref="matterCode1">
                {{form1.matterCode}}
      </div>
      <div id="matterCode2" ref="matterCode2">
                {{form1.matterName}}
      </div>
    

    method中加入方法 如下:

    compare(){
    //方式一 vue ref=matterCode 获取dom
     let matterCode1 = this.$refs.matterCode1;
     let matterCode2 = this.$refs.matterCode2;
     //方式二 js获取dom
     let matterCode1 = document.getElementById('matterCode1');
     let matterCode1 = document.getElementById('matterCode2')
     //打印dom
     console.log(matterCode1);
     console.log(matterCode2);
      //调用比较方法            
     CompareTxt(matterCode1,matterCode2);
     },
    

    觉得方法可行,单独打印dom没有问题,但是一但加上CompareTxt(matterCode1,matterCode2); 打印出的dom元素innerHtml为空
    ???(黑人问号)
    反复测试,后台没有报错,只有动态渲染的元素获取不到,想到可能是页面dom尚未加载完全就对其进行打印
    于是有了下面的方案:

    $(document).ready(function(){
     //方式二 js获取dom
     let matterCode1 = document.getElementById('matterCode1');
     let matterCode1 = document.getElementById('matterCode2')
     //打印dom
     console.log(matterCode1);
     console.log(matterCode2);
     //调用比较方法            
     CompareTxt(matterCode1,matterCode2);
    })
    

    结果依旧不可行=_=
    难道js不支持获取vue的文件插值?没道理!于是疯狂百度js调用vue文件插值,无果。感觉自己可能进入了思想误区,于是我决定,好好睡一觉。。
    第二天神清气爽,意识到可能百度的词条有问题,vue一定对这种情况有相应的解决方法,于是此条换成了
    动态渲染完成后获取dom元素,找到了下面的方法
    that.$nextTick(() => {})
    在数据渲染完成后添加此方法

                    let that = this;
                    //回调函数 axios
                    compareTwoEntity(ids, function (data) {
                        //获取数据
                        that.form1 = data.data[0];
                        that.form2 = data.data[1];
            
                            that.$nextTick(() => {
                            //数据渲染完成后执行以下代码
                                let matterCode1 = document.getElementById('matterCode1');
                                let matterCode2 = document.getElementById('matterCode2');
                                CompareTxt(matterCode1,matterCode2);
                                let matterName1 = document.getElementById('matterName1');
                                let matterName2 = document.getElementById('matterName2');
                                CompareTxt(matterName1,matterName2);
                                ...
                            })
                        };
                    });
    

    对于nextTick(callback),官方文档是这样解释的:Vue 在更新 DOM 时是异步执行的,为了在数据变化之后等待 Vue 完成更新 DOM,可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。

    展开全文
  • JavaScript VUE 跳转到指定菜单

    千次阅读 2018-01-25 09:53:29
    路由跳转  method () {  this.$router.push({  name: 'shop/shopMenu'  })  },
  • HTML JavaScript Vue 编辑器推荐

    千次阅读 2017-11-22 15:18:31
    sublime text 3 : https://www.sublimetext.com/ webstorm : http://www.jetbrains.com/webstorm/神器不多介绍了
  • 本篇文章纯属干货,包含了笔者在实际项目开发中经常用到的一些公共通用方法,希望可以帮助大家。 部分方法适用ReactNative import { PixelRatio, Dimensions, Platform, findNodeHandle, ...
  • 领导要求使用单元测试测试vue so... 收集jest测试JavaScript(es6)相关: 1、令人愉快的 JavaScript 测试(2018年10月12日) 掘金的文章,目前持续更新。跟着做比看Jest官网有意思。 2、前端测试框架Jest系列...
  • "productItemInfo":[ { "字面颜色":"蓝色系/深蓝色" }, { "字边颜色":"金属色/拉丝银" }, { "光源颜色":"正白灯(6000k-7000k)" }, ... "是否淋雨":"是" ... this.productItemInfo....
  • JavaScriptVue详解

    2019-06-03 16:36:48
    JavaScriptVue详解介绍什么是Vue安装常用指令选项配置生命周期组件 以下内容转载编辑自Vue官网 介绍 什么是Vue 一套用于构建用户界面的渐进式框架 可以自底向上逐层应用 只关注视图层 易于上手 便于与第三方库...
  • Vue是一个优秀的前端javascript框架, html+jquery不能满足所有的客户需求; 我们还需要学习Vue框架,在实际工作中用到的也很多; 2.Vue介绍 2.1 Vue的引入 开发者vue环境引入 生产者vue环境引入, 可以把对用的.min版本...
  • Vue.JS 是目前最火的前端框架之一,是一个构建数据驱动的 web 界面的渐进式框架。 Vue.JS 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或项目整合,已经成为...
  • JavaScript - Vue经典教程系列 全栈开发工程师,现职于北京一家...
  • JavaScriptstandard代码规范: https://standardjs.com/readme-zhcn.html vue规范: https://cn.vuejs.org/v2/style-guide/index.html vue为什么要求组件模板只能有一个根元素 ...
  • Vue的很多思想借鉴于Angular,但却比较轻量和自由,这里我们整理了JavaScriptVue.js库入门学习教程,包括其架构思想与核心的数据绑定方式等,需要的朋友可以参考下
  • 智能社:Javascriptvue.JS(一)  1. 认识Vue 2. vue和angular的区别? 3. vue基本雏形 4. 认识vue里面几个常用的指令 5. bootstrap+vue的简易留言 6. 其他指令全面认识? 7. computed的使用 8. 属性和事件 9. ...
  • javascript 原生实现 Vue.js的路由切换功能,模拟单页应用 上效果图: 源码如下: <!-- author:helang Email:helang.love@qq.com --> <!DOCTYPE html> <html lang="en"> <head> &...
  • javascriptvue中 this全面指南

    千次阅读 2018-10-10 16:02:00
    开发环境:javascript 情况一:对象下的函数中 //test.js var out = { function inner(){ this } } 此时函数中的this表示out对象。 情况二:函数中 //test.js function inner(){ this } ...
  • Vue入门开发工具Vue入门Vue入门附加知识 开发工具 开发工具:Hbuilder X 官网:https://www.dcloud.io/hbuilderx.html 安装:直接官网 下载解压 即可使用。【当前日期:2020/03/15】 现在很多人开发前端页面...
  • 创建了Vue.js插件以轻松利用Amplitude Javascript SDK 安装 npm i -S vue-amplitude-plugin 使用插件 Vue.use(VueAmplitude, { apiKey, userId }); apiKey:必需,由Amplitude根据每个项目提供。userId:可选,...
  • Accessible autocomplete component for vanilla JavaScript and Vue. 适用于原始JavaScriptVue的可访问自动完成组件。 View Demo 查看演示 documentation page 文档页面 特征 (Features) Accessible, ...
  • JavaScriptVue框架知识点大全

    千次阅读 2019-04-23 19:34:56
    要使用Vue.js,我们得先把它安装到我们的项目中,说明了简易安装,我们讲解的肯定是最简单的方法,先不管那些高大上的费时间的安装方法,直接引入一个js文件. 官网提供了Vue.js源码下载的地方:...
  • vue2 实践揭秘

    2018-06-25 10:38:14
    梁瑞坤著,JavaScript vue2 电子书,vue入门实战,JavaScript vue2 电子书,vue入门实战
  • 1、获取开发者的api-key ... 这个api-key也是一阵好找,按照提示,进入对应网页老是...我比较喜欢用vue开发,用vue开发的环境部署: https://developers.arcgis.com/javascript/latest/es-modules/ 2.1 安装@arcgis/c.
  • Vue.js 详细介绍Vue.js 是构建 Web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。主要特性:可扩展的数据绑定将普通的 JS 对象作为 model简洁明了的 API组件化 UI 构建配合别...
  • 近几年的前端开发技术经历了JavaScript框架(如jQuery)到集成开发(Webpack)的技术升级换代,特别是AngularJS、Vue这类MVVM开...
  • vue相关案例elementui javascript分页.编程式导航 注册登录 数据库 nodejs后端 后台管理

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,709
精华内容 7,883
关键字:

javascriptvue

java 订阅
vue 订阅