console 命令行工具 X clear

console

Vue.component('base-input', {
  props: ['label', 'value'],
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"
      >
    </label>
  `,
  mounted(){
      console.log(this.$attrs)
  }
})
var app = new Vue(
    {
        el:'#app',
        data:{
            msg:'aa',
            someObject:{},
            myStyleObject:{
                height:'100px',
                width:'100px',
                'background-color':'red',
                'backgroundColor':'blue'
            },
            message:''
        },
        mounted:function(){
            setTimeout(()=>{
                this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
                this.msg={}
                this.msg.a='aaa'
                this.msg.b='bbb'
                setTimeout(()=>{
                  
                    this.msg.b='ccc'
                    console.log(this.msg)
                     this.someObject.a=0
                },1000)
            },1000)
            
        },
        computed:{
           
        }
    }
)

<div id="app">
   <div v-html="msg">aaaaa</div> 
  <div>{{someObject}}</div>
   <div class='aaa'>
        <div  class="bbb"></div>
   </div>
   <span>Multiline message is:</span>
<p style="white-space: pre-wrap;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
<base-input title1="My journey witqh Vue"></base-input>
</div>

.aaa{
    height: 100px;
    background-color: red;
    padding:100px;
    position: relative;
}
.bbb{
    position: absolute;
    height: 10px;
    width: 100%;
    background-color: blue;
}

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

vue.js