vue-学习笔记-基础2

1、计算属性

对于较复杂的逻辑可以使用计算属性

<div id='box'>
	<p>
		<label for="name">名字</label>
		<input type="text" id="name" v-model="name">
	</p>
	<p>
		<label for="age">年龄</label>
		<input type="text" id="age" v-model="age">
	</p>
	<p>{{intro}}</p>
	
</div>
var vm = new Vue({
	el:"#box",
　　	data:{
		age:'',
		name:''
	},
	computed:{
		intro:function(){
			if(this.age && this.name)
			return '你的名字是'+this.name+',今年是'+this.age+'岁～'
		}
	}
});

　　计算属性intro，依赖着age和name，当两个中的任何一个值发生改变，都会导致intro中文字变化。

计算属性 VS 方法

使用方法也能实现，只是计算属性是基于它的依赖进行缓存的。只有它的相关依赖发生改变时才会重新求值。

计算属性 VS watch属性

vue提供一种更通用的方式来观察和响应vue实例上的数据变动 ， watch选项，来相应数据的变化。主要用于在数据变化响应时，执行异步操作或开销较大的操作

2、列表渲染

如同 v-if模板，也可以用带有v-for的<template>标签来渲染多个元素块

当v-for和v-if处于同一节点时，v-for的优先级比v-if更高，这意味着v-if将分别重复运行于每个v-for循环中

vue提供数组方法，所以这些方法也会触发视图更新,改变原数组  push,pop,shift,unshift,splice,sort,reverse

不改变原数组，会返回新数组filter,concat,slice

 由于js的限制，vue不能检测以下变动的数组

(1)、当利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue

　　解决办法：

　　a,   Vue.set(example1.items , indexOfItem , newValue)

　　b,   example1.items.splice(indexOfItem , 1 , newValue)

(2)、当修改数组的长度时，例如：vm.items.length = newLength

　　解决办法：

　　example1.items.splice(newLength)

3、事件处理器

用v-on指令监听DOM事件来触发js

<div id='box'>
	<button @click="n++">点我{{n}}</button>
	<ul>
		<li v-for="item in items" @click="choose(item)">{{item}}</li>
	</ul>
	<div class="outer" @click="color($event);">
		<div class="inner" @click="color($event);"></div>
	</div>
</div>

var vm = new Vue({
	el:"#box",
　　	data:{
		n:0,
		items:['apple','pear','orange','tomato']
	},
	methods:{
		choose:function(i){
			alert('you have choose '+i+' ~');
		},
		color:function(e){
			e.stopPropagation();
			alert(e.currentTarget.className);
		}
	}
});

　如果只是简单的赋值或加减等方法，可以直接写在html中，如果不带参数，直接写绑定方法名即可，带参数就像上面写的一样

如果是要用到原生DOM的event属性，要么像上面一样传参，但一般简单的写法，并且更符合vue的写法是使用事件修饰符

.stop       阻止事件冒泡

.prevent  阻止事件默认行为

.capture   使用事件捕获模式

.self         只有当事件在该元素本身(而不是子元素)触发时有回调

.once       指执行一次

按键修饰符  

　　.enter     .tab     .delete     .esc    .space    .up    .down    .left   .right   .ctrl     .alt     .shift     .meta(不同系统对应不同)

可以通过全局config.keyCodes对象自定义按键修饰符别名

例如：  Vue.config.keyCodes.f1 = 112

当一个viewModel被销毁时，所有的事件处理器都会自动被删除

4、表单控件绑定

　　v-model指令在表单控件元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法更新元素.

　　绑定文本框 ，那么值就是文本框中的内容

　　绑定有value值的表单，那么值就是value值，其他的就是逻辑值

　　想绑定value到Vue实例的一个动态属性上，可以使用v-bind

修饰符

　　.lazy  在默认情况下v-model在input事件中同步输入框的值与数据，也就是说，展示的值和输入的文本值一致。加了这个修饰符就变成，当输完之后失去焦点才会触发更新

　　.number 自动将用户输入的值转变为Number类型，如果原值的转换结果是NAN则返回原址，比如：aaa111 返回的还是  aaa111

　　.trim  自动过滤用户输入的首尾空格