VUE,HTML问题总结

• this.$router 相当于一个全局的路由对象，包含路由相关的属性、对象 (如 history 对象) 和方法，在任何页面都可以通过 this.$router 调用其方法如 push() 、go() 、resolve() 等。
• this.$route 表示当前的路由对象。每一个路由都有一个 route 对象，它是一个局部的对象，可以获取当前路由对应的 name , params, path , query 等属性。

1.拷贝数据

this.form = JSON.parse(JSON.stringify(this.User));

2.iframe引入其他页面

<iframe src="https://www.baidu.com/" width="100%" height="100%"></iframe>

3.vue获取ref

// 获取ref一定要注意是在dom元素生成之后
// 否则获取到的是undefined，或者报没有“getAtrribute”方法的错误
// 解决办法是使用$nextTick。
this.$nextTick(() => {
    console.log(this.$refs.test);       
});

4. vue得到?后面的参数 

// 发送
let desturl="/test?hhId='10';
this.$router.push({path:desturl});

// 接收
let hhId= this.$route.query.hhId;

5.vue跳转传参

//第一种用url和query传参,url方式传参,会显示到浏览器地址中
// 1.发送参数
let desturl = /***/***;
this.$router.push({
    path: desturl,
    query: {
        type: 1,
        val: '123',
    }
});
// 接收参数
let params = this.$route.query;

//第二种用name和params传参,name方式传参,刷新后参数会消失
// 1.配置路径
export default new Router({
  routes: [
    {
      path: '/***/***',
     // 一定要写name,params必须用name来识别路径
      name: 'TestVueRouterTo',
      component: TestVueRouterTo
    }
  ]
})
// 2.发送参数
this.$router.push({
    name: TestVueRouterTo,
    params: {
        type: 1,
        val: '123',
    }
});
// 3.接收参数
let params = this.$route.params;

6.通过CSS实现展示更多选项和收起

<div :style="isShowProd?'height:2rem;overflow:hidden;':''">
<!-- 一堆文字 -->
<el-tag>..................................</el-tag>
</div>
<el-link :underline="false" @click="isShowProd=!isShowProd">更多</el-link>

7.vue @click修饰符

常用:点击事件上加上 .stop, 可以阻止点击事件继续传播

这个地方是阻止继续传播到父元素，因为事件默认在冒泡阶段发生，
如果是绑的在捕获阶段发生的事件，.stop是阻止事件继续传播到子元素。

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>

<!-- 停止冒泡 阻止继续传播到父元素 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

8.vue对象里套list

<el-menu  default-active="2"  class="el-menu-vertical-demo">
      <el-submenu v-for="item in leftTree" :key="item.id" :index="item.id">
        <template slot="title"><span>{{item.label}}</span></template>
            <div v-if="item.children">
                <div v-for="(subitem, subindex) in item.children" :key="subindex">
                    <el-menu-item :index="subitem.code" @click="handleShowThisData(subitem)">{{subitem.label}}</el-menu-item>
                </div>
            </div>
    </el-submenu>
</el-menu>

9.vue重置表单

清空表单信息

this.refs.form.clearValidate()

this.refs.form.clearValidate('acctId')

最好两种都用

if (this.$refs['form'] !== undefined) {
          this.form= this.$options.data().form;
          this.$refs['form'].resetFields();
}

1).添加 prop 清空验证和内容

在 <el-form ref="form">添加 ref属性

this.refs["form"].resetFields()

this.refs.form.resetFields()

2).this.$options.data()是vue实例初始化时的data数据，只读属性

this.$options.data() // 整个data全部重置

this.form = this.$options.data().form // 重置data中的 某个form表单

• Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象
• this.$data 获取当前状态下的data
• this.$options.data()获取该组件初始状态下的data。
  在使用options.data时 用call调用并传入当前的this，不然默认的this可能会指向全局的vue对象，造成报错

重置data
Object.assign(this.$data，this.$options.data.call(this))
重置data中某个属性或者对象
this.form = this.$options.data.call(this).form

10.vue跳转

// 跳转到新标签
gotoGrade(row) {
    let newpage = this.$router.resolve({
        path: this.desturl,
        query: {
            param1:row.id,
        }
    });
    window.open(newpage.href, '_blank');
},
// 覆盖当前标签
gotoGrade(row) {
    this.$router.push({
        path: this.desturl,
        query: {
        ActiveNo:row.ActiveNo,
        }
    });
},

11.vue中给input框赋值，无法修改的问题

this.$set(this.student,'name','张三')

this.student.name='张三'

1.这样虽然可以显示值，但是不能修改
原因：vue实列创建的时候 student的属性名并未声明，因此vue就无法给属性添加getter/setter，从而导致student并不是响应式的

解决办法：
方法1：给student给初始值  sutdent:{name:""}

方法2：this.$set(this.student,'name','张三')

12.vue延时触发

function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

// 用法
sleep(500).then(() => {
    // 这里写sleep之后需要去做的事情
})

13.webpack-dev-server启动服务时自动打开浏览器

package.json文件中scripts属性的dev属性添加 --open参数        

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --open",

14.vue组件keep-alive控制是否缓存

<!-- 默认带缓存, :include="!$route.meta.keepAlive"可以控制是否缓存,route文件配置 -->
<keep-alive :include="getCache()">
    <router-view></router-view>
</keep-alive>

// 判断meta下的keepAlive参数是否为false
// 通过判断是否返回自身的路由地址
getCache () {
    if (this.$route.meta.keepAlive === false) {
        return ''
    } else {
        return this.$route.path
    }
}

15.刷新当前页面的两种方法

1.页面刷新

location. reload()
this.$router.go(0)

2.v-if="isShow"重新加载刷新

<template>
    <son v-if="isShow" style="margin-bottom: 20px;"></son>
</template>

// reload写在method中,刷新是调用就可以
reload() {
    this.isShow = false
    this.$nextTick(() => {
        this.isShow = true
    })
}

16.恢复数据为初始状态

this.$options.data()获取初始 data 的值，再使用Object.assign()来复制对象

// 恢复所有的值

Object.assign(this.$data, this.$options.data())

//恢复某个值

Object.assign(this.$data.form, this.$options.data().form)

17.iframe引入本地vue的页面

<iframe :src="src" style="height: 88vh;width: 100%;"></iframe>
src为路由地址: 例如 
src='/tree'
    
路由配置
{
    path: '/tree',
    name: 'tree',
    component: (resolve) => require(['@/view/test/tree'], resolve),
    meta:{keepAlive:true},
},

如果你希望在 iframe 内部点击某个链接后，让外部页面进行跳转，你可以在内部链接上添加 target="_top" 属性 

window.open('目标URL', '_top');

或者

<div>
    <a href="目标URL" target="_top">点击我跳转到外部页面</a>
  </div>

18.HTML中\n换行问题

给其父元素或自身,加上white-space: pre-line;样式

white-space: pre-line;