vue.js基础内容学习笔记

写在前面：

在b站上学习了一个vue框架的实战教程之后，决定去补习一下vue的基础知识。以下是看教程中总结出的一些经验～

视频教程：点这边～

1、vue.js的定义：渐进式JavaScript框架
渐进式的含义：声明式渲染（我们只需要告诉程序我们想要什么效果，其他的交给程序来做）=》组件系统 =》 客户端路由 =》集中式状态管理 =》项目构建

2、vue的基本使用步骤
（1）需要提供标签用于填充数据（即html的div或其他标签）
（2）引入vue.js库文件
（3）可以使用vue的语法做功能了
（4）把vue提供的数据填充到标签中

<div id="app">
	<div>{{msg}}</div>
</div>
<script type="text/javascript">
	var cm = new Vue({
		el: '#app',
		data: {
			msg: 'Hello Vue!'
		}
	});
</script>

实例参数分析：
el：元素的挂载位置（值可以是css选择器或者dom元素）
data：模型数据（值是一个对象）
差值表达式{{msg}}用法：
将数据填充到html标签中（数据绑定）
差值表达式支持基本的计算操作

3、模板语法
（1）指令
①　v-cloak：先通过样式隐藏内容，然后在内存中进行值的替换（即把差值表达式变成vue中生命的值），直到编译结束后才显示最终结果。
首先提供样式。[v-clock]{display: none;}
然后在差值表达式所在的标签中添加v-cloak指令
②　数据绑定指令
v-text：例如<div v-text='msg'></div>，使用该指令绑定到data中的值（填充纯文本）
v-html：使用该指令将div绑定到data中的html片段，存在安全隐患
v-pre：填充原始信息，跳过编译过程 例如<div v-pre>{{msg}}</div>
③　 数据响应式：数据的变化导致页面变化
v-once：只渲染元素和组件一次。应用场景：如果显示的信息后续不需要再修改，可以使用v-once来提高性能。
（2）双向数据绑定
①　v-model：绑定到data中的数据。例如，用户改变页面内容时数据会改变；数据改变时页面内容也会改变。主要体现在表单输入域中。
②MVVM设计思想：M(Model)，模型，即数据；V(View)，视图，即模板，本质上说就是dom；VM(View-Model)，实现控制逻辑，将两者结合。从视图到模型使用的是事件监听，从模型到视图使用的是数据绑定（把数据填充到视图层）。
（3）事件绑定
v-on:事件，例如v-on:click=‘’，或@click=‘’。事件函数的调用方法可以直接绑定函数名，也可以调用函数（即有无()的区别）。
如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数；如果事件绑定函数调用（即函数名加括号），那么事件对象必须作为最后一个参数显式传递，并且传递名称是固定的$event。
（4）事件修饰符
.stop阻止冒泡，.prevent阻止默认行为。例如：

<a href="www.baidu.com" v-on:click.prevent='stop1'>aaa</a>

（5）按键修饰符
例如：<input v-on:keyup.enter=‘handle’>，即键盘上敲enter键即可触发handle函数
（6）属性绑定
v-bind指令动态处理属性，例如<a v-bind:href="url">百度</a>，可以将url属性动态绑定到a标签上，可以修改url。v-model的基本原理就是将v-bind和v-on:input的结合。
（7）样式绑定
①　class样式的动态处理（对象绑定和数组绑定）：
<div v-bind:class='[activeClass, errorClass, {test: isTest}]'>测试</div>。（对象绑定和数组绑定结合）。activeClass和errorClass是定义的两个类，在data中声明，它们的值是对应的类名，即active和error。test也是类名，isTest是对应的布尔值，控制test类是否显示。也可以简化操作，即将activeClass 和errorClass定义在同一个数组中，在data中声明。如果div中有默认class，会将其保留，不会被覆盖。
②　style样式的处理：
<div v-bind:style="{border: borderStyle, width: widthStyle, height: heightStyle}">aaa</div>。直接将样式写在div里，对应的borderStyle, widthStyle, heightStyle全部在data中进行声明并赋值。同样可以简化的写，在data中放在一个obj下，然后直接在div里v-bind:style=“obj”。
（8）分支循环结构
①　分支结构：最终会根据score渲染出一个div

