Vue基础语法

Vue：渐进式JavaScript框架；、

渐进式：声明式渲染-组件系统-客户端路由-集中式状态管理-项目构建；

el：元素的挂载位置；

data：模型数据，值为一个对象；

{{}}：插值表达式；

指令：规定好的自定义属性；
v-cloak：先隐藏，替换好值之后再显示最终的值；[v-cloak] {display: none;}
v-text：没有闪烁问题；
v-html：可以解析代码；
v-pre：填充原始信息；
v-once：只编译一次，显示过后不再修改；
v-model：表单双向数据绑定；

数据响应式：数据的变化导致页面内容的变化；

数据绑定：把数据和对应的标签，进行一一对应；

前端页面的划分：
Model：模型，关注的是页面展示的数据
view：视图，关注的页面展示效果，结构与样式；
Controller：控制器，关注如何把数据添加视图中；（Vue的实例对象VM）；

从视图到模型：事件监听；
从模型到视图：数据绑定；

事件绑定：
v-on:click="" （@click=“”）
v-bind（ ：）
this是指 vue的实例对象；
绑定函数；
直接调用，
传递参数：
如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数；
如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event；
event.target.tagName；获取触发事件的元素；
event.target.innerHTML：获取触发事件的内容；

事件修饰符：

<a @click.stop=“doThis”>

<!-- 提交事件不再重载页面 -->
	<form  @submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联   即阻止冒泡也阻止默认事件 -->
	<a  @click.stop.prevent="doThat"></a>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->target;事件源
<!-- 即事件不是从内部元素触发的 -->
	<div  @click.self="doThat">...</div>

按键修饰符：v-on:keyup
.enter => enter键
.tab => tab键
.delete (捕获“删除”和“退格”按键) => 删除键
.esc => 取消键
.space => 空格键
.up => 上
.down => 下
.left => 左
.right => 右
自定义按键修饰符：Vue.config.keyCodes.f5 = 116;keyCode值；

属性绑定：
- v-bind 指令被用来响应地更新 HTML 属性
- v-bind:href 可以缩写为 :href;

v-model的底层实现原理：

样式绑定：
v-bind:class：
绑定一个对象：
如果绑定的是一个对象 则 键为 对应的类名 值 为对应data中的数据；
绑定一个数组：
数组中classA和 classB 对应为data中的数据；
注意：v-bind:class指令可以与普通的class特性共存；
v-bind:style：

分支结构：
v-if 使用场景：v-if，v-else-if，v-else，控制元素是否渲染：
- 1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素
- 2- 进行两个视图之间的切换；

v-show：控制元素是否显示：
	本质就是标签display设置为none，控制隐藏；

区别：
	- v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。
	- v-if是动态的向DOM树内添加或者删除DOM元素；v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；

循环结构：
遍历数组：
v-for：用于循环的数组里面的值可以是对象，也可以是普通元素
v-for=“item in list”
v-for="(item ,index) in list"
key 的作用：
- key来给每个节点做一个唯一标识
- key的作用主要是为了高效的更新虚拟DOM
:key=“数据的id或者循环的索引index”
遍历对象：
v-for=”(value, key, index ) in obj"

v-if 和 v-for结合： v-if='v==13' v-for='(v,k,i) in obj'；
	v-if是在v-for后面执行的；

表单基本操作：
获取单选框中的值：- 通过v-model；
1、 两个单选框需要同时通过v-model 双向绑定 一个值
2、 每一个单选框必须要有value属性 且value 值不能一样
3、 当某一个单选框选中的时候 v-model 会将当前的 value值 改变 data 中的 数据；

获取复选框中的值：
	1、 复选框需要同时通过v-model 双向绑定 一个值 
    		2、 每一个复选框必须要有value属性  且value 值不能一样 
	3、 当某一个单选框选中的时候 v-model  会将当前的 value值 改变 data 中的 数据；

获取下拉框和文本框中的值：
	1、 需要给select  通过v-model 双向绑定 一个值 
       		2、 每一个option  必须要有value属性  且value 值不能一样 
	3、 当某一个option选中的时候 v-model  会将当前的 value值 改变 data 中的 数据，occupation 的值就是选中的值；

