<div v-if="flag" >
        <div id="showDiv">
            我显示出来了
        </div>
      </div>
      <!-- 否则显示圆形的 div -->
      <div v-else>
        <div id="showBuleDiv"><span style="color:white">哈哈</span></div>
      </div>

<div id="app2">
    <!-- 如果要使用 props 来传递对象，就要使用 v-bind  -->
    <!-- 注意：在这里 age 在 props 中规定了要传入数字类型，这里传入 String 是为了演示效果，正式中使用要按照 age=100 来传入 -->
    <mycomponent
      message="你好"
      :mydata="{username:'tigerchain',age:28}"
      name-style="color:red"
      age="100"
      :clickme="show"
      />
</div>

    // 定义一个组件
    var myComponent = Vue.extend({

      // 定义 props 就是一些默认值
      props: {
        message:"",
        mydata:{},
        //样式 ，如果这里使用驼峰标识 ，则在标签中使用就要使用 name-style 传递
        nameStyle:{},
        // 这里规定传递过来的数据必须是数字，否则后台会报警告
        age: Number,
        clickme:{
          type:Function
        }
      },

      data(){
        return {
          // 可以在数据里面将 props 值赋给 data 值，然后就可以修改这个值，但是原始的 props 中的值是修改不了的
          msg:this.message
        }
      },

      template: '<div>'+
                  '{{ message }}--{{msg}}'+
                  '<div>'+
                     '<span v-bind:style="nameStyle" @click="clickme()">{{ mydata.username}} {{this.age}}</span>'+
                     '<button @click="clickme(msg)">点击我</button>'+
                  '</div>'+
                ' </div>'
    })


    // 全局注册组件 组件的别名要是小写，否则会报错
    Vue.component('mycomponent', myComponent)

    var vm2 = new Vue({
      el:'#app2',
      methods: {
        show(msg) {
          // return () =>{
            if(msg){
              alert('带回调的参数是：'+msg)
            }else {
              alert('没有带参数回调')
            }

            // console.log(this,arguments)
          // }
        }
      }
    })

 https://www.baidu.com#/login

var routerObj = new VueRouter ({
    routes: [
        { path: '/login', component: login }
    ]
})