vue基础学习记录（一）

vue实例化对象里的属性

对象	说明
el	element 需要获取的元素，一定是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 更高