vue常用简单问题处理

vue常用简单问题处理

问题列表

问题名称	描述
vue路由history模式刷新页面出现404问题	无
vue监听浏览器缩放	无
vue加载完成后显示	无
vue动态设置属性	无
vue循环数据添加过滤	无
vue阻止冒泡	无
vue @click方法	无

vue路由history模式刷新页面出现404问题

vue hash模式下，URL中存在’#’，用’history’模式就能解决这个问题。但是history模式会出现刷新页面后，页面出现404。解决的办法是用nginx配置一下。
在nginx的配置文件中修改

location /{
    root   /data/nginx/html;
    index  index.html index.htm;
    if (!-e $request_filename) {
        rewrite ^/(.*) /index.html last;
        break;
    }
}

vue监听浏览器缩放

• 使用addEventListener()方法来添加监听事件方法详见菜鸟教程
• 实际使用

activated() {
      this.initData()
    },
methods: {
      initData () {
        window.addEventListener("resize", () => {
          //触发后操作
          alert("浏览器缩放");
         });    
      }
    }

vue加载完成后显示

• 使用v-cloak来控制加载完成后才显示，防止显示符号
• 实际使用

<style>
[v-cloak] {
  display: none;
}
</style>
<div v-cloak>
</div>

vue动态设置属性

• 动态设置类
  详见官方文档
• 实际使用

<div :class="{'active': detailIsActive == 1}">
</div>
<div :class="{ detailIsActive == 1?'active':'noactive'}">
</div>
<div :class="{'active1': detailIsActive == 1,'active2':detailIsActive == 2}">
</div>

<div class="rank-box" v-for="(item,index) in list"">
    <div class="rank " :class="'rank0'+ (index+1)" v-if="index<3">{{index+1}}</div>
    <div class="rank" v-if="index>2">{{index+1}}</div>
</div>

vue循环数据添加过滤

• 通过filter来实时过滤列表数据（非分页列表）
• 实际使用

<input type="text" v-model="search" placeholder="请输入您要筛选的信息" />
<div v-for="(item,index) in fiterList" >
<div>{{item.name}}</div>
</div>

data() {
    return {
        list:[{
         name:'测试1'
        }，{
         name:'测试2'
        }，{
         name:'测试3'
        }，{
         name:'测试4'
        }],//数据集
        search:'',
      };
  },
computed: {
      fiterList: function(){
          let that = this;
          return that.list.filter( item=>{
              if (item.name.indexOf(that.search)>=0) {
                  return item;
              }
          });
      }
  },

vue阻止冒泡

• 说明
  父子元素标签 同时存在某个事件时，在子元素模块只想触发子元素的事件，而不触发父级的事件，需要阻止父级事件触发
• stopPropagation()来阻止
  详见W3school
• 实际使用

<div @click="goToParent">
	<div>aa</div>
	<div @click="goToChildren($event)">bb</div>
</div>

methods: {
      goToParent() {
         alert("parent");
      },
      goToChildren(e){
	      try{
	        e.stopPropagation();//非IE浏览器
		    }
		    catch(e){
		        window.event.cancelBubble = true;//IE浏览器
		    }
      	alert("children");
      }
    }

vue @click方法

• 说明
  vue点击事件 一些简单操作
• 实际使用

<div>{{flag}}</div>
<div @click="flag=false">变量直接赋值</div>
<div @click="flag = !flag">变量变更</div>
<div @click="$router.push({ name: 'home' })">路由设置</div>
<div @click="functionName">调用函数</div>
data() {
    return {
        flag:true
      };
  },