11-Vue基础3

一、组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。组件其实就是一个拥有样式、动画、js逻辑、HTML结构的综合块。

• 如何划分组件

    - 功能模块: select、pagenation...
    - 页面区域划分: header、footer、sidebar...
  

• data必须是函数
  通过 Vue 构造器传入的各种选项大多数都可以在组件里用。data 是一个例外，它必须是函数。

• 单文件组件的使用方式介绍 【项目开发都会是一个文件对应一个组件】
  通过上面我们定义组件的方式，就已经感觉很不爽了，尤其是模板的定义，而且样式怎么处理也没有很好的进行规整。 Vue可以通过Webpack等第三方工具实现单文件的开发的方式。

    // Hello.vue组件
      <template>
          <h3>
              标题: {{str}}
          </h3>
      </template>
      
      <script>
          export default {
              data: function(){
                  return {
                      str: 'hello Vue!'
                  }
              }
          }
      </script>
      
      <style>
          h3{
              text-align: center;
          }
      </style>
  

  <script>
    // App.vue组件中使用Hello.vue组件
    // 导入Hello组件
    import Hello from './components/Hello';
    export default {
      // ...
      components: {  // 局部注册组件
        Hello
      }
    }
  </script>
  

  <template>
     // 使用自定义元素(Hello组件)
    <hello></hello>
  </template>
  

  通过vue-cli脚手架构造项目

• 组件间调用 --- components
  如果要使用某个组件，单纯通过import导入是不行的，还需要通过components进行注册才能使用。

    // App.vue中
  
    // 导入组件
    import Header from './header'  
    import Footer from './footer'  
  
    new Vue({
      // 组件需要注册之后才能使用
      components:{
        Header, Footer
      }
    })
  
    // 在App.vue中
    <header></header>
    <footer></footer>
  

• 组件间通信 --- props (父组件给子组件传参)
  组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的 props 选项。

    // header.vue 子组件
    new Vue({
      props: ['message'],  // 不同组件中的数据操作()
      methods: {
        doThis: function(){  // 子组件获取到父组件传递的参数this.message
          console.log(this.message);
        }
      }
    })
  

    // props可以其他写法
  props:{
      seller:{  // 即是设置接收参数的数据类型
        type: Object,  // 参数的类型
        // default 是设置默认值的
      }
   }
  

    // app.vue 父组件
    // 将字符串内容'hello world!'传递给子组件
    <header message='hello world!'></header>
  
    // 绑定data属性值
    // <header :message='title'></header> 
  

• 组件间通信 --- 自定义事件(子组件给父组件传参)

    // app.vue 父组件
    
    // 自定义事件v-on: child-tell-me, 事件名为'child-tell-me'
    <component-b v-on:child-tell-me='getMsg'></component-b>
  
    new Vue({
      // ...
      methods: {
        // 'child-tell-me'对应触发的方法，即父组件获取子组件传递的参数msg
        getMsg: function(msg){  
          console.log(msg)
        }
      }
  })
  

    // footer.vue 子组件
      new Vue({
      // ...
      methods: {
        // 在sendMsg方法中，即触发'child-tell-me'方法，并传递参数
        sendMsg: function(msg){  
          this.$emit('child-tell-me', '你收到我发送的消息了吗?【componentB】')
        }
      }
  })
  

六、Vue路由

对于前端来说，其实浏览器配合超级连接就很好的实现了路由功能。但是对于单页面应用来说，浏览器和超级连接的跳转方式已经不能适用， 所以各大框架纷纷给出了单页面应用的解决路由跳转的方案。
Vue框架的兼容性非常好，可以很好的跟其他第三方的路由框架进行结合。当然官方也给出了路由的方案：vue-router; 建议还是用官方的最好，使用量也是最大，相对来说Vue框架的升级路由组件升级也会及时跟上，所以为了以后的维护和升级方便还是使用Vue自家的东西最好。

• vue-router的安装使用
  1.CDN连接方式

  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  

  2.npm 安装

  npm install vue-router
  

• vue-router 入门

    1.引入vue和vue-router(如果配合npm和webpack的话可以直接作为一个模块导入即可)
      import VueRouter from 'vue-router'
      Vue.use(VueRouter)
    
    2.定义路由跳转的组件(或导入组件)
      var Foo = { template: '<div>foo</div>' }
      var Bar = { template: '<div>bar</div>' }
    
    
    3.定义路由规则对象
      // 每个路由path应该映射一个组件
      var routes = [
          {path: '/foo', component: Foo},
          {path: '/Bar', component: Bar}
      ];
  
    4.创建路由器对象
      // 创建 router 实例，然后传 `routes` 配置
      var router = new VueRouter({
          routes, 
          // 选中后的类名 (默认值是router-link-active)
          linkActiveClass: 'active'
      })
  
    5.创建和挂载根实例
      const app = new Vue({
          router
      }).$mount('#app');
  
    6. 模板中编写路由跳转链接
      <div id="app">
            <p>
                <!-- 使用 router-link 组件来导航. -->
                <!-- 通过传入 `to` 属性指定链接. -->
                <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
                <router-link to="/foo">Go to Foo</router-link>
                <router-link to="/bar">Go to Bar</router-link>
            </p>
            <!-- 路由出口 -->
            <!-- 路由匹配到的组件将渲染在这里 -->
            <router-view></router-view>
      </div>