Vue的一些用法实践

1.引入vue.js

2.js逻辑

var app = new Vue({
    el: "#wrap",
    data: {
        dGameTopId: 6, 
        dGameId: 131,

    },
    created: function() { // created ：实例被创建之后自动立即执行
        this.init();
    },
    computed: {
      timeHandle: function() {
       //这里需要加个闭包的写法，来传入参数
        return function(time) {
          return time.substr(5, 5).replace(/-/g, '.');
        }
 
      }
    },
    methods: {
        init: function() { //事件和方法要写在methods中
            this.adInit(); //广告位

        },
        //广告图
        adInit: function() {
            var that = this;
            var goUrl = "XXX.php";
            $.getJSON(goUrl, function(data) {
                if (data.msg) {
                    that.dRecommendObj = data.msg;
                }

            });

        },

        calNum: function(data) {
            var num = parseFloat(data);
            if (num >= 10000) {
                num = (num / 10000).toFixed(1) + '万';
            };
            return num;
        },
    }
})

3.html

   <li v-for="value in GameListArr2">
  <div class="lis_con">
       <h1>{{item.sGameName}}</h1>
       <span class="btn-go"></span>

      //这里调用computed里面的计算函数来处理这个时间的输出
       <p>{{timeHandle(item.sDate)}}-{{timeHandle(item.eDate)}}</p>
  </div>
  
     <a href="javascript:;" class="end-status" v-if="value.MatchStatus==3">已结束</a>
     <a href="javascript:;" class="paly-status" v-if="value.MatchStatus==2">正在直播</a>
     <a href="javascript:;" class="wait-status" v-if="value.MatchStatus==1"> 未开始</a>
     <p class="time">{{value.MatchDate}}</p>
     <p class="txt1">{{value.GameTypeName}}</p>
     <div class="headbg1">
        <img :src="value.TeamLogoA" class="pic" alt="" /> </div>
        <p class="name1">{{value.TeamNameA}}</p>
        <div class="num1" :class="value.MatchWin==1?'winner':(value.MatchWin==2?'loser':'')">{{value.ScoreA}}</div>
        <div class="num2" :class="value.MatchWin==1?'loser':(value.MatchWin==2?'winner':'')">{{value.ScoreB}}</div>
        <div class="headbg2">
        <img :src="value.TeamLogoB" class="pic" alt="" /> </div>
        <p class="name2">{{value.TeamNameB}}</p>
        <a v-if="value.MatchStatus==2" :href="value.shref" class="review">正在直播</a>
        <a v-if="value.MatchStatus==1" href="javascript;;" class="review">敬请期待</a>
        <a v-if="value.MatchStatus==3" :href="value.NewsId>0?value.href:'javascript:alert(\'视频跟新中\');'" target="_blank" class="review">全场回顾</a>
                        
</li>

<a :href="value.sUrl" @click="add('btn','leftbanner'+(index+1),`leftbanner${index+1}`);" target="_blank">

//注意：
//1.属性值填充，属性前面需要加冒号（:）；且填充时不需要加大括号。 直接填充html需要加双大括号
//2.事件的写法是@click，同时元素绑定的onclick还是会生效
//3.可以用es6的语法，三元表达式等

//<div class="team1" :class="{'win':item.MatchWin==1,'loser':item.MatchWin==2}">
class的对象绑定语法

// 渲染模板可以直接使用js语法；变量可以在这里直接使用
    <img :src="TeamList.msg[item['TeamA']]['TeamLogo']" class="headpic" alt="" />

4.$nextTick

 

• 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中

• 在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。

• 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。

this.$nextTick()在DOM更新循环之后执行延迟回调，在修改数据之后使用这个方法可以获取更新后的DOM

that.$nextTick(function() {
                        // 广告图 swiper1
                        var swiper = new Swiper('.swiper1', {
                            autoplay: {
                                disableOnInteraction: false, //手动滑动之后不打断播放
                                delay: 2000
                            },
                            loop: true,
                            pagination: {
                                el: '.swiper-pagination',
                            },
                        });
 })

参考：https://www.jianshu.com/p/a7550c0e164f

5.ref

