vue.js - 事件 - 表单 - 组件 - slot分布 基础

vue — 事件处理

什么是事件

用户操作页面的一些行为或者是浏览器自己的一些行为被称之为事件。

绑定（监听）事件

事件监听(绑定)通过： v-on  指令：

v-on

<div id="app">
  <button v-on:click="counter += 1">增加 1</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
 
<script>
    new Vue({
      el: '#app',
      data: {
        counter: 0
      }
    })
    </script>

方法处理器

可以用v-on指令监听DOM事件。

<div id="example">
  <button v-on:click="greet">Greet</button>    //绑定了一个单击事件处理器到一个方法greet
</div>

我们绑定了⼀个单击事件处理器到⼀个⽅法 greet。下⾯在 Vue 实例中定义这个⽅法：

<script>        
    var vm = new Vue({
      el: '#example',
      data: {
        name: 'Vue.js'
      },
      // 在 `methods` 对象中定义方法
      methods: {
        greet: function (event) {
          // 方法内 `this` 指向 vm
          alert('Hello ' + this.name + '!')
          // `event` 是原生 DOM 事件
          alert(event.target.tagName)
        }
      }
    })
     
    // 也可以在 JavaScript 代码中调用方法
    vm.greet() // -> 'Hello Vue.js!'
</script>

内联语句处理器

<div id="example-2">
 <button v-on:click="say('hi')">Say Hi</button>
 <button v-on:click="say('what')">Say What</button>
</div>

new Vue({
 el: '#example-2',
 methods: {
 say: function (msg) {
  alert(msg)
 }
 }
});

有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法

<button v-on:click="say('hello!', $event)">Submit</button>
 methods: {
 say: function (msg, event) {
 // 现在我们可以访问原生事件对象
 event.preventDefault()
 }
};

事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 
event.stopPropagation()。

Vue.js通过由点(.)表示的指令后缀来调用修饰符。

• .stop

• .prevent

• .capture

• .self

• .once

• .prevent和.stop，让方法是纯粹的数据逻辑而不处理DOM事件细节。

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat">

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件侦听器时使用 capture 模式 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名：

• .enter

• .tab

• .delete (捕获 "删除" 和 "退格" 键)

• .esc

• .space

• .up

• .down

• .left

• .right

• .ctrl

• .alt

• .shift

• .meta

实例：

<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

vue — 表单输入绑定

基础语法

可以用 v-model 指令在表单控件元素上创建双向数据绑定。

v-model 会根据控件类型自动选取正确的方法来更新元素。

checkbox

   单个勾选框，逻辑值：

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>//显示勾选状态，false或true

    多个勾选框，绑定到同一个数组：

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>

<span>Checked names: {{ checkedNames | json }}</span>
new Vue({
  el: '...',
  data: {
    checkedNames: []
  }
})

radio

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<span>Picked: {{ picked }}</span>

var vm = new Vue({
    el : "#app",
    data:{
       picked:''
    }
})

select

   单选：

<select v-model="selected">
  <option selected>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Selected: {{ selected }}</span>

   多选（绑定到一个数组）：

<select v-model="selected" multiple>
  <option selected>A</option>
  <option>B</option>
  <option>C</option>
</select>
<br>
<span>Selected: {{ selected | json }}</span>

绑定value

   对于单选按钮，勾选框及选择框选项，v-model 绑定的 value 通常是静态字符串（对于勾选框是逻辑值）：    

<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">
<!-- 当选中时，`selected` 为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

   但是有时我们想绑定 value 到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。
   

checkbox

<input
  type="checkbox"
  v-model="toggle"
  v-bind:true-value="a"
  v-bind:false-value="b">
// 当选中时
vm.toggle === vm.a
// 当没有选中时
vm.toggle === vm.b

radio

<input type="radio" v-model="pick" v-bind:value="a">
// 当选中时
vm.pick === vm.a

select options

<select v-model="selected">
  <!-- 对象字面量 -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>
