好资源导航 » 文章资讯 » 理理Vue细节（推荐）

理理Vue细节（推荐）

2023-08-24 13:10:04 78

1.动态属性名：可使用表达式来设置动态属性名或方法名：


...





data:{
name:'href',
sss:'src'
}

注意：要避免空格和引号等，且需要小写，可使用计算属性来应对复杂表达式，都需要使用[]

2.computed/methods/watch

computed可使用get/set

computed:{
top(){
return'top'
},
name:{
get(){
returnthis.name
},
set(val){
this.name=val
}
}
}

computed可缓存，但不可传参，会根据data中的属性变化而变化，即是根据响应式依赖来变化，而Date不是响应式依赖，即不会变化；method则每次都会进行计算，但可传参。

watch用于处理异步或开销较大的操作，如输入搜索时。

3.style绑定

直接对象或变量对象
计算属性
直接style或style对象


样式3

数组结合三目/数组结合对象

data:{
isActive:true,
activeClass:'active'
}

4.v-if条件渲染

可使用template包裹元素，template会被当成不可见的包裹元素


Title
Paragraph1
Paragraph2

多条件判断

C NotA/B/C

5.key

添加key防止vue重复利用不想被重复利用的元素，如下的input如果不添加key，则vue会重复使用key，进而input的value值在切换后还会被保留，因为vue仅仅替换了placeholder


Username



Email

6.v-if和v-show

v-if是组件的销毁和重建，如果初始条件为false，则什么都不做，直到变为真，所以切换开销高，运行条件很少改变时适用
v-show是display:none和block之间的CSS切换，基于渲染，不管初始条件如何都会渲染，所以初始渲染开销高，切换频率高时适用

7.v-for

可使用in或者of
也可遍历对象：v-for="(value,key,index)inobj"
可根据template渲染多个组合元素：



{{item.msg}}

8.v-for和v-if

v-for优先级更高，所以v-if会重复运行于每个v-for循环中，所以尽量不要一起使用，可先使用计算属性对数据进行过滤再遍历。

9.更改响应式数据

Vue.set(object,key,value)
this.$set(object,key,value)
this.items.splice(index,1,newValue)
批量添加属性：

//不要直接Object.assign(this.items,{age:18}
this.items=Object.assign({},this.items,{
age:18,
favoriteColor:'VueGreen'
})

10.事件修饰符

.passive：滚动的默认事件会立即出发，即告诉浏览器不想阻止默认事件的触发，可提升移动端性能

...

.capture：添加事件监听器时使用事件捕获模式，即元素自身触发的事件先在此处理，然后才交由内部元素进行处理
.self：只当在event.target是当前元素自身时触发处理函数，即事件不是从内部元素触发的
.once：点击事件只会触发一次
键盘修饰符：

11.v-model

选择框

ABC

修饰符.lazy：在change时而非input时更新

注：change事件是在input失去焦点时触发，即用于单选、多选框和选择框，而input事件是在value值变化时触发，但脚本改变value值时不会触发，即用于text和textarea

修饰符.number：输入值转为数值

修饰符.trim：过滤收尾空白字符

12.Prop

使用v-bind="obj"会将对象的每个属性都作为一个独立的prop传入进去，所以接受时也需要逐个属性接收。

props虽然是单向数据流，但对于引用类型，子组件还是可以改变父组件的状态。

props会在组件实例创建之前进行验证，所以实例的属性再default或validator中是不可用的。

13.自定义事件

自定义事件需要注意事件名为小写或-分隔，因为$emit('BaseEvent')虽然事件名不会变，但在html中该事件名会被转化为小写，不会监听到。

14.slot

具名插槽



Heremightbeapagetitle



Aparagraphforthemaincontent.
Andanotherone.


Here'ssomecontactinfo

作用域插槽




{{user.lastName}}






{{slotProps.user.firstName}}






{{user.firstName}}

15.组件通信

vuex/eventBus
prop/$emit
$children/$parent
provide/inject
$refs

//父或祖先级
provide:function(){
return{
getMap:this.getMap
}
}

//后代级
inject:['getMap']

16.scope

scoped属性会自动添加一个唯一的属性(比如data-v-21e5b78)为组件内CSS指定作用域，编译的时候.list-container:hover会被编译成类似.list-container[data-v-21e5b78]:hover

17.路由

区分：this.$router指路由器，this.$route指当前路由

通配符：捕获所有路由或404Notfound路由

//含通配符的路由都要放在最后，因为优先级由定义顺序决定
{
//会匹配所有路径
path:'*'
}
{
//会匹配以`/user-`开头的任意路径
path:'/user-*'
}

当使用一个通配符时，$route.params内会自动添加一个名为pathMatch参数。它包含了URL通过通配符被匹配的部分：

//给出一个路由{path:'/user-*'}
this.$router.push('/user-admin')
this.$route.params.pathMatch//'admin'
//给出一个路由{path:'*'}
this.$router.push('/non-existing')
this.$route.params.pathMatch//'/non-existing'

点击等同于调用router.push(...)方法，因为会在内部调用该方法，进而在history栈添加一个新的记录

使用了push时，如果提供的path不完整，则params会被忽略，需要提供路由的name或手写完整的带有参数的path：

constuserId='123'
router.push({name:'user',params:{userId}})//->/user/123
router.push({path:`/user/${userId}`})//->/user/123
//这里的params不生效
router.push({path:'/user',params:{userId}})//->/user

router.push/router.replace/router.go效仿于window.history.pushState/window.history.replaceState/window.history.go

命名视图：router-view可设置名字，如果router-view没有设置名字，那么默认为default





constrouter=newVueRouter({
routes:[
{
path:'/',
components:{
default:Foo,
a:Bar,
b:Baz
}
}
]
})

路由使用props：可将路由参数设置为组件属性

constUser={
props:['id'],
template:'User{{id}}'
}
//通过布尔值设置
constrouter=newVueRouter({
routes:[
{path:'/user/:id',component:User,props:true},

//对于包含命名视图的路由，你必须分别为每个命名视图添加`props`选项：
{
path:'/user/:id',
components:{default:User,sidebar:Sidebar},
props:{default:true,sidebar:false}
}
]
})

//通过函数设置query
//URL/search?q=vue会将{name:'vue'}作为属性传递给SearchUser组件
constrouter=newVueRouter({
routes:[
{path:'/search',component:SearchUser,props:(route)=>({name:route.query.q})}
]
})

beforeRouteEnter：可使用beforeRouteEnter来提前获取接口数据，同时需要在next后才能访问到实例：

beforeRouteEnter(to,from,next){
axios('/text.json').then(res=>{
next(vm=>{
vm.datas=res
})
})
}

路由设置有参数时，如果跳转页面后再通过返回键返回时，路由会保留有参数，如果通过push跳转返回，则不会保留该参数，这在第三方调用模块传参时需要注意。

18.loader

VueLoader编译单文件的template块时，会将所有遇到的URL资源转为webpack模块请求：

//将会被编译成为：
createElement('img',{
attrs:{
src:require('http://www.haoziyuan.cc../image.png')//现在这是一个模块的请求了
}
})

资源URL转换规则

如果是绝对路径，例如/images/foo.png)，则会原样保留。
如果路径以.开头，将会被看作相对的模块依赖，并按照你的本地文件系统上的目录结构进行解析。
如果路径以~开头，其后的部分将会被看作模块依赖。
如果路径以@开头，也会被看作模块依赖。

以上所述是小编给大家介绍的Vue细节详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
514930285
czq8825@qq.com

理理Vue细节（推荐）

Title

Heremightbeapagetitle

热门推荐

随机推荐