网站首页 » 前端开发 » Vue » Vue 里的十万个为什么
上一篇:
下一篇:

Vue 里的十万个为什么

前言

正如标题所说的,本文主要是分享一些关于 Vue 中的为为什么,但标题中的十万个有点夸张了,不过这也不重要,重要的是本文会持续更新,把 Vue 中的一些容易产生疑问的知识点收录进来。

vue-cli 创建的项目为什么会有两个 id=”app”?

index.html是html文件的模板,将来启动项目后要把动态生成的模板都会放在id为app这个div中。
在App.vue中也有一个id为app的div,这并不冲突,可以看下main.js中启动vue的那段代码:

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

这段代码是启动整个Vue应用的,其中用到了一项配置是template,之后template对用的模板会替换掉模板index.html中id为app的那个div,如果想要在最终渲染的模板中保留id为app的div,那就需要在App.vue中写一个,你可以查看启动后的项目,模板中是有一个id为app的div。

@/components/Home 和 ./components/Home 有什么区别?

@/ 代表 src 目录,./ 代表当前目录

根实例参数含义?

new Vue({
   el:"#app",
   router,
   template:'<App />',
   components:{
     App
  }
})

1、<App /> 是什么意思?

同 <App></App>,<App /> 只是前者的缩写

2、router 是什么意思?

本来写法是这样的 router:router 但是 ES6 为我们提供了一种新语法,key 值和 vlue 值相同的时候,我们可以简写比如上面的 router

< a href=”#/home”>,#是什么意思?

哈希模式切换页面,哈希不会跳转页面,而是在当前页面中载入页面

怎么去掉 url 中的 # 号?

一般地,比如通过 vue-cli 搭建项目,可以通过http://localhost:8080 来访问,但 Vue 会自动给我们在后面多加了一个 # ,如果想去掉也好简单,在路由配置中修改下 mode 属性的值就可以了,默认是 hash 模式,我们改成 history 就可以。但是这样的话页面就变成了跳转,而不是在当前页面中载入了。不过我们可以使用 vue-router 为我们提供的一个组件来解决这个问题。

<router-link to="/home"></router-link>

this.$router.push() 无效

当我们像下面这样写时会有问题的,根本就没有匹配到路由。

this.$router.push({ path: "/postDetail", params: { id: id } });

此时我们就应该注意了,如果你们是通过query 传参的可以用上面这种写未能,但我们如果是通过 params 传参的,那么我们就得把 path 属性 改成 name 并且填上对象的组件名。

this.$router.push({ name: "PostDetail", params: { id: id } });

这个组件名是我们在定义路由的时候定义的:

......
{
    path: '/postDetail/:id',
    name: 'PostDetail',
    component: PostDetail
  },
......

这个是很常容易遇到的坑。

持续列新……,敬请留意!

文章关键词:
  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/wonder-why-of-vue/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END