Vue.js核心指令与编程范式-优快云博客

vue是一个js框架

vue指令：

	v-text：缩写是{{}},也叫插值表达式。mustache(中文译为胡须)语法，可以写简单的表达式。
	v-html
	v-on
		v-on指令的作用是：为元素绑定事件
		事件名不需要写on
		指令可以简写为@
		绑定的方法定义在methods属性中
		方法内部通过this关键字可以访问定义在data中的数据
		传递自定义参数
		事件修饰符：
			.stop（阻止冒泡，调用event.stopPropagation()。eg:@click.stop="method()"）
			.prevent（停止默认行为，调用event.preventDefault()。eg:@click.prevent="method()"）
			.{keyCode|keyAlias}（eg:@keyup.enter="method()"）
			.native
			.once
	v-show：操作的是样式。支持表达式写法
	v-if：操作的是dom对象。支持表达式写法
	v-bind：v-bind可以省略。
		:class	可以有对象语法（:class="{'类名1':boolean值,'类名2':boolean值}"），数组语法
		:style	可以有对象语法（:style="{'属性名1':'属性值1','属性名2':'属性值2'}"，其中key可以不加''，默认当成key键来使用。key可以使用驼峰命名，属性值不加的话就是当成变量来解析），数组语法
	v-for：可以遍历数组或者对象。语法是(item,index) in 数组，(value[,key,index]) in 对象。item和index可以结合其他指令一起使用
	v-model：获取和设置表单元素的值(双向数据绑定)
			 修饰符：lazy,number,trim
	v-once（该指令后不需要跟任何表达式）
	v-pre（该指令后不需要跟任何表达式，用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。其实就是不转义{{}}）
	v-cloak（该指令后不需要跟任何表达式，中文直译为斗篷，披风。）。当vue对所管理的HTMLElement部分进行解析时，会把v-cloak删掉
	v-if,v-else-if,v-else（复杂的逻辑判断不推荐使用这些标签。替代方式：使用computed）

编程范式：
1)命令式编程/声明式编程
2)面向对象编程(第一公民：对象)/函数式编程(第一公民：函数)
函数式编程的好处是可以链式编程
语法糖
函数和方法的区别：函数是单独存在定义的，方法往往和对象有关。

el：String | HTMLElement
data：Object | Function(组件当中data必须是一个函数)
methods：普通写法和ES6语法的写法
computed：计算属性
filters：过滤器

{{}}大括号里也可以调用methods的方法。也可以调用computed里的属性

filter()	//对数组中的元素进行过滤 
map()	//对数组中的元素进行一些转换操作
reduce()	//对数组中的元素进行一个汇总
find()	//对数组中的元素进行查找
findIndex()	//用法同find()

for循环的写法

①for(let i=0;i<this.books.length;i++){}
②for(let i in this.books){this.books[i]} //i是索引
③for(let book of this.books){} //book直接就是对象

计算属性computed：

使用计算属性computed而不使用方法methods的原因：计算属性里有缓存。当所涉及到的值改变了的时候就会清空相关的缓存。
计算属性computed是属性，不是方法，调用时不要加()。不是可以不加，是不能加，加了会报错
计算属性一般不需要主动重写set方法，只读属性。
计算属性有完整写法（即包含get和set）和语法糖写法。

ES5和ES6

ES5之前因为if和for都没有块级作用域的概念，我们都必须借助于function的作用域来解决问题（闭包）。
尽量使用let和const来代替var

ES6对象的增强写法：

//属性的简写
//ES6之前
var name = 'jilegeji';
var age = 18;
var obj = {
	name: name,
	age: age
}
console.log(obj);
//==============================
//ES6之后
let name = 'jilegeji';
let age = 18;
var obj2 = {
	name,age
}
console.log(obj2);

//方法的简写
//ES6之前
var obj = {
	test: function(){
		console.log("test");
	}
}
obj.test();
//==============================
//ES6之后
var obj2 = {
	test(){
		console.log("test");
	}
}
obj2.test();

在@click处可以直接使用$event对象
在@click处调用方法时,如果methods中定义的方法没有参数可以不写()。
如果methods中定义的方法只有一个参数，而在@click处调用方法时也没有写()，则默认传递的是event对象（注意，如果方法只有一个参数，而调用方法时写了()，但是没有传递参数，那参数就是undefined）
主动传递event对象使用$event
总结就是@click处调用方法时不写()，会默认传一个event对象

html代码中，给vue解析的部分，只要是命名规范的变量，它都会去data中找，找不到就会报错。

交给Vue管理的HTML的地方使用data中的数据不用+this,Vue实例中使用data中的数据要+this

JS中的冒泡

vue会对要显示的dom进行渲染，在内存中生成virtual dom（vdom,虚拟dom），此处会做一些逻辑，然后再渲染到页面dom中。
在if，else这种互斥逻辑的地方，为了提高性能，vue可能会复用元素。解决vue虚拟dom优化会复用html元素导致的问题，可以使用key，key不同就绝不会考虑复用。

官方推荐我们在使用v-for时，给对应的元素或者组件添加上一个:key属性。作用是可以更高效的更新虚拟dom。:key要保证是唯一标识，不推荐使用index。（因为数组在增删元素后，index和元素的关系不是唯一的。但即使使用了index，也不会有错误，也就是降低了dom更新效率而已）

总结:有了key之后，key值是唯一标志，所以就不会复用，就不会一个改一个，直接就新添加一个就完事了，这种情况下不复用反而会提高效率。没有key值，就会复用，就会一个改一个，导致效率很低。

Js数组方法：（以下数组方法都可以触发vue重新渲染页面）
unshift() //方法可向数组的开头添加一个或更多元素，并返回新的长度。
push() //方法可向数组的末尾添加一个或多个元素，并返回新的长度。
splice() //方法用于添加或删除数组中的元素。(第一个参数：开始位置，第二个参数：要删除的元素个数，第三个参数是可变参数：要添加的元素)
shift() //方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
pop() //方法用于删除数组的最后一个元素并返回删除的元素。
sort() //方法用于对数组的元素进行排序。
reverse() //方法用于颠倒数组中元素的顺序。

slice() 方法可从已有的数组中返回选定的元素。
slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
注意： slice() 方法不会改变原始数组。

注意：通过索引值修改数组中的元素，并不会让vue重新渲染页面。因为vue没有监听这种数据修改方式（可以通过splice()方法实现替换元素，而且还会触发vue重新渲染页面）

<input type="text" v-model="message">
等同于
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">

总结一下，如果箭头函数中只有一句return，那么可以同时省略大括号与return；但如果使用了大括号，即使只有一句表达式，也必须有return。

Vue-基础语法（一）