vue.js 组件例子1 | 码农工具

​x
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
</head>
<body>
    <div id="example">
      <my-component></my-component>
    </div>
    <div id="example2">
      <child my-message="hello!"></child>
  </div>
  <br>
  <div id="example3">
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
  </div>
  <br>
  <div id="example4">
      <input v-model="parentMsg">
      <br>
      <child2 :my-message="parentMsg"></child2>
  </div>
  <br>
  <div id="example5">
      <input v-model="parentMsg">
      <br>
      <child3 :prop-a="parentMsg"></child3>
  </div>
  <br>
  <div>
    自定义事件
  </div>
  <div id ="example6">
    <p>
      {{total}}
    </p>
    <button-counter v-on:increment="incrementTotal"></button-counter>
    <button-counter v-on:increment="incrementTotal"></button-counter>
    <!-- 这里的increment是事件名？-->
  </div>
</body>
</html>

HTML

xxxxxxxxxx
 
Vue.component('my-component',{
  template:'<div>a custom component!</div>'
})
new Vue({
  el:'#example'
})
Vue.component('child',{
  props:['myMessage'],
  template:'<span>{{myMessage}}</span>'
})
new Vue({
  el:'#example2'
})
Vue.component('simple-counter',{
  template:'<button @click="counter +=1">{{counter}}</button>',
  data:function(){
  return {counter:0}
}
})
new Vue({
  el:'#example3'
})
Vue.component('child2',{
  props:['myMessage'],
  data:function(){
    return {
      counter:this.myMessage
    }
  },
  computed:{
    normalizedSize:function(){
      return this.myMessage.trim().toLowerCase()
    }
  },
  //Prop 作为初始值传入后，子组件想把它当作局部数据来用，所以定义一个局部变量，并用 prop 的值初始化它，这时当prop值改变后，局部变量不会随着更新，还是初始化时的值
//Prop 作为原始数据传入，由子组件处理成其它数据输出。比如，定义一个计算属性（或者方法），处理 prop 的值并返回，结果都是同步更新的。
  template:'<div><span>{{myMessage}}</span>'
        +'<br><span>counter:{{counter}}</span>'
        +'<br><span>normalizedSize:{{normalizedSize}}</span>'
        +'</div>',
})
new Vue({
  el:'#example4',
  data:{
    parentMsg:'Hello?'
  }
})
Vue.component('child3',{
  props:{
    propA:Number,//不符合类型，仍然显示了，？
    //propB:[Number,String],
  },
  //props:[propA], 
  template:'<div><span>{{propA}}</span> </div>'
})
new Vue({
  el:'#example5',
  data:{
    parentMsg:'Hello'
  }
})
Vue.component('button-counter',{
  template:'<button v-on:click="incrementCounter">{{counter}}</button>',
  data:function(){
    return {
      counter:0
    }
  },
  methods:{
  incrementCounter:function(){
  this.counter+=1
    this.$emit('increment')
}
}
})
new Vue({
  el:"#example6",
  data:{
    total:0
  },
  methods:{
    incrementTotal:function(){
      this.total+=1
    }
  }
})

JavaScript