vue 组件，props 属性 ，Vue 生命周期

本文涉及3个内容：

1.vue  组件：

目录结构：

源码分析如下：

  <div id="container">
    <h3>爱吃什么水果？ app 实例</h3>
      <ol>
        <todolist
        ></todolist>
      </ol>
  </div>

  <div id="container2">
    <h3>爱吃什么水果？ app2 实例</h3>
      <ol>
        <todolist
        ></todolist>
      </ol>
  </div>

  <div>
    <h3>爱吃什么水果？</h3>
    组件没有在任何实例中，所以不显示 <font color="red">「组件一定要挂载到某个 Vue 实例中，否则不会生效」</font>
      <ol>
        <todolist
        ></todolist>
      </ol>
  </div>

界面显示字段:

组件一定要挂载到某个 Vue 实例中, 这里更新代码如下：

定义一i个vue 实例，将组件挂载到实例上去。组件构造器和vue 实例非常相似。

这里构建了如下构造器：

 var todolist = Vue.extend({
      template:'<div><li v-for="(item,index) in datas" @click="showName(index)">{{item.text}}</li> <br/><child></child></div>',
      data() {
        return {
          datas:[
           { id: 0, text: '苹果' },
           { id: 1, text: '香蕉' },
           { id: 2, text: '只要是水果我都爱吃' }
         ]
        }
      },
      methods:{
        showName(index){
          alert(this.datas[index].text)
        }
      },
      components: {
        'child': child
      }
    })

效果可由vue debug 视图看到。

2.vue props 属性较为复杂：

2.1 考虑方法：

 <div id="container">
    <button v-bind:class="{bg:isShowbgStyle}" @click="testDataFun">在 data 调用 testDataFun 方法</button>
    <button v-bind:class="{bg:isShowbgStyle}" @click="testDataFun()">在 data 调用 testDataFun() 方法</button>
    <button v-bind:class="{bg:isShowbgStyle}" @click="testDataFun('msg',$event)">在 data 调用 testDataFun(参数，事件) 方法</button>
    <button v-bind:class="{bg:isShowbgStyle}" @click="testInMethodsFun">在 methods 调用 testInMethodsFun 方法</button>
    <button v-bind:class="{bg:isShowbgStyle}" @click="testInMethodsFun()">在 data 调用 testInMethodsFun() 方法</button>
    <button v-bind:class="{bg:isShowbgStyle}" @click="testInMethodsFun('msg',$event)">在 data 调用 testInMethodsFun(参数，事件) 方法</button>
  </div>

  <script>
    var vm = new Vue({
      el:"#container",
      data:{
        isShowbgStyle:true,
        testDataFun(){
          console.log(this,arguments)
        }
      },
      methods: {
        testInMethodsFun() {
          console.log(this,arguments)
        }
      }
    })
  </script>

vue 中的方法可以看到vue 有不同的浏览器去解析。控制台显示。

考虑2：vue  propertes:

定义1个组件:

 // 定义一个组件
    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)
          // }
        }
      }
    })

考虑3，生命周期：

在如下demo 中演示了vue 生命周期限制：

    beforeCreate(){
        console.group("%c%s","color:red",'beforeCreate--实例创建前状态')
        console.log("%c%s","color:blue","el  :"+this.$el)
        console.log("%c%s","color:blue","data  :"+this.$data)
        console.log("%c%s","color:blue","msg  :"+this.msg)
      },
      created() {
        console.group("%c%s","color:red",'created--实例创建完成状态')
        console.log("%c%s","color:blue","el  :"+this.$el)
        console.log("%c%s","color:blue","data  :"+this.$data)
        console.log("%c%s","color:blue","msg  :"+this.msg)
      },
      beforeMount() {
        console.group("%c%s","color:red",'beforeMount--挂载之前的状态')
        console.log("%c%s","color:blue","el  :"+this.$el)
        console.log(this.$el);
        console.log("%c%s","color:blue","data  :"+this.$data)
        console.log("%c%s","color:blue","msg  :"+this.msg)
        console.log("%s%o","document.getElementById('container'): ",document.getElementById('container'))
      },

效果如图所示：

考虑4： 页面跳转路由：

页面跳转路由：

h5 路由方式：

  function home() {
      // 添加到历史记录栈中
      history.pushState({name:'home',id:1},null,"?page=home#index")
      showCard('home')
    };

    function message() {
      history.pushState({name:'message',id:2},null,"?page=message#haha")
      showCard('message')
    }

    function mine(){
      history.pushState({
        id:3,
        name:'mine'
      },null,"?name=tigerchain&&sex=man")
      showCard('mine')
    }

通过监听h5 的路由方式执行，

内置全局路由实现：

 // 创建 router 实例
  const router = new VueRouter({
    routes // 就相当于是 routes:routes
  })

  // 创建 Vue 并挂载，并且注册路由，这样 container 下都有路由功能
  var vm = new Vue({
    el:'#container',
    router
  })

申明路由规则：

// 声明路由规则
  const routes = [
    //给一个默认的路由，默认显示 Main 组件
    {
      path:'/',component:Main
    },
    {
      path:'/main',component:Main
    },
    {
      path:'/message',component:Message
    },
    {
      path:'/mine/:id',component:Mine
    }
  ]

然后定义3个组件相互完成。