//示例：这里给li 添加一个 ref="indexBriefTab"   

   <div class="playbox playbox1" style="display: block;">
         <ul class="playbox1-list scroll">
             <template v-for="(value,index) in GameListArr1">
                 <li class="ending" ref="indexBriefTab">
                     <p>文本内容</p>
                 </li>
             </template>
         </ul>
    </div>


js的逻辑：
数据渲染后以后，dom生成以后，通过this.$refs.indexBriefTab，拿到dom结构

 this.$nextTick(function() {
     console.log(this.$refs.indexBriefTab);//得到的是所有的li
 })

注意：

　　1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。

　　2、如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组 ，此时要拿到单个的ref 只需要循环就可以了。

 

这里例如需要拿到ul下的所有li或者一个大div里面的所有div，

1.先给需要拿到的元素加一个  ref="ulParent"

2.js拿的时候  var div = this.$refs.ulParent;  拿到的就是需要获取到的所有div

 

 

多种用法可参考：https://www.jianshu.com/p/623c8b009a85

 

 6.在css中再引入css的语法

index.vue：

<template>
    <div class="cusdealed">
        <div class="submited" v-if="showStatus==1">
            <div class="submitRes">
                <img class="resImg" src="../../common/img/repectSubmit.png" alt="">
            </div>
            <div class="submitTip tipwidth">该单据已经提交过了，不用重复提交哦！</div>
        </div>
        </div>
        
    </div>
</template>
<script type="text/javascript" src="./logic.js"></script>
<style lang="less" scoped>
    @import './style.css';
</style>

//这里.vue中引入css的话，写在style里面，通过@import 引入
//vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素

vue文件中style标签lang属性和scoped属性的介绍:

• 在子组件中设置style属性，如果不加scoped属性，如果是单页面程序，样式就会作用到全局中去，加了scoped属性以后，表示限制了该样式作用域只在该组件中。
• 普通的style标签只支持普通的样式，如果想要启用scss或less，需要为style元素，设置lang属性 
• 只要style标签是在.vue组件中定义的，就推荐为style标签开启scoped属性

style.less
//样式文件
@import '../../common/less/px2rem.less';
@import '../../common/less/base.less';

7.渲染模板中涉及到字符串拼接变量

例：写法：：：      <img :src="'//game.gtimg.cn/'+value.MatchDate" class="pic" alt="" />

es6的写法：    <img :src="`//game.gtimg.cn/${value.MatchDate}`" class="pic" alt="" />

效果：<img src="//game.gtimg.cn/2019-12-06 09:00:00" alt="" class="pic">

8.@click.stop阻止点击事件继续传播 

<!-- 阻止单击事件冒泡 -->

<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

 

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat">

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

9.单向数据绑定和双向数据绑定

单向绑定：数据决定页面的显示，但页面不能决定数据的内容

<div id="root">
        <div v-bind:title="title">hello world</div>
</div>
<script>
    new Vue({
        el:"#root",
        data:{
           title:"this is hello world"
        }
    })
</script>

双向绑定：数据决定页面的显示，但页面也能修改数据的内容（用v-model实现双向绑定）

<div id="root">
    <input type="text" v-model:value="content">//当修改input的值时，content的值也会做相应修改
    <div>{{content}}</div>
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            content: "this is content"
             },
    })
</script>

10.获取当前点击的元素

首先 vue的点击事件 是用  @click = “clickfun()” 属性 在html中绑定的,
在点击的函数中 添加$event 参数就可以
比如
<button  @click = “clickfun($event)” data-id='1'>点击</button>

methods: {
    clickfun(e) {
      // e.target 是你当前点击的元素
      // e.currentTarget 是你绑定事件的元素
      //例如：实现自己高亮，兄弟不高亮
     $(e.target).addClass('cur').siblings().removeClass('cur');

     //如果要获取点击元素的自定义属性
     var id = e.target.dataset.id; //获取当前点击元素的data-id的属性值
    }
  },

 

11.默认触发的方法

自定义指令directives属性

场景：点击tab的时候，默认出发下面第一个ul的第一个li的点击事件，则：

js：
    directives: {
        trigger: {
            inserted(el, binging) {
                el.click()

            }
        }
    },


html:
//<button @click='toggle' v-trigger>toggle</button>

