介绍
小编给大家分享一下Vue中容易被忽视的知识点有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
Vue的优点 Vue具体轻量级框架,简单易学,双向数据绑定,组件化,数据和结构的分离,虚拟DOM,运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和DOM,可以大大提升访问速度和用户体验。
<强>容易忽视的点
<强>箭头函数的使用
ES6的普及使得箭头函数的使用更加频繁,但是在Vue中不要在选项属性或者回调上使用箭头函数,举个例子:
new Vue ({
,el: & # 39; #应用# 39;
,数据:{
表明:才能正确
},
,创建:(),=祝辞,{
console.log才能(this.show)
},
}) 将创建钩子写成箭头函数,这里的这将不再指向Vue对象,在浏览器中将会指向窗口对象,这是因为箭头函数并没有,这个会作为变量一直向上级词法作用域查找,直到找到为止
<强>指令动态参数
Vue从2.6.0开始,可以用方括号括起来的JavaScript表达式作为一个指令参数,举个例子:
& lt; div id=癮pp"比;
,& lt; input v:[活动],=,“doSomething"比;
,& lt; button v:点击=癳vent =, & # 39;关注# 39;“祝辞change
& lt;/div> new Vue ({
,el: & # 39; #应用# 39;
,数据(){
return {才能
,,,事件:& # 39;输入# 39;
,,}
},
,方法:{
doSomething 才能;(),{
,,console.log(& # 39;瑞士# 39;)
,,}
},
}) 这里将输入的事件监听设置为一个动态的参数,默认是监听点击事件,当点击改变的时候,改为监听重点事件,动态参数预期会求出一个字符串,异常情况下值为null, null值可以用于移除绑定,任何其他非字符串类型的值都会触发一个警告
<强>模板中使用方法
方法中提供的方法大多数时候都是用来给其他方法调用的,但是它其实也可以像计算计算属性一样直接写在模版里,举个例子:
& lt; div id=癮pp"在{{reversedMessage(& # 39;你好# 39;)}}& lt;/div> var app =, Vue ({new
,el: & # 39; #应用# 39;
,方法:{
,,reversedMessage: function (消息),{
,,return message.split (& # 39; & # 39;) .reverse () . join () & # 39; & # 39;
,,}
},
}) 有了计算计算属性,为什么还要用方法呢?计算属性是基于响应式依赖进行缓存的,只在相关依赖发生改变时才会重新求值,而方法每次调用都会重新计算,调用方法时可以传参,进行指定计算,但是计算不行,这在遍历数组时十分有用
<强>用关键管理可复用元素
Vue会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做会使Vue变得非常快,举个例子:
& lt; div id=癮pp"比;
& lt;才能template v=發oginType ===, & # 39;用户名# 39;“比;
,,& lt; label> Username
,,& lt; input 占位符=癊nter your username"比;
& lt;才能/template>
& lt;才能template v-else>
,,& lt; label> Email
,,& lt; input 占位符=癊nter your email address"比;
& lt;才能/template>
& lt;才能button @click=癱hange"祝辞change
& lt;/div> var app =, Vue ({new
,el: & # 39; #应用# 39;
,数据(){
return {才能
,,,loginType: & # 39;用户名# 39;
,,}
},
,方法:{
change 才能;(),{
,,this.loginType =, this.loginType ===, & # 39;用户名# 39;,?,& # 39;电子邮件# 39;,:,& # 39;用户名# 39;
,,}
,}
}) 上面代码中切换loginType将不会清除用户已经输入的内容,因为两个模版使用了相同的元素,如果不想复用也很简单,只需要添加一个具有唯一值的关键属性即可:
& lt; template v=發oginType ===, & # 39;用户名# 39;“比;
,& lt; label> Username
,& lt; input 关键=皍sername",占位符=癊nter your username"比;
& lt;/template>
& lt; template v-else>
,& lt; label> Email
