vue实现简单的菜单

梅花三

于 2019-06-20 17:33:26 发布

阅读量8.3k

点赞数

分类专栏：编码 vue 文章标签： vue demo 菜单 prop transition

本文链接：https://blog.youkuaiyun.com/weixin_43794073/article/details/93073760

版权

本文介绍了如何在Vue中使用prop和transition来实现简单的菜单。文章讲解了prop的camelCase与kebab-case命名规则，并强调在使用字符串模板与非字符串模板时的注意事项。同时，探讨了transition的适用场景，包括条件渲染、条件展示、动态组件和组件根节点。最后，提供了包含示例代码的GitHub链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要掌握的知识

关于prop：vue官方文档中说明

HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{
  { postTitle }}</h3>'
})

<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

重申一次，如果你使用字符串模板，那么这个限制就不存在了。

字符串模板：指的是在组件选项里用 template:"" 指定的模板，换句话说，写在 js 中的 template:"" 中的就是字符串模板。比如下面这个：

var tmp = new Vue({
    template:"<myComponent></myComponent>"
});

非字符串模板：在单文件里用指定的模板，换句话说，写在 html 中的就是非字符串模板。

但是在调用prop值时，又得与props的属性值名称一样。

最低0.47元/天解锁文章