vue课程拓展---vue的ie兼容，ios兼容

2023-12-31 14:29:34

vue的基础指令——1

v-for

v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似
v-for=“item in list”
list是一个数组，item是当前遍历的数组元素
v-for="(item,index) in list"其中index是当前循环的索引，下标从0开始

<div id="app">
			<table>
				<tr class="thead">
					<td>序号</td>
					<td>姓名</td>
					<td>年龄</td>
				</tr>
				<tr v-for="(item,index) in list">
					<td v-text="index+1"></td>
					<td v-text="item.name"></td>
					<td v-text="item.age"></td>
				</tr>
			</table>
		</div>
		
var vm = new Vue({
			el: '#app',
			data: {
				list:[{
					name:'章三',
					age:18
				},{
					name:'李四',
					age:23
				}]
			}
		})

v-bind

v-bind动态地绑定一个或多个特性，可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），如v-bind: class

class可以和v-bind:class同时存在，也就是说有class了，再添加v-bind:class并不会覆盖原来的样式类，而是在原来基础上添加新的类名

<div id="app">
			<img v-bind:src="img" class="logo" 
				v-bind:class="isLogo?'':'product'" 
				v-bind:style="{'border':hasBorder?'2px solid red':''}"></img>
		</div>
		
		var vm = new Vue({
			el: '#app',
			data: {
				img:'https://www.baidu.com/img/bd_logo1.png',
				isLogo:false,
				hasBorder:true
			}
		})

v-if

v-if是条件渲染指令，它根据表达式的真假来删除和插入元素
基本语法：
v-if=“variable”
variable是一个返回布尔值的表达式，表达式可以是一个布尔属性，也可以是一个返回布尔的运算式。

<div id="app">
			<div v-if="isMale">男士</div>
			<div v-if="age>=20">age:{{age}}</div>
		</div>
		
var vm = new Vue({
			el: '#app',
			data: {
				age:25,
				isMale:true,
			}
		})

v-show

v-show 指令通过改变元素的 css 属性（display）来决定元素是显示还是隐藏。

v-if与v-show的区别

v-show不管条件是否成立，都会渲染html,而v-if只有条件成立才会渲染

v-model

<div id="app">
	<p>{{ message }}</p>
	<input type="text" v-model="message"/>
</div>

将message绑定到文本框，当更改文本框的值时，<p>{{ message }}</p> 中的内容也会被更新。
反过来，如果改变message的值，文本框的值也会被更新

v-on

用于监听DOM事件,用法和v-bind类似，可以用@代替

<button @click="show">

vue里的各种坑——2

vue的ie兼容

针对于ie浏览器，vue只能最低支持ie9及以上的版本。

另外不支持vue-router的路由跳转----this.$router.push方法，只能使用原生JavaScript的window.localtion或window.open这几种方法。

vue对苹果手机的兼容

vue对苹果兼容还是很友好的，但对于原生JavaScript的window.open语法会有一个安全机制，为了实现兼容，可以利用window.localtion.href来替换，或者，想办法跳过这个安全机制

代码：

在回调代码之前打开一个空窗口，例如 var w=window.open(xxx); 然后在回调函数中设置它的location。


var openWin = function(){
    var winRef = window.open("url","_blank");
    $.ajax({
        type: '',
        url: '',
        data: '',
        ......
        success:function(json){
            winRef.location = "新的url";
        }
    });
};

vue对手机系统的鉴定

为了一套系统同时对pc端以及手机端做兼容，必须加上这个型号判断。

// 判断型号
    appSource() {
      const u = navigator.userAgent;
      const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if (isiOS) {
        this.PhoneStatus = true; // 若是ios 做操作
      } else {
        this.PhoneStatus = false; // 要不就是Android或者pc
      }
    },

vue的检测浏览器版本

对于vue不适于ie8以下，所以做出检测提示，且必须将以下代码放在public文件夹的index.html中。

代码：

if(navigator.appName == "Microsoft Internet Explorer"&&parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE",""))<9){
        alert("您的IE版本过低，为正常使用请上报IT运维升级IE!");
    }

vue的一些拓展——3

vue的密码加密

这个是与后端约定好，一般是用加密方式来给密码进行登陆验证。

需要引入一些第三方包，——crypto.js

使用方式：

1.先使用

npm install cypto-js

创建crypto.js文件

import CryptoJS from 'crypto-js/crypto-js'

// 默认的 KEY 与 iv 如果没有给
let KEY = CryptoJS.enc.Utf8.parse("aes@032sA33#$aQk");
let IV = CryptoJS.enc.Utf8.parse('_aes_secret_iv__');

/**
 * AES加密 ：字符串 key iv  返回base64
 */
export function Encrypt(word, keyStr, ivStr) {
    let key = KEY
    let iv = IV

    if (keyStr) {
        key = CryptoJS.enc.Utf8.parse(keyStr);
        iv = CryptoJS.enc.Utf8.parse(ivStr);
    }

    let srcs = CryptoJS.enc.Utf8.parse(word);
    var encrypted = CryptoJS.AES.encrypt(srcs, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.ZeroPadding
    });
    // console.log("-=-=-=-", encrypted.ciphertext)
    return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);

}

