vue基础学习记录（一）

vue实例化对象里的属性

对象说明elelement 需要获取的元素，一定是html中的根容器元素data用于数据存储methods用于存储各种方法computed用于存储计算属性

基础

常用的指令

v-bind

<!-- 完整语法 --> <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="url">...</a>

v-on

<!-- 完整语法 --> <a v-on:click="doSomething">...</a> <!-- 缩写 --> <a @click="doSomething">...</a>

事件

点击，双击和鼠标事件

指令说明@click=""绑定单击事件@dblclick=""绑定双击事件@mousemove=""绑定鼠标移动事件

键盘事件及键值修饰符

事件修饰符

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

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

.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> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis">...</div> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div>

按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> <input v-on:keyup.enter="submit"> .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right

双向数据绑定

<input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p>

计算属性Computed

当变化幅度比较大的时候才会用到计算属性。

动态绑定CSS样式

我们可以绑定一个返回对象的计算属性。这是一个常用且强大的模式：

HTML：

<div v-bind:class="classObject"></div>

JS:

data: { isActive: true, error: null }, computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal' } } }

指令 v-if

v-if 指令用于条件性地渲染一块内容

<h1 v-if="awesome">Vue is awesome!</h1>

也可以用 v-else 添加一个“else 块”：

<h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>Oh no ?</h1>

注意：v-if和v-show的区别：带v-show的属性会存在占位符，不显示的时候是display：none的状态

指令 v-for

用法：

<div v-for="item in items"> {{ item.text }} </div>

另外也可以为数组索引指定别名 (或者用于对象的键)：

<div v-for="(item, index) in items"></div> <div v-for="(val, key) in object"></div> <div v-for="(val, name, index) in object"></div>

你也可以利用带有 v-for 的 <template> 来循环渲染一段包含多个元素的内容。

比如：

<template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider" role="presentation"></li> </template>

左图是div作为容器的循环结果，右图是用<template>做容器循环的结果 用<template>做容器不会产生每个循环项都有父级元素包裹的情况!

注意：当和 v-if 一起使用时，v-for 的优先级比 v-if 更高