事件处理

监听事件：用v-on 来监听DOM事件，并在触发时执行一些JS语句
然而有很多操作逻辑很复杂，就不能把大量语句写在v-on指令中了，需要在v-on后面接一个方法名

直接接js操作
<div id="demo">
    <p>已经按了{{counter}}次</p>
    <button v-on:click="counter++">点击</button>
  </div>

接方法名
  <div id="demo2">
    <button v-on:click="great">Greet</button>
  </div>

除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：

<button v-on:click="say('hi')">Say hi</button>

---

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

.stop
.prevent
.capture
.self
.once
.passive

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

添加事件监听器时使用事件捕获模式
即元素自身触发的事件先在此处理，然后才交由内部元素进行处理
<div v-on:click.capture="doThis">...</div>

只当在 event.target 是当前元素自身时触发处理函数
即事件不是从内部元素触发的
<div v-on:click.self="doThat">...</div>

按键修饰符

按键别名
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

---

使用 v-on 有几个好处：

扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。

因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。

当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。

---

---

---

表单输入绑定

用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。其实是语法糖！
表单输入绑定用的时候再看

---

组件基础

简单的组件案例

<div id="demo">
      <item></item>>
    </div>


    <script>
      Vue.component('item',{
        data:function(){
          return {
            count:0
          }
        },
        template:`<button v-on:click="count++">你已经点了{{count}}次</button>`
      })

      new Vue({
        el:'#demo'
      })
    </script>

因为组件是可以复用的Vue实例，所以与new Vue接收相同的选项，例如data、computed、watch、methods以及生命周期钩子等，仅有的例外是像el只有根实例才有

组件的复用

<div id="demo">
    <item></item>>
    <item></item>>
    <item></item>>
</div>

image.png

点击按钮时，每个组件都会维护自己的count，因为每用一次组件就会有一个新的实例被创建

---

为什么组件的data必须是一个函数？

data: function () {
return {
count: 0
}
}
因为这样返回的是不同的对象，每个实例可以维护一份被返回对象的独立的拷贝，不这样的话，他们其实还是指向的同一个对象，牵一发动全身

---

通过prop向子组件传递数据

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。

   <uesprops title="hehe"></uesprops>
    <uesprops title="xixi"></uesprops>
    <uesprops title="haha"></uesprops>

 Vue.component('uesprops', {
      props: ['title'],
      template: `<h2>{{title}}</h2>`
    })

image.png

好像组件命名不允许有大写字母

用 v-bind 来动态传递 prop。一开始不清楚要渲染的具体内容，比如从一个 API 获取博文列表的时候，是非常有用的

  
  <li is="uesprops"
       v-for="item in posts"
       v-bind:title="item.title"   
   >
  </li>

 Vue.component('uesprops', {
      props: ['title'],
      template: `<h2>{{title}}</h2>`
    })



    new Vue({
      el: '#demo',
      data: {
        posts: [{
            id: 1,
            title: 'My journey with Vue'
          },
          {
            id: 2,
            title: 'Blogging with Vue'
          },
          {
            id: 3,
            title: 'Why Vue is so fun'
          }
          ]
        }
    })

---

单个根元素

当你遇到这个问题的时候
every component must have a single root element (每个组件必须只有一个根元素)。你可以将模板的内容包裹在一个父元素内，来修复这个问题

<div class="blog-post">
<h3>{{ post.title }}</h3>
<div v-html="post.content"></div>
</div>

---

有的时候组件愈来愈复杂，为每个相关的信息定义一个 prop 会变得很麻烦：像这样

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:title="post.title"
  v-bind:content="post.content"
  v-bind:publishedAt="post.publishedAt"
  v-bind:comments="post.comments"
></blog-post>

需要重构一下这个组件,props直接接收一个对象

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:post="post"
></blog-post>
Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <div v-html="post.content"></div>
    </div>
  `
})

---

通过事件向父组件发送消息

    <div v-bind:style="{fontSize:fontsize+'em'}">
       <blog-post 
      v-for="post in posts" 
      v-bind:key="post.id" 
      v-bind:post="post"
      v-on:enlarge="fontsize+=0.1"
      监听enlarge事件，如果触发了，就执行后面的js语句或者方法
      来处理父组件里的fontsize属性
      >
    </blog-post>

  Vue.component('blog-post', {
      props: ['post'],
      template: `
      <div class="blog-post">
        <h3>{{ post.title }}</h3>
        <button v-on:click="$emit('enlarge')" >变大吧</button>
      监听点击事件，如果监听到了点击，就用$emit（）触发enlarge事件
      </div>
      `
    })

  new Vue({
      el: '#demo',
      data: {
        fontsize:1,
        posts: [{
            id: 1,
            title: 'My journey with Vue',
          },
          {
            id: 2,
            title: 'Blogging with Vue',
          },
          {
            id: 3,
            title: 'Why Vue is so fun',
          }
        ]
      }
    })

使用事件抛出值

即$emit()的第二个参数可以用$event访问到这个被抛出的值

        <button v-on:click="$emit('enlarge',0.1)" >变大吧</button>
        
      <div v-bind:style="{fontSize:fontsize+'em'}">
       <blog-post v-on:enlarge="fontsize+=$event">
    </blog-post>

如果事件处理函数是一个方法，那么$event 将成为函数的第一个参数

    <blog-post  v-for="post in posts" 
                  v-bind:key="post.id" 
                  v-bind:post="post" 
                  v-on:enlarge='enlargeText'>
      </blog-post>

      methods: {
        enlargeText:function(x){
          this.fontsize +=x
        }
      }

---

组件上使用v-model

<input v-model="searchText">
等价于：

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>