SOURCE

console 命令行工具 X clear

                    
>
console
Vue.component('testbtn', {
  data: function() {
    return {
      count: 0
    }
  },
  props:{
    	name:{
        type:String,
        default:100
      },
    	colorTheme:String,
    	placeholder:{
    		type:String,
        default:'请输入您的姓名'
  		}
  	},
  template: "<div><button :class='colorTheme' @click='test'>点击了{{count}}次</button><p>子组件内显示的内容:{{name}}</p><input :placeholder='placeholder'></div>",
  methods:{
    test:function(){
      this.count++;
      //2.3版本新增功能 子组件修改父组件的基本类型数据需要添加sync并且格式如下
      this.$emit('update:name','新丝绸之路'+this.count)
    }
  }
})

var x = new Vue({
  el: '#app',
  data: {
		title:'一带一路'
	},
  methods:{
    dothis:function(a){
      console.log(a.flag)
    }
  }
})
<div id="app">
  {{title}}
  <testbtn :name.sync='title' color-theme='green' @on-click='dothis' placeholder='请输入你的年龄'></testbtn>
</div>
#app{color:#fff}
.red{color:red}
.blue{color:blue}
.green{color:green}

本项目引用的自定义外部资源