/**
 * AES 解密 ：字符串 key iv  返回base64
 *
 */
export function Decrypt(word, keyStr, ivStr) {
    let key = KEY
    let iv = IV

    if (keyStr) {
        key = CryptoJS.enc.Utf8.parse(keyStr);
        iv = CryptoJS.enc.Utf8.parse(ivStr);
    }

    let base64 = CryptoJS.enc.Base64.parse(word);
    let src = CryptoJS.enc.Base64.stringify(base64);

    var decrypt = CryptoJS.AES.decrypt(src, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.ZeroPadding
    });

    var decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
    return decryptedStr.toString();
}

在使用的vue文件引入

import {Encrypt} from "@/utils/crypto.js";

vue的自定义组件

确定组件类型，是子组件，还是父组件。

分析组件具体功能逻辑，以及css变化。

例如：搜索组件，他是子组件，有两种情况，聚焦和失焦。

有两个盒子，一个是搜索框，一个是展示框。展示框对应聚焦与失焦的状态。也会有样式的改变。

vue的代码规范

vue搭建页面时，最好是注释好每个模块的名称

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PP2aLSjP-1619311117044)(./1.png)]

vue的方法都写好每一个步骤过程，是具体来实现什么的，可以在这个方法实现前，写好你要实现的功能步骤，一步步去写。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gqfdv5Nt-1619311117046)(./2.png)]

除了使用promise对象以外，可以使用async/await模式来处理异步函数

async getUser () {
 const res = await GetUser() 
 console.log(res)
}
// GetUser() 是封装好的api接口，直接调用返回对象。

如果只是单一的promise对象，async/await并没有什么优势。

但是在一个promise里套promise时，使用async/await的优势就明显了。

这是promise：

collectOrCanel (item) {
       checkToken().then(res=>{
      if(res.data.code !== 200){
          this.$router.push({path:'/login'})
        }else{
       console.log(item)
       // 判断是都被收藏 传的参数也就不同
       if(item.collectFlag == false){
          //未收藏
          let collectFlag = "collect"
          Collect(collectFlag,item.sysid,item.systype).then(result => {
          this.sysList=[]
          // 刷新列表
          this.getList()
          }).catch(err=>{console.log(err)})
        }else if(item.collectFlag == true){
          // 已收藏
          let collectFlag = "decollect"
          Collect(collectFlag,item.sysid,item.systype).then(result => {
            this.sysList=[]
            // 刷新列表
            this.getList()
          }).catch(err=>{console.log(err)})
          }
          }
        }).catch(err => {
         console.log(err)
       })
    },

这是async/await

async collectOrCanel (item) {
const res = await checkToken()
 if(res.data.code !==200 ){
   this.$router.push({path:'/login'})
 }else {
   if(item.collectFlag == false){
   let collectFlag = "collect"
   const result = Collect(collectFlag,item.sysid,item.systype)
   this.sysList = []
   this.getList()
   }else if(item.collecFlag == true){
   let collectFlag = "decollect"
   const result = Collect(collectFlag,item.sysid,item.systype)
   this.sysList = []
   this.getList()
   }
 }
}

vue的请求封装规范

打包，配置三个文件

.env.test ================> 测试环境配置

NODE_ENV = 'production'
VUE_APP_MODE = 'test'
VUE_APP_API_URL=https://
outputDir = test

.env.production ==========> 生产环境

NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_API_URL=https://
outputDir = production

.env ===================> 开发环境

NODE_ENV = 'development'
VUE_APP_MODE = 'development'
VUE_APP_API_URL=https://36.1.44.66:443

然后在package.json

"scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build --mode test && vue-cli-service build --mode prod",
    "test": "vue-cli-service build --mode test",
    "prod": "vue-cli-service build --mode prod",
    "lint": "vue-cli-service lint",
    "inspect": "vue-cli-service inspect"
  },

最后在api的js文件中

myaxios.defaults.baseURL = process.env.VUE_APP_API_URL

把axios的接口基址设置成配置文件中的变量就行。

vue的自适应

1.实现原理及运行环境
实现原理：vue编译时，将css的px单位修改为rem，实现屏幕自适应
vue/cli版本 4.5.6
amfe-flexible版本2.2.1
postcss-loader版本4.1.0
postcss-px2rem版本0.3.0

2.安装amfe-flexible模块
npm i -S amfe-flexible

3.安装postcss-px2rem
npm install -D postcss-loader
npm install -D postcss-px2rem

4.在main.js引入amfe-flexible
import ‘amfe-flexible’

5.配置vue.config.js
css: {
// css预设器配置项
loaderOptions: {
postcss: {
plugins: [
require(‘postcss-px2rem’)({
remUnit: 128,//设计图的宽度/10 比如你的设计图是1920的宽度这里你就1920/10=192
remPrecision: 8//换算的rem保留几位小数点
})
]
}
}
},

注意：设置根据项目实际设置remUnit，比如你的设计图是1920的宽度这里你就1920/10=192

pm install -D postcss-px2rem