vue中的零碎知识点

时光_静好
1,168 阅读2分钟

vue中的零碎知识点

路过的朋友，可以点个赞，关注一下~~~

1. 路由跳转的传值方式

在vue的路由跳转中有两种方式，分别是问号模式，和冒号模式，两者不能进行混合使用，

1.1 问号传值方式

格式

传值： <router-link to="/user/detail?id=1">用户1</router-link> 获取值： {{this.$route.query.id}}

注意：使用问号进行传值的时候不需在router中特别设置路由

1.2 冒号传值方式

格式

传值： <router-link to="/user/detail/2">用户2</router-link> 配置router路由文件 path:"detail/:id", 获取值： {{this.$route.params.id}}

2. 模块化的导入与导出

任何一个文件都是一个模块，写了一个模块，需要把这个模块导出去，别人需要把这个模块导进来，模块化主要分为两种，分别是commonjs方案和es6方案

2.1 commonjs方案

commonjs方案 主要应用于node 格式

导入：let http = require("http") 导出：module.exports = {}

2.2 es6方案

es6方案主要应用于: vue 和 react 组件 格式

导入：import http from "http" 导出：export default {}

3. keep-alive

是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM

  • prop:
    • include: 字符串或正则表达式。只有匹配的组件会被缓存。
    • exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。
    • 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：
      enter description here

结合router，缓存部分页面 使用$route.meta的keepAlive属性

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

4. vue中的transition标签

使用transition完成任何元素进入/离开的过渡组件需要满足下列条件

  • 条件渲染（v-if）
  • 条件展示（v-show）
  • 动态组件
  • 组件根节点

4.1 transition的简单使使用

enter description here

  • <transition>中只有name属性，不可添加其他标签属性
  • <transition>中只能有一个子元素并且该子元素需要有v-show或者v-if来控制是否显示

4.2 过渡css类名

<transition> 中的name属性用于替换vue钩子函数中的类名 v-

  • v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。

  • v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在transition/animation完成之后移除。

  • v-leave:定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。

  • v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在transition/animation完成之后移除。

  • 示例：<transition name = 'end'> 则样式为 end-enter 、 end-enter-active ...

5. 插槽slot的简单使用

在实际应用中，插槽主要分为三种：匿名插槽，具名插槽，作用域插槽，此外还有动态插槽也曾使用

5.1 插槽内容

比如：使用Home组件：

enter description here

然后你在 <Home>的组件中这样写：

enter description here

当组件渲染的时候，<slot></slot> 将会被替换为“Your Profile”

注意：当组件中没有<slot></slot>的时候，插槽的内容将会被遗弃，比如：不会再显示Your Profile

5.2 编译作用域

enter description here

注意：

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

5.3 具名插槽

所谓的具名插槽，就是给插槽命名，插槽slot中有一个 name的属性，可以用来区分不同的插槽。

简单的用法如下：

enter description here

具名插槽的缩写形式

enter description here

注意：和其它指令一样，该缩写只在其有参数的时候才可用

5.4 作用域插槽的使用

enter description here

5.5 动态插槽名

动态指令参数也可以用在 v-slot 上，来定义动态的插槽名：

enter description here

6. 路由传值的方式

6.1 params来传递参数

注意

使用params必须和name属性一起使用，否则要跳转的目标路由页面无法通过params获取到传递过来的参数。

路由配置:

{
    path: '/user',
    name: 'user',
    component: User
}

methods: 只能使用name

//HTML方式
<router-link :to="{name:"user", params:{userName:"lhb"}}"></router-link>

//js请求
this.$router.push({name:"user", params:{userName:"lhb"}});    //注意name不能换成path:"/user"

User.vue组件:

this.$route.params.userName;    //User.vue组件中就可以通过$route的params获取到

6.2 query来传递参数

注意

使用query的时候，可以通过path属性也可以通过name属性来指定目标路由。

对应路由配置：

{
    path: '/user',
    name: 'user',
    component: User
}

methods: name与path都可以

//HTML使用格式
<router-link :to="{name:"user",query:{"userName":"lhb"}}"></router-link>
<router-link :to="{path:"/user",query:{"userName":"lhb"}}"></router-link>


//js语法格式
 this.$router.push({name:"user",query:{"userName":"lhb"}});
 this.$router.push({path:"/user",query:{"userName":"lhb"}});

User.vue组件

this.$route.query.userName;   //User.vue组件中就可以通过$route的query获取到

6.3 配置动态路由参数

对应路由配置：

{
    path: '/user/:id',
    name: 'user',
    component: User
}

methods：

//HTML 格式
<router-link to="/one/log/123"></router-link>

//JS格式
  this.$router.push({path:`/user/${userid}`});

User.vue组件:

this.$route.params.id;  //User.vue组件中就可以通过$route的params获取到
avatar
文章
阅读
粉丝