组件
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。
组件的作用
组件是对特点功能代码(html,css,js)的封装, 通过组件的名字可以重复利用该组件中的代码.
1全局组件
全局组件的语法:
Vue.component("自定义标签的名字",{配置对象})
全局组件的特点:
全局组件可以在任何被挂着的标签中使用.
全局组件的配置对象中必须包含template属性
代码演示
1 <div id="app"> 2 <myform></myform> 3 </div>
1 <!-- script必需使用 type=text/template才可以使用--> 2 <script id="mytemp2" type="text/template"> 3 <form action="" method="post"> 4 名称:<input type="text" name="username" /> <br /> 5 密码:<input type="password" name="password" /> <br /> 6 <input type="submit" value="提交" /> 7 </form> 8 </script> 9 10 <script> 11 12 //全局组件(任何挂载点都可以使用) 13 Vue.component("myform",{ 14 //如果模板内容太多，写在这里会很麻烦 15 template:"#mytemp2" 16 }) 17 18 new Vue({ 19 el:"#app", 20 data:{ 21 message:"你好啊！" 22 } 23 }) 24 25 </script>
局部组件
局部语法:
var app = new Vue({
el: "#app",
data: {},
components : {
"局部组件的名字1" : {组件的配置对象}
"局部组件的名字2" : {组件的配置对象}
}
});
局部组件的特点
局部组件只能够在所挂载的标签中使用.
1 <div id="app"> 2 <myform></myform> 3 </div>
1 <template id="mytemp"> 2 <div>//模板这个是 3 名称:<input type="text" name="username" /> <br /> 4 密码:<input type="password" name="password" /> <br /> 5 <input type="submit" value="提交" @click="say" /> 6 </div> 7 </template> 8 9 <script> 10 11 new Vue({ 12 el:"#app", 13 data:{ 14 15 }, 16 components:{ 17 //只有当前的挂载点使用 18 myform:{ 19 template:"#mytemp", 20 //这个data必需是一个函数 21 data() { 22 return { 23 count: 0, 24 message:"我也是一个中国人" 25 } 26 }, 27 methods:{ 28 say(){ 29 alert("点我啊"); 30 } 31 } 32 } 33 } 34 }) 35 36 </script>
路由
路由是负责将进入的浏览器请求映射到特定的 组件 代码中。 即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源(组件)的映射，通过一个路径的url地址，可以唯一找到一个资源。路由不包含在vue中，是一个插件，需要单独下载。
官方地址：https://router.vuejs.org/zh/
路由的使用
1 <div id="app"> 2 <p> 3 <!-- 4 router-link:路由标签（它就是一个a标签） 5 to="/foo":路径(到哪里云) 6 --> 7 <router-link to="/main">首页</router-link> 8 <router-link to="/singer">歌手</router-link> 9 <router-link to="/hot">热门歌曲</router-link> 10 </p> 11 <!-- 路由出口 --> 12 <!-- 路由匹配到的组件将渲染在这里 --> 13 <router-view></router-view> 14 </div> 15 16 17 <script> 18 19 // 2. 定义路由 20 // 每个路由应该映射一个组件。 其中"component" 可以是 21 // 通过 Vue.extend() 创建的组件构造器， 22 // 或者，只是一个组件配置对象。 23 // 我们晚点再讨论嵌套路由。 24 var routes = [ 25 { 26 path: '/main', 27 component: { 28 template:"<h2>我是主页我怕谁</h2>" 29 } 30 }, 31 { 32 path: '/singer', 33 component: { 34 template:"<h2>我是歌手第5季</h2>" 35 } 36 }, { 37 path: '/hot', 38 component: { 39 template:"<h2>葫芦娃</h2>" 40 } 41 } 42 ] 43 44 //定义一个路由 45 var router = new VueRouter({ 46 routes // (缩写) 相当于 routes: routes 47 }) 48 49 new Vue({ 50 el:"#app", 51 router:router 52 }) 53 54 </script>