<div id="vue">
                <span v-for="item in items">
                  {{ item.name }}
                </span>
                <span v-show="show2" @click="showHide">
                  ( span v-show 02 ....) --> component01
                </span>
                <component01 message="hello" :_show="show"></component01>
            </div>

            <script>
            (function () {
              'use strict';

              Vue.component('component01', {
                props: ['message','_show'],
                template: '<div v-show="_show">A custom component {{message}}! -> {{_show}}</div>'
              });
              var app = new Vue({
                el: '#vue',
                data: {
                  show: true,
                  show2: true,
                  items: [
                    {name: 'aaa'},
                    {name: 'bbb'},
                  ],
                  message: 'ssssssss'
                },
                methods: {
                  showHide: function (){
                    var is = this.show == true;
                    if(is){
                      this.show = false;
                    }else{
                      this.show = true;
                    }
                  }
                },
              });

            }());
            </script>
            

            <div id="react">
            </div>

            <script type="text/babel">

                (function () {
                  'use strict';

                  var _msg = React.createClass({
                    getInitialState: function (){
                      return {show: true};
                    },
                    _click: function (){
                      var dom = this.refs.msgP;
                      var show;
                      if(this.state.show == true){
                        show = false;
                      }else{
                        show = true;
                      }
                      this.setState({
                        show: show
                      });
                      console.log(dom);
                    },
                    render: function() {
                      var style={fontSize:16};
                      var show = this.state.show ? 'show' : 'hide';
                      var className = 'asdf '+this.props.name;
                      return <p ref="msgP" style={{fontSize:16}} data-aa="sadkf" htmlFor={this.props.name} className={'asdf '+this.props.name+' '+this.props.class} onClick={this._click}>( p -> {this.props.name} -> {show} )</p>;
                    }
                  });

                  var data = ['name','name1','name2'];

                  function _click(){
                    console.log('_click');
                  }

                  ReactDOM.render(
                    <div>
                      <_msg name="msgnnn" opactiy=".6" class='p01 p02'/>
                      {
                        data.map(key => {
                          return <span onClick={_click}>{key}</span>
                        })
                      }
                    </div>,
                    document.getElementById('react')
                  );

                }());

            </script>