8月项目总结(一)

2024年1月28日 190次阅读 来源: bug提交记录仪

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脚手架的使用过程中需要灵活运用。不要拘泥于框架本身。大胆想，尝试着做，在一次次试探中总结经验。**
    原文作者：bug提交记录仪
    原文地址: https://segmentfault.com/a/1190000020054865
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