初学VUE前端框架(二)

七、计算属性

计算属性关键词: computed。计算属性主要用在处理一些复杂逻辑。如图所示7-1

7.1 computed vs methods

1.computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
2.使用 computed 性能会更好，但是如果不希望缓存，可以使用 methods 属性。

八、事件处理

v-on指令可以在触发事件传递参数，v-on有以下事件修饰符，都是使用点开头的后缀
.stop .prevent .capture .self .once .passive。如图所示8-1

v-on指令可以使用所有js的绑定事件。

<!-- 阻止单击事件冒泡 -->
<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>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

九、表单输入绑定

使用 v-modelv-model指令，对输入框，文本框，复选框，单选框等进行操作，所获取数据的方式原理一样，但复选框checkbox可能选中多个元素，使用数组对已选中的值进行数据保存。对默认值的设定，可以通过改变data对象属性。如事例图9-1所示

十、组件应用

10.1、组件基础

10.2、组件注册

Vue.component（）函数，第一个参数被称为组件名， 命名方式通过短横线分隔命名和驼峰命名法。如事例图10-2所示

小编在CSDN写文章,想记录自己学到的知识点,有不足之处还请各位大佬多多指教,十分感谢哈! ! !