共计 1552 个字符,预计需要花费 4 分钟才能阅读完成。
1、模板字符串使用问题
关键点(``)、${}
模板字符串定义:模板字面量 是允许嵌入表达式的字符串字面量。你可以使用多行字符串和字符串插值功
能。它们在 ES2015 规范的先前版本中被称为“模板字符串”。
模板字符串使用反引号 (` `) 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法(${expression})的占位符。注意:** 占位符 ** 中的表达式和周围的文本会一起传递给一个默认函数,该函数负责将所有的部分连接起来,如果一个模板字符串由表达式开头,则该字符串被称为 ** 带标签的模板字符串 **,该表达式 ** 通常是一个函数 **,它会在模板字符串处理后被调用,在输出最终结果前,可以通过该函数来对模板字符串进行操作处理。在 ** 模版字符串内使用反引号(`)时,需要在它前面加转义符(\)**。
\
` === “`”
在普通字符串中嵌入表达式,必须使用如下语法:
var a = 5;
var b = 10;
console.log(‘fifteen is ‘ + (a + b) + ‘ andnnot ‘ + (2 * a + b) + ‘.’);
// “Fifteen is 15 and
// not 20.”
///var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// “Fifteen is 15 and
// not 20.”
最牛的还是需要仔细研读阮一峰大神的 http://es6.ruanyifeng.com/#do…
项目中在 vue 中需要在模板字符串中添加点击事件。@click 是用不了的,只能使用原生 js 的 onclick 事件。
这里需要 注意 的是:onclick 的指向问题。window.copyMsg–>>
正确写法:
`<p onclick='copyMsg("${data}")'></p>`//
错误写法:
`<p onclick='${copyMsg}()'></p>`// 划过后便会直接触发 copyMsg 事件。
2、执行浏览器的 copy
借鉴前辈的代码修成适应项目的 util 的 js。注: 将一些工具类函数单独封装至 util 文件夹内,能够规范开发
使用时先引入 js 文件
通过 window.copyMsg = Url
//copy.js
export const copyUrl = (datas) => {if (!datas) {return};
var oInput = document.createElement('textarea')
oInput.value = datas
document.body.appendChild(oInput)
oInput.select() // 选择对象
document.execCommand('Copy') // 执行浏览器复制命令
oInput.className = 'oInput'
oInput.style.display = 'none'
}
3.axios 向后台传值从而获取数据
需求是先获取城市的名字,根据城市名,返回对应城市的数据集
可以在 Vue 的 computed 中封装好
axiosData(){
return {city:this.city.cityName}
}
\\ 第二步
在使用封装好的 axios 中
WarningInit() {this.$axios.Warning(**this.axiosData**).then(({resultData}) => {resultData.forEach(e => {\\ 循环遍历数据});
this.XX = resultData;
});
},
关于 axios 的封装借鉴了别人的一篇文章:https://www.cnblogs.com/chaoy…
** 总结:原生 js 永远是最重要的一环,在 vue 脚手架的使用过程中需要灵活运用。不要拘泥于框架本身。大胆想,尝试着做,在一次次试探中总结经验。**
正文完
发表至: javascript
2019-08-13