Vue笔记-列表渲染、事件处理、组件

目录

列表渲染（v-for的应用）

基本列表分组循环

事件处理

v-on

组件

组件注册

父子组件通信与插槽实例

---

列表渲染（v-for的应用）

注意：

由于 JavaScript 的限制，Vue 不能检测以下数组的变动：

当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue

当你修改数组的长度时，例如：vm.items.length = newLength

解决：

// Vue.set

Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice

vm.items.splice(indexOfItem, 1, newValue)

基本列表分组循环

<!-- v-for演示 ,

key的作用主要是为了高效的更新虚拟DOM:

根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素，list:['a','b','c','d']-->

<ul>

<li v-for="(item,index) in list" :key="item">

{{item}},{{index}}

</li>

</ul>

<!-- v-for分组演示 -->

<ul>

<template v-for="item in list">

<li :key="item+1">hello</li>

<li :key="item">{{item}}</li>

</template>

</ul>

 

事件处理

v-on

作用：将事件监听器附加到元素。事件类型由参数表示。表达式可以是方法名或内    联语句，也可以在有修饰符时省略。

在普通元素上使用时，它只监听本机DOM事件。当在自定义元素组件上使     用时，它还侦听在该子组件上发出的自定义事件。

当侦听本机DOM事件时，该方法将本机事件作为惟一的参数接收。如果使     用内联语句，该语句可以访问特殊的$event属性:v-on:click="handle('ok'，         $event)"。

事件修饰符：

<!-- 阻止单击事件继续传播 -->

<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>

<!-- 添加事件监听器时使用事件捕获模式 -->

<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->

<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->

<!-- 即事件不是从内部元素触发的 -->

<div v-on:click.self="doThat">...</div>

按键修饰符：

https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6

鼠标按钮修饰符：

https://cn.vuejs.org/v2/guide/events.html#%E9%BC%A0%E6%A0%87%E6%8C%89%E9%92%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6

注：原始代码：events.vue.

组件

 

组件注册

https://cn.vuejs.org/v2/guide/components-registration.html

例：

import com from './components/com.vue'

在components中加入“com”,并在template中加<com/>

父子组件通信与插槽实例

(age为父到子，$emit为通过事件从子到父)

子组件关键代码：

<template >

<div class="com">

<slot name="a"></slot>

child components

{{name}}{{age}}

<!-- $emit:在当前实例上触发事件。任何附加的参数都将被传递到监听器的回调函数中。 -->

<button type="button" name="button" @click="$emit('patch',11)">发送给父组件</button>

<slot name="b"></slot>

</div>

</template>

<script>

export default {

props:['age'],

data() {

return {

name:'com'

}

},

}

</script>

父组件关键代码：

template部分

<com :age="age" @patch='msg'>

<p slot="a">上面</p>

<p slot="b">下面</p>

</com>

script部分

components: {

HelloWorld,

ev,

com

},

data() {

return {

age:180

}

},

methods: {

msg:function (ag) {

this.age++;

window.console.log(ag);

}

}