vue使用理解（2）

上一篇对vue默认项目有所解读理解，本篇重点在于简单理解使用。
主干知道了，我们就来修改细节。
目的：运行项目之后，默认跳转到我们自己新建的一个内容页面（描述不够准确，只是为了表达意思）
首先新建一个index.vue组件（一个后缀名为vue的文件，路径：在src -> components文件夹下）
组件有三大部分：模板，脚本，样式既template标签，script标签，style标签。在index.vue文件下添加如下代码

<template>
  <div>
      <span>This is index.vue template</span>
      <p>--author:hp</p>
  </div>
</template>
<script>
export default {

}
</script>
<style>

</style>

我们从入口文件main.js再来看一遍，main.js到App.vue，看路由配置文件index.js。
打开App.vue文件
修改代码
1.删除id为app标签的默认公共部分代码（不理解公共部分没关系，找到位置就可以了。既id为app标签下的，router-view标签之外的所有内容）
2.删除id为app标签的默认样式（既style标签下的app样式）
打开index.js文件
配置文件
1.引入index.vue组件（像js一样，使用之前要引入）
2.路由配置，修改path，对应相应组件，修改之后的代码（默认是跳转到HelloWorld.vue组件，修改这个默认配置）

path: '/',
name: 'index',
component: index

dos进入到项目所在文件夹下，运行项目既执行npm run dev命令。
成功之后，页面上会显示我们新建组件index.vue里template标签下的内容。
复制地址，在新页面打开，就像是我们的htmlcssjs开发的前端一样，进入到了我们新建的主页面。

说明：初学者不理解组件，为了初学，可以将一个组件理解为一个页面，跳转到页面即是进入组件（概念是错误的，为了理解才这样说明，本人所有文章中的概念都是或比喻，或理解之后的通俗说明，是为了学习的方便，具体概念查看官方文档）

以上是对vue项目主干的再次理解，我们在实际开发页面的时候，大多使用以下几点
1.页面跳转（两者本质一样，都是路径的跳转）
a1：使用a标签
a2：组件跳转
2.数据交互（涉及内容较多，下一篇说明）
a1：vue-resource
a2：axios

关于页面跳转
a1：先来一个简单的a标签跳转
在App.vue组件的template模块下的公共部分（既全局部分）添加代码

<a href="https://www.baidu.com/">百度一下</a>

保存之后页面会自动刷新，点击页面上的百度一下会跳转到百度页面。
修改之后是这个样子，见下图

a2：组件跳转
组件跳转要设置路由，并且要在router添加mode配置。
在index.vue组件的template标签里添加以下代码

<a href='/HelloWorld'>HelloWord</a>

打开index.js设置路由，添加以下代码

{
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: HelloWorl
}

添加mode配置，不然跳转有问题。代码如下

mode:'history',

细节看下图

保存，项目自动刷新，页面点击HelloWorld会跳转，注意url，是基础url+路由的路径。

重点观察，当你点击HelloWorld之后页面上有HelloWorld.vue组件的内容，还有多出的一部分内容，这些内容就是来自App.vue的公共部分代码。而所有的组件内容都会通过router-view标签来显示。

组件的使用不止于此，先来展示我的理解，在举例使用说明

关于组件*vue的理解
1. 可以当做一个页面，通过跳转来显示，此时需要配置路由
2. 可以当做页面内的一个标签使用，
2.1 通过标签来显示，本项目案例标签index.vue -> <linka></linka>
此时需要在要使用的页面import组件 并在script -> components中声明
2.2 通过组件渲染器<router-view></router-view>来显示 本项目在index.vue中使用
此时需要通过设置子路由来控制 本项目在index.js中配置
// 路由匹配到/组件时，会渲染这个组件

现有这样一个模糊的概念，知道我们在做什么，再去动手学习。
关于第一点在前面的组件跳转中已详细说明，此处不再附加。

组件vue当做页面内的一个标签使用：
新建一个组件linka.vue,具体代码如下

<template>
  <div>
      <span>通过标签形式使用vue组件</span>
  </div>
</template>
<script>
export default {

}
</script>

<style>

</style>

把这个组件当做一个标签使用，就把他放在要使用的组件中，添加标签即可。
本人使用举例，在index.vue中通过标签使用linka.vue。
1.在index.vue的script标签中引入linka.vue这个组件
2.在index.vue的script标签下的export default中声明加载这个linka组件
3.通过<linka></linka>直接使用
细节见下图

保存，页面自动刷新，查看内容（会通过linka标签显示linka.vue组件内容）

组件通过组件渲染器来显示
1.新建组件children.vue,具体代码如下

<template>
  <div>
      <span>路由设置子组件在父组件通过router-view标签使用</span>
  </div>
</template>
<script>
export default {

}
</script>
<style>

</style>

2.在index.vue的template中添加标签`<router-view></router-view>`
3.设置子路由来控制控制子组件在父组件的`<router-view></router-view>`标签中使用。
在index.js中引入子组件，在routes里面的index组件下添加子组件路由配置，代码如下

children: [
        {
          path: '/',
          component: cli 
        }
]

细节见下图

保存，页面自动刷新，查看内容（会通过router-view标签显示子组件children.vue内容）

组件渲染器<router-view></router-view>的使用在之前的App.vue之中已经使用过，这里是通过子组件再次演示理解学习。

提示：如果你看了官方文档，感觉不知如何实际应用，请看我的文章，如果你只看了我的文章，请学习官网文档讲解，精确概念与细节。