// 当选中时
typeof vm.selected // -> 'object'

vm.selected.number // -> 123 
      

修饰符

.lazy

在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

.number

如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：

<input v-model.number="age" type="number">

这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。

.trim

如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：

<input v-model.trim="msg">

vue — 组件通信

组件可以扩展HTML元素，封装可重用的代码，在较高的层面上，组件是自定义元素，vue.js的编译器为它添加特殊功能，在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。

Vue.js的组件可以理解为预先定义好了行为的ViewModel类。一个组件可以预定义很多选项，但最核心的是以下几个：

• 模板（template）：模板声明了数据和最终展现给用户的DOM之间的映射关系。

• 初始数据（data）：一个组件的初始数据状态。对于可复用的组件来说，这通常是私有的状态。

• 接受的外部参数(props)：组件之间通过参数来进行数据的传递和共享。参数默认是单向绑定（由上至下），但也可以显式地声明为双向绑定。

• 方法（methods）：对数据的改动操作一般都在组件的方法内进行。可以通过v-on指令将用户输入事件和组件方法进行绑定。

• 生命周期钩子函数（lifecycle hooks）：一个组件会触发多个生命周期钩子函数，比如created，attached，destroyed等等。在这些钩子函数中，我们可以封装一些自定义的逻辑。和传统的MVC相比，可以理解为 Controller的逻辑被分散到了这些钩子函数中。

• 私有资源（assets）：Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。由于全局注册资源容易导致命名冲突，一个组件可以

1 . 创建一个组件构造器：

var MyComponent = Vue.extend({
    //选项
})

2.将构造器用做组件，用Vue.component(tag,constructor)注册：

Vue.component('my-component',MyComponent)

3.在父实例的模块中以自定义元素<my-component>的形式使用：

<div id = "example">
    <my-component></my-component>
</div>

例子：

<div id="example">
  <my-component></my-component>
</div>
// 定义
var MyComponent = Vue.extend({
  template: '<div>A custom component!</div>'
})
// 注册
Vue.component('my-component', MyComponent)
// 创建根实例
new Vue({
  el: '#example'
})

渲染为：

<div id = "example">
    <div>A custom component!</div>
</div>

    组件的模板替换了自定义元素，自定义元素的作用只是作为一个挂载点。可以用实例选项 replace 决定是否替换。
    

Props

使用props传递数据

组件实例的作用域是孤立的，可以使用props把数组传给子组件，props是组件数据的一个字段，期望从父组件传下来，子组件需要显式地用props选项声明props：

Vue.component('child', {
  // 声明 props
  props: ['msg'],
  // prop 可以用在模板内
  // 可以用 `this.msg` 设置
  template: '<span>{{ msg }}</span>'
})        

然后向它传入一个普通字符串：

<child msg="hello!"></child>

动态props

    用v-bind绑定动态props到父组件的数据，每当父组件的数据变化时，也会传导给子组件：

<div>
  <input v-model="parentMsg">
  <child v-bind:my-message="parentMsg"></child>
//<child :my-message="parentMsg"></child>
</div>

props绑定类型

   prop默认是单向绑定，当父组件的属性变化时，将传导给子组件，但是反过来不会，这是为了防止子组件无意修改了父组件的状态，可以使用.sync或.once绑定修饰符显式地强制双向或单次绑定：

<!-- 默认为单向绑定 -->
<child :msg="parentMsg"></child>
<!-- 双向绑定 -->
<child :msg.sync="parentMsg"></child>
<!-- 单次绑定 -->
<child :msg.once="parentMsg"></child>

   如果 prop 是一个对象或数组，是按引用传递。在子组件内修改它会影响父组件的状态，不管是使用哪种绑定类型。

父子组件通信

父链

   子组件可以用this.$parent访问它的父组件，根实例的后代可以用this.$root访问它，父组件有一个数组this.$children，包含它所有的子元素