表单修饰符：
.number 转换为数值；
.trim 自动过滤用户输入的首尾空白字符，只能去掉首尾的 不能去除中间的空格；
.lazy 将input事件切换成change（失去焦点）事件；

自定义全局指令：Vue.directive(‘指令名’，{
// 当被绑定的元素插入到 DOM 中时
inserted：function（el,binding）{}；
el: 为当前自定义指令的DOM元素 ;
binding 为自定义的函数形参 通过自定义属性传递过来的值 存在 binding.value 里面;
//bind: 当指令绑定到元素上的时候执行的函数;(样式有关的)
//updated: 当组件更新的时候执行的函数;
})；

自定义私有指令: directives: {
指令名: {
inserted：function（el,binding）{}；
}
},

计算属性：computed：{return}：计算属性是基于它们的响应式依赖进行缓存的；而方法不存在缓存；

侦听器 watch：
- 使用watch来响应数据的变化
- 一般用于异步或者开销较大的操作；
- watch 中的属性 一定是data 中 已经存在的数据；
- 当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听；
var vm = new Vue({
el: ‘#app’,
data: {
firstName: ‘Jim’,
lastName: ‘Green’,
// fullName: ‘Jim Green’
},
//watch 属性 定义 和 data 已经 methods 平级
watch: {
//注意： 这里firstName 对应着data 中的 firstName
// 当 firstName 值 改变的时候 会自动触发 watch
firstName: function(val) {
this.fullName = val + ’ ’ + this.lastName;
},
// 注意： 这里 lastName 对应着data 中的 lastName
lastName: function(val) {
this.fullName = this.firstName + ’ ’ + val;
}
}
});

过滤器:{{ msg | changeFl(“super hero”,“哈哈”) | text }}

全局过滤器：Vue.filter('名',function(参数1：为管道符的前面的date参数,这个是固定的;参数2：为过滤器括号里的参数自定义...){}；

私有过滤器：filters:{
		名：function（参数1，参数2，...）{}
	}

生命周期：
Vue实例从创建 到销毁的过程 ，这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数；

beforeCreate：在实例初始化之后，数据观测和事件配置之前被调用 此时data 和 methods 以及页面的DOM结构都没有初始化   什么都做不了；

created：在实例创建完成后被立即调用此时data 和 methods已经可以使用  但是页面还没有渲染出来；

beforeMount：在挂载开始之前被调用   此时页面上还看不到真实数据 只是一个模板页面而已；

mounted：el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。  数据已经真实渲染到页面上 在这个钩子函数里面我们可以使用一些第三方的插件；

beforeUpdate：数据更新时调用，发生在虚拟DOM打补丁之前。   页面上数据还是旧的；

updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。 页面上数据已经替换成最新的；

beforeDestroy：实例销毁之前调用；

destroyed：实例销毁后调用；

数组变异方法：
修改原有数组：
push()：往数组最后面添加一个元素，成功返回当前数组的长度

	pop()：删除数组的最后一个元素，成功返回删除元素的值

	shift()：删除数组的第一个元素，成功返回删除元素的值

	unshift()：往数组最前面添加一个元素，成功返回当前数组的长度

	splice()：有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除 后想要在原位置替换的值

	sort()： 使数组按照字符编码默认从小到大排序,成功返回排序后的数组

	reverse()：将数组倒序，成功返回倒序后的数组；

生成新的数组，需要重新赋值：
	
	filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

	concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组

	slice() 方法可从已有的数组中返回选定的元素，slice(从哪里开始，到哪里结束)。该方法并不会修改数组，而是返回一个子数组；

动态数组响应式数据
- Vue.set(a,b,c) 让 触发视图重新更新一遍，数据动态起来
- a是要更改的数据 、 b是数据的第几项、 c是更改后的数据
数组：Vue.set(vm.list, 0, ‘xx’);
对象：vm.$set(vm.obj, name, value);

filter()：检查指定数组中符合条件的所有元素，返回一个新的数组。
var book = this.books.filter(function(item){
return item.id == id;//判断条件是否满足，直接返回新数组；
});
console.log(book)；//返回一个新数组

findIndex()：查找满足条件的元素返回其索引；

some()：方法用于检测数组中的元素是否满足指定条件，如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false。

fin(): 查找满足条件的元素，并返回这个元素；

findIndex(): 查找满足条件的第一个元素，并返回这个元素的索引；