vue-2(事件处理、表单绑定、组件)

继上一篇博客这边继续补充基础内容加强一下记忆

• 监听事件
  v-on指令去监听DOM事件，后面可以接事件类型,如下案例

  <div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
  </div>
  <script>
  new Vue({
     el: '#example-3',
     methods: {
         say: function (message) {
             alert(message)
         }
     }
  })
  </script>  
  

  事件绑定同样也附着很多其他功能
  
  同理可以推得键盘事件的相关操作
• 表单绑定
  v-model实现表格value与对象数据的双向绑定,这样我们就能实现响应式的获取到表单中的值，小编这边只列举了文本框做一个简介，还有一些用法可以在连接中查看https://cn.vuejs.org/v2/guide/forms.html

   <div class="test" v-bind:style= "styleObject">
       <input v-model="message" placeholder="edit me">
       <p>Message is: {{ message }}</p>
   </div>
   <script>
       let vm = new Vue({
           el: '.test',
           data: {
               size: 10,
               message:"",
               styleObject: {
                   backgroundColor: 'white',
                   width: this.size + 'px',
                   height: this.size + 'px'
               }
           }
       })
   </script>
  

• 组件
  vue允许我们自定义组件
  例：

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
 data: function () {
   return {
     count: 0
   }
 },
 template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

那么在DOM中我们可以直接只用我们所定义的组件他所代表的就是我们在vue中所定义的标签，组件复用时我们所用的data对象值必须以函数形式返回。
关于组件更多的用法小编这边就不一一描述可以参考一下文档https://cn.vuejs.org/v2/guide/components.html