学习Vue过程笔记和难点讲解（一）

一、开始学习

首先看官网教程，遇到不会，再查找资料

二、问题（不理解的坑）

顺着左边目录一路看下来，在基础中基本是没什么问题的，直到深入组件才有

1.关于Prop的知识

vue中非props属性、$attrs和禁用 Attribute 继承

链接：https://blog.csdn.net/weixin_41604040/article/details/109444759
看一遍基本就懂了，他们的关系

简单总结：
$attrs是表示在使用组件时涉及的attribute不在组件props中的内容，可以用于指定绑定到哪一个元素；
inheritAttrs: false,则可以使模板根元素不继承这些不在props中的内容

2.vue-router使用：传递参数

参考资料：
Vue入坑——vue-router如何传递参数
Vue学习笔记——Vue-router

方法：
1.使用name传递
在router/index.js中，设置的name别名就可以用来传递name参数
在App.vue中直接使用<h2 style=“color: aqua”>{{$route.name}}</h2>
2.to来传递
在<router-link>中格式：
<router-link :to="{name:‘hellovue’,params:{username:‘tomcat’}}">hellovue页面</router-link>

在hellovue.vue中接收参数:

<p>传递的名字是：{{$route.params.username}}</p>

3.url传递
在route.js中使用 path: ‘/page2/:id/:username’
然后在请求页中直接 to="/page2/:135/:zzm"
结果页：url传递的uasername：{{$route.params.username}}

3.main.js文件解析

https://blog.csdn.net/Luckly_smile/article/details/113918723

4.index.html里面的那个带id#app的div，为什么不会出现在dom结构里？回答不一定正确，我也是看其他博主

答：index.html里面的那个带id#app的div，为什么不会出现在dom结构里？

5.index.html里面的那个带id#app的div,它与app.vue里面的id=‘#aaa’的div有什么关系？

答：app.vue 跟 index.html 里面的ID 不一定一样 ，app.vue里面的id 会最终渲染到DOM结构里，并且写的其他标签 要放到那个div里面 而且template下级 只能有一个div.

6.为什么在main.js文件里面，用render: h => h(App)把它们挂载到#app里面，有的却写的是components:{app}?

这个问题也困扰我，才知道是版本写法问题
答：

new Vue({
  router,
  store,
  //components: { App }   <!---------------------------------------------vue1.0的写法
  render: h => h(App)     <!---------------------------------------------vue2.0的写法
}).$mount('#app')

而如果没有 el: ‘#app’，则需要.$mount(’#app’)来手动挂载

关于render函数，初学就不用太纠结了：需要自行百度render
render函数是渲染一个视图，然后提供给el挂载，如果没有render那页面什么都不会出来。
参考链接

7.路由的使用

路由一开始我也不太理解，简单来说就是网页页面的跳转，类似于超链接的意思，点一下就跳转到其他页面。

参考链接
官方教程 建议先看官方的

8.