<div class="pm-team-item" v-for="(value,index) in WarTeamArr" v-if="index==0" @click="InitTeamBaseInfo(value.TeamId)" v-trigger>{{value.TeamName}}</div>
                   <div class="pm-team-item" v-for="(value,index) in WarTeamArr" v-if="index!=0" @click="InitTeamBaseInfo(value.TeamId)">{{value.TeamName}}</div>

12.给元素绑定滚动事件（监听指定的div的滚动事件，例如滚动加载更多）

html:
html中给需要监听的div，加@scroll，后面跟事件名称
 <div class="td-video-box" @scroll="scrollEvent"></div>

js:

methods:{
 // 如果不绑定到元素上，则只能监听页面滚动
//div的滚动条滚动到底部的时候，加载下一页
        scrollEvent: function() {
            var that = this;
            var nDivHight = $(".td-video-box").height();
            var nScrollHight = $(".td-video-box")[0].scrollHeight;
            var nScrollTop = $(".td-video-box")[0].scrollTop;
            if (nScrollTop + nDivHight >= nScrollHight) {
                console.log("滚动条到底部了");
                that.dPage++;
                console.log(that.dPage)
                if (that.dTeamId) {
                    that.InitVideoListAjax(that.dTeamId);
                } else {
                    that.InitVideoListAjax('');
                }

            }

        }

}

监听页面的滚动：

//在生命周期mounted中进行监听滚动：

mounted () {
    window.addEventListener('scroll', this.scrollToTop)
},

//在方法中定义监听滚动执行的方法：

scrollToTop() {
  　　var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  　　console.log(scrollTop)
},

13. v-html：

将带dom结构的内容按照dom解析，而不是按照字符串解析（解析dom结构）

例如：这里p的html想要的是带有dom结构的，则将v-html=‘’绑在p元素上就可以了

listData.desc_d_4=‘<span>“势如破竹”</span>的一年，<br>你的物理输出很高’

<p class="summary"  v-html="listData.desc_d_4"></p>

14.vue的数据，在模板中使用发现undefined或者属性未定义的情况

当模板中的数据是异步请求回来渲染时，如果我们用到的是异步的数据中的属性，则可能一开始是undefined或者属性未定义，等到数据回来了，会渲染上，大部分不会影响到效果，如果有影响时，则可以这样处理：v-if

加个v-if  即当有数据时，才去取这里的属性

<p class="hero-name" v-if="listDataWegameChamp1.length!=0">{{ heroData[listDataWegameChamp1["0"]["champion_id"]]["name"] }}</p>

15.想在vue模板中使用函数

在js中定义好函数：
var Page1 = new Vue({
el: ".wrap",
data:{},
created:function(){},
methods:{
   
     FormateMatchStatus: function(status) {
            switch (+status) {
                case 1:
                    return "未开始";
                case 2:
                    return "进行中";
                case 3:
                    return "已结束";
            }
        }
}

})


在html中使用时：
 <td>{{ FormateMatchStatus(item.MatchStatus) }}</td>

 <i :class="ReloadMemberGamePlace(item.GamePlace)"></i>

16.vue渲染时，点击按钮加载更多处理

需求是：默认展示7条，每次点击加载更多，在加载7条

（1）遍历的时候，v-show处理一下，当key大于某个值则不显示

js中，dnum默认设置等于7；dTeamLength等于数据的长度。每次点击按钮，让dnum  +7。大于的时候则不再处理

17. 解决vue变量未渲染前代码显示问题

在vue变量未渲染前，会有一瞬间显示代码，影响代码美观。vue有现成的指令来解决这个问题：v-cloak

在css中加入：

[v-cloak]{
    display: none;
}

在需要元素加上：

<div v-cloak>
    {{demo}}
</div>

这样，v-cloak所在元素下的变量在未渲染前不会显示。

 

18.vue中双层遍历的写法

19.获取自定义属性的值

 

<div id="app">
        <span data-id="21" @click="getData($event)">55</span>
    </div>

new Vue({
     el:'#app',
     methods:{
         getData:function (e) {
             console.log(e.target.getAttribute('data-num'))
         }
     }
 })


1.通过e.target.getAttribute('data-id')
2.e.target.dataset.id