Vue组件

组件

组件是什么

组件是可复用的 Vue 实例，且带有一个名字，在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

<div id="components-demo">
  <button-counter></button-counter>
</div>

根组件

new Vue({ el: '#components-demo' })

组件做什么

可以复用页面的一些元素

组件怎么写

写组件步骤

        1.定义组件模板

        2.在组件模板中画页面

        3.定义一个变量和组件模板绑定

        4.在跟组件注册自定义的组件

  使用自定义组件

        把注册组件的变量名当作标签来使用

路由

跳转

html-->html

如果在一个html中实现不同页面条状（用路由实现）

多页面应用mpg（multil page application）

使用场景：客户端，手机端，小程序，app使用的比较多

单页面应用spg（slge page application）

在主流的单页面应用中，只能通过路由的方式实现不同页面直接的切换

路由是什么

可以通过用户不同事件来切换不同页面的技术

路由做什么

路由怎么写

写路由步骤

        1.创建一个路由对象

        2.把组件注册在路由上（组件在注册到路由上后，会给每个组件分配一个url，

        通过对应的url找到对应的组件，从而实现来回切换的效果）

        3.把路由对象注册到根组件上

使用路由

        1.用 router-link 实现导航栏（router-link 会被翻译成a标签，也可以通过tag 属性指定标签）

        2.用 router-view 来渲染路由匹配上的组件

组件注意

        1.此处的component没有s

        2.path加上 /

设置默认路由

        1.路由默认会找path为'/'的组件

        2.如果没有path为'/'的，可以重定向来设置默认值