Vue相关知识

一.知识点

1.v-if 和v-show的区别。

a.v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐;
b.v-if 的显示隐藏是将DOM元素整个添加或删除，v-show 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的

2.vue 日期组件常用参数。

:visible.sync	    //是否显示
format="YY-MM-DD"	//确认日期时，回调事件返回的日期格式。如“YY/MM/DD hh:mm” 、“YY 年 MM 月第 DD 天，当前时间 hh 时 mm 分”
showTodayButton="false"  //是否显示返回今日按钮
disabled-date="disabledDate"	//禁用的日期
pickerType="date"			//选择器类型 datetime：日期+时间 date：日期 time：时间
defaultDatetime="time"		//指定默认时间。中国标准时间

3.vue this.$options的使用方式。

a.vue的实例属性$options是用来获取定义在data外的数据和方法的。

4.vue项目使用iframe引入html文件采坑。

//1.需要引入的文件要放在public文件夹下,不然无法找到路径,导致iframe加载本页面。
//2.需要引入的文件直接引入即可,不需加public
<iframe src="/test.html" style="width: 100%;height: 100%;border: none;"></iframe>

5.vue监听在其他地方赋值的对象属性要使用set赋值.

//例如
data(){
	return{
	  obj:{}
	}
},
mounted:{
	obj.name ="ls";//方式1
	obj.$set(obj,name,ls);//方式2
},
watch:{
  obj:{
   handler(newVal){
   	   console.log(newVal)//方式1无法监听,方式2可以监听
	},
  }
}

二.路由相关

1. 路由配置

//1.重定向
redirect: '/billing_list',
//2.children中path或name定义时加 ‘/’
path: '/index',
name: 'index',
component: resolve => require(['@/components/index.vue'], resolve),
redirect: '/home',
children:[
      {
        path: '/home',//使用时直接 this.$router.push('/home')
        name:'home',
        component:  resolve => require(['@/components/home.vue'], resolve)
      },
      {
        path: 'home',//使用时需添加父级模块 this.$router.push('/index/home')
        name:'home',
        component:  resolve => require(['@/components/home.vue'], resolve)
      },
    ]

2. 路由传参

三.第三方相关

1.vue项目配置屏幕宽度自适应(分辨率不同)

//1.安装插件
npm i lib-flexible -S
npm install --save-dev postcss-plugin-px2rem
//2.main.js引入
import 'lib-flexible'
//修改vue.config.js
css: {
      loaderOptions: {
        postcss: {
          plugins: [
            require('postcss-plugin-px2rem')({
              rootValue:192,      // 新版本的是这个值,设计稿宽度/10
              mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
              minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
            }),
          ]
        }
      }
    },
 //4.找到 node_modules/lib-flexible/flexible.js 修改源文件（作者写死了宽度）
 function refreshRem(){ 
    var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
        //width = 540 * dpr; //获取屏幕宽度，如果宽度大于540,被写死了
        width = width * dpr; //获取屏幕宽度
    }
    var rem = width / 10; //缩放比例可以按实际来
    docEl.style.fontSize = rem + 'px'; 
    flexible.rem = win.rem = rem; 
}

2.表格行,列拖拽(Sortable)。
网址:Sortable官网

//1.安装
$ npm install sortablejs --save
//2.main.js引入
//3.拖拽函数
//4.相关配置说明