Vue的组件和路由

组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。

组件的作用

组件是对特点功能代码(html,css,js)的封装, 通过组件的名字可以重复利用该组件中的代码.

1全局组件

全局组件的语法:
   Vue.component("自定义标签的名字",{配置对象})

全局组件的特点:
    　　全局组件可以在任何被挂着的标签中使用.
 　　全局组件的配置对象中必须包含template属性
代码演示

<div id="app"> <myform></myform> </div>

 <!-- script必需使用 type=text/template才可以使用-->
 <script id="mytemp2" type="text/template">
     <form action="" method="post">
         名称:<input type="text" name="username" /> <br />
         密码:<input type="password" name="password" />  <br />
         <input type="submit" value="提交" />
     </form>
 </script>

 <script>

     //全局组件(任何挂载点都可以使用)
     Vue.component("myform",{
         //如果模板内容太多，写在这里会很麻烦
         template:"#mytemp2"
     })

     new Vue({
         el:"#app",
         data:{
             message:"你好啊！"
         }
     })

 </script>

局部组件

局部语法:
   var app = new Vue({
    el: "#app",
    data: {},
    components : {
        "局部组件的名字1" : {组件的配置对象}
        "局部组件的名字2" : {组件的配置对象}
    }
  });

局部组件的特点
   局部组件只能够在所挂载的标签中使用.

<div id="app"> <myform></myform> </div>

 <template id="mytemp">
     <div>//模板这个是
         名称:<input type="text" name="username" /> <br />
         密码:<input type="password" name="password" />  <br />
         <input type="submit" value="提交" @click="say" />
     </div>
 </template>

 <script>

     new Vue({
         el:"#app",
         data:{

         },
         components:{
             //只有当前的挂载点使用
             myform:{
                 template:"#mytemp",
                 //这个data必需是一个函数
                 data() {
                     return {
                         count: 0,
                         message:"我也是一个中国人"
                     }
                 },
                 methods:{
                     say(){
                         alert("点我啊");
                     }
                 }
             }
         }
     })

 </script>

路由

路由是负责将进入的浏览器请求映射到特定的 组件 代码中。  即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源(组件)的映射，通过一个路径的url地址，可以唯一找到一个资源。路由不包含在vue中，是一个插件，需要单独下载。

官方地址：https://router.vuejs.org/zh/

路由的使用

 <div id="app">
     <p>
         <!--
             router-link:路由标签（它就是一个a标签）
             to="/foo":路径(到哪里云)
          -->
         <router-link to="/main">首页</router-link>
         <router-link to="/singer">歌手</router-link>
         <router-link to="/hot">热门歌曲</router-link>
     </p>
     <!-- 路由出口 -->
     <!-- 路由匹配到的组件将渲染在这里 -->
     <router-view></router-view>
 </div>

 <script>

     // 2. 定义路由
     // 每个路由应该映射一个组件。 其中"component" 可以是
     // 通过 Vue.extend() 创建的组件构造器，
     // 或者，只是一个组件配置对象。
     // 我们晚点再讨论嵌套路由。
     var routes = [
         {
             path: '/main',
             component: {
                 template:"<h2>我是主页我怕谁</h2>"
             }
         },
         {
             path: '/singer',
             component: {
                 template:"<h2>我是歌手第5季</h2>"
             }
         }, {
             path: '/hot',
             component: {
                 template:"<h2>葫芦娃</h2>"
             }
         }
     ]

     //定义一个路由
     var router = new VueRouter({
         routes // (缩写) 相当于 routes: routes
     })

     new Vue({
         el:"#app",
         router:router
     })

 </script>