ES6模板字符串,解构,箭头函数

字符串模板 string;

模板字符串使用反引号 (``) 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法(${expression})的占位符。占位符中的表达式和周围的文本会一起传递给一个 默认函数,该函数负责将所有的部分连接起来,如果一个模板字符串由表达式开头,则该字符串被称为带标签的模板字符串,该表达式通常是一个函数,它会在模板字符串处理后被 调用,在输出最终结果前,你都可以通过该函数来对模板字符串进行操作处理。在模版字符串内使用反引号(#)时,需要在它前面加转义符(\)。
\# === “#” // 结果为true

//它和传统的字符串有什么区别:
		//传统字符串
			//传统的字符串拼接不能正常换行
			//传统的字符串拼接不能友好的插入变量
			//传统的字符串拼接不能友好的处理单引号、双引号互相嵌套的问题。
			//xxx hello vue xxx
			var s1 = 'xxx' + 'hello vue' + 'xxx';

		//模板字符串
			//支持变量的嵌套
			var s1 = `hello vue`;
			`xxx ${
     s1} xxx` //xxx hello vue xxx
			//{}里面可以插入任何js表达式,可以是一个对象、数组,甚至是一个函数。
			//对象或数组会调用它们的tostring()方法
			//对象
			var obj = {
   a:1,b:2};
			`0 ${
     
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Vue3 中,你可以使用箭头函数来定义组件的 methods、computed 和 watch 选项中的回调函数。箭头函数具有词法作用域,可以方便地访问到组件实例的属性和方法,因此在 Vue3 中非常适合使用箭头函数。以下是一个使用箭头函数的示例: ``` <template> <div> <button @click="handleClick">点击</button> <p>{{ message }}</p> </div> </template> <script> export default { data() { return { message: 'Hello, Vue3!' }; }, methods: { handleClick: () => { this.message = 'Clicked!'; // 错误:箭头函数中的 this 指向的是组件实例外部的作用域,无法访问到组件实例的属性和方法。 } } } </script> ``` 在上面的例子中,我们使用箭头函数来定义了一个 handleClick 方法,并在模板中绑定到了按钮的 click 事件上。然而,由于箭头函数中的 this 指向的是组件实例外部的作用域,无法访问到组件实例的属性和方法,因此在 handleClick 方法中无法更新 message 数据。如果你想要在箭头函数中访问到组件实例的属性和方法,可以使用 ES6解构语法来获取 this 对象,如下所示: ``` <template> <div> <button @click="handleClick">点击</button> <p>{{ message }}</p> </div> </template> <script> export default { data() { return { message: 'Hello, Vue3!' }; }, methods: { handleClick: function() { const { message } = this; this.message = `${message} Clicked!`; } } } </script> ``` 在上面的例子中,我们在 handleClick 方法中通过解构语法获取了组件实例的 this 对象,并将 message 属性存储在一个局部变量中。然后,我们在箭头函数中通过模板字符串将 message 属性的值更新为新的字符串。这样,每当用户点击按钮时,message 数据都会被更新,并在组件的视图中显示出来。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值