vue课程拓展---vue的ie兼容，ios兼容
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue课程拓展---vue的ie兼容，ios兼容，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8443字，纯文字阅读大概需要13分钟。
内容图文
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
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
内容总结
以上是互联网集市为您收集整理的vue课程拓展---vue的ie兼容，ios兼容全部内容，希望文章能够帮你解决vue课程拓展---vue的ie兼容，ios兼容所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。