自定义事件

   Vue实例实现了一个自定义事件接口，用于在组件树中通信，这个事件系统独立于原生DOM事件，用法也不同，每一个Vue实例都是一个事件触发器：

• 使用 $on() 监听事件；

• 使用 $emit() 在它上面触发事件；

• 使用 $dispatch() 派发事件，事件沿着父链冒泡；

• 使用 $broadcast() 广播事件，事件向下传导给所有的后代。

     不同于 DOM 事件，Vue 事件在冒泡过程中第一次触发回调之后自动停止冒泡，除非回调明确返回 true。 

<!-- 子组件模板 -->
<template id="child-template">
  <input v-model="msg">
  <button v-on:click="notify">Dispatch Event</button>
</template>
 
<!-- 父组件模板 -->
<div id="events-example">
  <p>Messages: {{ messages | json }}</p>
  <child></child>
</div>
// 注册子组件
// 将当前消息派发出去
Vue.component('child', {
  template: '#child-template',
  data: function () {
    return { msg: 'hello' }
  },
  methods: {
    notify: function () {
      if (this.msg.trim()) {
        this.$dispatch('child-msg', this.msg)
        this.msg = ''
      }
    }
  }
})
 
// 初始化父组件
// 将收到消息时将事件推入一个数组
var parent = new Vue({
  el: '#events-example',
  data: {
    messages: []
  },
  // 在创建实例时 `events` 选项简单地调用 `$on`
  events: {
    'child-msg': function (msg) {
      // 事件回调内的 `this` 自动绑定到注册它的实例上
      this.messages.push(msg)
    }
  }
})             

使用v-on绑定自定义事件

    在模板中子组件用到的地方声明事件处理器，为此子组件可以用v-on监听自定义事件：

<child v-on:child-msg="handleIt"></child>

   当子组件触发了 "child-msg" 事件，父组件的 handleIt 方法将被调用。所有影响父组件状态的代码放到父组件的 handleIt 方法中；子组件只关注触发事件。

子组件索引

使用v-ref为子组件指定一个索引ID，可以直接访问子组件

<div id="parent">
  <user-profile v-ref:profile></user-profile>
</div>
var parent = new Vue({ el: '#parent' })
// 访问子组件
var child = parent.$refs.profile

使用Slot分发内容

   内容分发：混合父组件的内容与子组件自己的模板的方式，使用特殊的<slot>元素作为原始内容的插槽。

编译作用域

   父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。
   
   绑定子组件内的指令到一个组件的根节点：

Vue.component('child-component', {
  // 有效，因为是在正确的作用域内
  template: '<div v-show="someChildProperty">Child</div>',
  data: function () {
    return {
      someChildProperty: true
    }
  }
})

   类似地，分发内容是在父组件作用域内编译。

单个slot

   父组件的内容将被抛弃，除非子组件模板包含<slot>，如果子组件模板只有一个没有特性的slot，父组件的整个内容将插到slot所在的地方并替换它。
   <slot> 标签的内容视为回退内容。回退内容在子组件的作用域内编译，当宿主元素为空并且没有内容供插入时显示这个回退内容。
   假定 my-component 组件有下面模板：

<div>
  <h1>This is my component!</h1>
  <slot>
    如果没有分发内容则显示我。
  </slot>
</div>

父组件模板：

<my-component>
  <p>This is some original content</p>
  <p>This is some more original content</p>
</my-component>

渲染结果：

<div>
  <h1>This is my component!</h1>
  <p>This is some original content</p>
  <p>This is some more original content</p>
</div>

具名slot

   <slot>元素可以用一个特殊特性name配置如何分发内容，多个slot可以有不同的名字，具名slot将匹配内容片段中有对应slot特性的元素。
   仍然可以有一个匿名 slot，它是默认 slot，作为找不到匹配的内容片段的回退插槽。如果没有默认的 slot，这些找不到匹配的内容片段将被抛弃。
   
   
   
   
       ……  ( 待更新 )