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>

持续列新……，敬请留意！