<div v-if='score>=90'>优秀</div>
<div v-else-if='score<90&&score>=80'>良好</div>
<div v-else-if='score<80&&score>60'>一般</div>
<div v-else>差</div>

v-show与v-if的区别是：v-if控制元素是否渲染到页面，而v-show通过控制style的display属性来控制是否显示（已经渲染到了页面）
②　循环结构：v-for遍历数组
例如：<li v-for='(item,index) in fruits' :key='item.id'>{{item.name}}</li>
key的作用是：帮助vue区分不同的元素，从而提高性能。Index是索引，是唯一值。
v-for=‘(value, key, index) in obj’。其中，value是值，key是值对应的名字，index是索引。
v-if和v-for可以结合使用。
4、表单操作
（1）使用v-model来双向绑定。
（2）表单域修饰符：
①　number：转化为数值
<input type=”text” v-model.number=”age”>将age转化为数值类型
②　trim：去掉首尾的空格
③　lazy：将input事件切换为change事件。
即只有在input文本框失去焦点时，才会改变其双向绑定的值。

5、自定义指令（directives）
①　不带参数的自定义指令

Vue.directive('focus',{
	inserted:function(el){
	// el表示指令所绑定的元素，此处是获取元素的焦点
		el.focus()
	}
})

其中，focus代表自定义指令的名称，当需要使用时在对应的地方加上v-focus。
②　带参数的自定义指令

Vue.directive('color',{
	bind: function(el, binding){
	// 根据指令的参数设置背景色
		el.style.backgroundColor = binding.value.color;
	}
})

其中，color是指令的名称，binding是一个对象，binding.value是使用该指令的dom指定的值。

使用该指令：<input type=”text” v-color=”msg”> 在data中声明msg对象，msg对象中有一个属性color，其值为orange。就可以为el对象设置背景色为橙色。
③　局部指令

directives: {
	color: {
		bind: function(el, binding){
			// 根据指令的参数设置背景色
			el.style.backgroundColor = binding.value.color;
		}
	}
}

directives与methods，data平级。局部指令只能在本组件中使用，全局指令是所有组件都可以使用。

6、计算属性（computed）
表达式的计算逻辑比较复杂，使用计算属性可以使模板内容更加简洁。
computed: 与methods和data平级。
在computed下定义函数，基于data中的数据来发生变化。
计算属性与方法的区别：计算属性基于依赖进行缓存，方法不存在缓存。即方法每调用一次都会执行一遍，而计算属性如果同样的调用多次，只会执行一次。

7、侦听器（watch）
侦听器绑定在data中的数据里，数据一旦发生变化就通知侦听器所绑定的方法。应用场景为：数据变化时执行异步或开销较大的操作。

8、过滤器
作用：格式化数据，例如将字符串格式化为首字母大写，将日期格式化为指定的格式等。
Vue.filter(‘过滤器名称’, function(value){
//过滤器业务逻辑
})
其中value就是过滤器传递过来的参数（data），从第二个参数开始是手动指定的参数。
调用过滤器时，使用竖线{{ msg | upper }}
支持级联的用法，如{{ msg | upper | lower }}
除了差值表达式，还可以使用属性绑定的方法来调用过滤器。
与自定义指令一样，支持局部定义和全局定义。局部定义即与methods和data平级，添加一个filters。

9、生命周期
挂载（初始化相关属性）

• beforeCreated：在实例初始化之后，数据观测和事件配置之前被调用
• created：实例创建完成后被立即调用
• beforeMount：在挂载开始之前被调用
• mounted：页面中已经有模板了

更新（元素或组件的变更操作）

• beforeUpdate：数据更新时调用，发生在虚拟dom打补丁之前
• updated：由于数据更改导致的虚拟dom重新渲染和打补丁，在这之后会调用该钩子

销毁（销毁相关属性）

• beforeDestroy：实例销毁之前调用
• destroyed：实例销毁之后调用

10、数组相关api
（1）变异方法：修改原有数据
如：push()，pop()，shift()，unshift()，splice()，sort()，reverse()
（2）替换数组：生成新的数组
如：filter()，concat()，slice()
（3）数组响应式变化
Vue.set(vm.items, indexOfItem, newValue)
vm.$set(vm.items, indexOfItem, newValue)
参数1表示要处理的数组名称；参数2表示要处理的数组的索引；参数3表示要处理的数组的值