课程章节： Vue 基础精讲
主讲老师： Dell
课程内容：
今天学习的内容包括：
（1）Vue支持胡子语法，格式：{{ 胡子语法 }}（两个大花括号），里面可以书写JS表达式。
（2）胡子语法只能在挂载点的标签中的文本当中使用，不能在标签的属性当中使用。这点和React不同。
（3）el:"#root"：让Vue接管id为"root"的DOM区域，Vue会对DOM的内容进行分析，发现使用了插值表达式，就会到data中查找对应的值。当发现v-on:click的时候，就会到methods中查找对应的方法。
（4）凡是以$开头的，指的都是Vue实例属性或者方法。
课程收获：
3.1 心得：
v-on（指令：元素绑定事件）
v-on可以给元素绑定事件，简写方式@，在methods配置对象中写的方法，将作为VM实例的方法。
格式：<button v-on:click="handler">单击我加上</button>
简写：<button @click="handler">单击我加上</button>
Vue.component（全局API：组件）
（1）简介
组件实际上就是自定义标签。是为了将某个模板（HTML代码）封装起来实现复用的。当创建组件的时候，Vue底层会把组件编译成实例，每个组件就是一个实例。
（2）注册全局组件
Vue.component("item", {
template: "<div>hello item</div>"
})
（3）使用全局组件
使用组件是以标签的形式使用。
<item></item>
实例代码：
<div id="root" @click="handleClick">
{{message}}
<item></item>
</div>
<script>
// 注册全局组件
Vue.component("item", {
template: "<div>hello item</div>"
})
var vm = new Vue({
// 让VM实例与挂载点进行关联，el属性值：字符串类型，为真实DOM节点
el: '#root',
// 响应式数据来源，作为VM实例的属性
data: {
message: "helloworld"
},
// 给实例添加一个方法
methods: {
handleClick: function () {
alert("hello")
}
}
})
3.2 心得：
生命周期函数就是Vue实例在某一个时间点会自动执行的函数。共11个函数（常用8个）。
vue的生命周期：创建=>挂载=>更新=>销毁。
注意：Vue的生命周期函数不放在methods方法中，而是直接定义在Vue实例中。
所有生命周期函数
（1）实例未完全实例化（beforeCreate）
此函数是所有生命周期函数中最先执行的，并且只执行一次。在这个钩子函数中，实例并没有完全实例化。
因此响应式数据（写在data里面的属性），在beforeCreate中获取不到，通过this不能访问。并且不能调用methods中的方法。
（2）实例完全实例化（created）
此函数只执行一次，在这里可以获取到响应式的数据，因为VM实例完全实例化了。
注意：发送AJAX请求、设置定时器等一次性任务，created速度更快。
（3）实例挂载之前（beforeMount）
此函数只执行一次，因为实例还没挂载（渲染），因此不能获取真实DOM节点。
（4）实例挂载完毕（mounted）【重要】
此函数只执行一次，这里可以获取到真实的DOM节点（页面渲染完成）。
以后使用AJAX去拉去服务器数据，都是在这里发请求。
（5）响应式数据更新之前（beforeUpdate）
当响应式的数据（data里面的）发生变化的时候，会立即执行一次。
（6）响应式数据更新完毕（updated）
只要响应式的数据（data里面的）发生变化的时候，就会立即执行一次。
在界面更新之后调用，此时可以访问最新的界面。
如：在浏览器中修改某条数据，也就是重新渲染数据，beforeUpdate和updated都会执行。
（7）销毁之前（beforeDestroy）
实例销毁之前调用，此时实例仍然可以正常工作。
使用场景：取消AJAX请求，清除定时器、解绑监听等。
（8）全部销毁（destroyed）
实例销毁后调用，实例已经无法正常工作了。
注意：刷新页面并不会触发此生命周期函数，只有关闭页面时才会。
不常用：
（9）activated（激活的）
每次缓存组件被激活时就会调用。通常与keep-alive结合使用。
（10）deactivated（失活的）
缓存的组件停用时调用，可替代destroyed。通常与keep-alive结合使用。
（11）errorCaptured（捕获到错误）
var vm=new Vue({
el:'#root', //实例接管页面某一部分的dom
data:{ //存放数据
},
methods:{ //编写事件方法
},
})
3.3 心得：
vue模板语法：
插值表达式: {{}}
v-text =“name”：name就不再是字符串了，而是一个js的表达式
就是innerHTML，显示name变量所对应的值，可以将数据变量显示在页面上，实际和插值表达式{{}}是一样的
v-html = “name”: 让innerHTML和name做一个数据绑定
区别：v-text 会转义输出，不会有任何样式改变（插值表达式也是）
v-html 不会进行转义，输出带样式效果
v-指令后面的内容为js表达式，除了写js表达式还可以在后面加上字符串（整体也是一个js表达式）
例如：<div v-html ="name + ' Lee '"></div>
插值表达式也一样，例如：{{name + ‘ Lee ’}}
<div id='vm'>
<ul>
<li v-text='name'></li> //输出文本插值<li>name</li>
<li>{{name}}</li> //输出文本插值<li>name</li>
<li v-html='list'></li> //输出html语言内容name
</ul>
<div>
<script>
var vm = new Vue({
el:'#vn',
data:{
name:'<li>name</li>'
}
})
</script>
3.4 心得：
computed： 计算属性，有缓存。如果其依赖的数据项没有发生改变就不会重新计算，否则如果其依赖的数据项发生了改变就会触发里面的方法，与其无关的数据变化不会触发计算属性。
methods：方法， 没有缓存，使用时要加上()实现方法的调用，只要数据发生变化就会触发，不管数据就没有关系。（因为是函数的调用，又没有缓存，每调用一次就重新执行一次）
watch：监听器，有缓存。功能与computed相似，但是代码复杂。
如果同一个功能，上述三个都可以实现，那么推荐computed，结构简单，性能好
实例：
var computed = new Vue({
el: '#computed',
data: {
firstName: 'f',
lastName: 'a',
age: 40,
},
//计算属性，對應html {{fullName}}
computed: {
fullName: function () {
console.log('computed');
return this.firstName + " " + this.lastName;
}
},
//也可以通过调用方法达到相同效果,对应html{{fullName}}
methods: {
fullName: function () {
console.log('methods');
return this.firstName + " " + this.lastName;
},
}
})
我们可以将同样的函数定义为一个方法，而不是一个计算属性。从最终结果来说，这两种实现方式确实是完全相同的。然而，不同的是计算属性将基于它们的响应依赖关系缓存。计算属性只会在相关响应式依赖发生改变时重新求值（依赖不变就不重计算）。这就意味着只要 age还没有发生改变，多次访问 fullName时计算属性会立即返回之前的age计算结果，而不必再次执行函数。但fullName()每次刷新时都会重新执行。
3.5 心得：
getter方法：读取此新属性时，此方法会被执行。
setter方法：修改此新属性的属性值，会触发setter方法，参数value即为此属性的属性值。
实例代码：
<div id="app">
{{fullName}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
firstName: "Dell",
lastName: "Lee"
},
computed: {
fullName: {
get: function () {
return this.firstName + " " + this.lastName
},
// 注意：如果不添加setter方法时，是无法直接修改计算属性的值的。需要通过computed里面的setter方法去修改。
set: function (value) {
console.log(value); // 你好 世界
var arr = value.split(" ");
this.firstName = arr[0];
this.lastName = arr[1];
}
}
}
})
</script>
3.6 心得：
v-bind可以让HTML标签属性的属性值变为动态（响应式的）。简写为冒号（:）
注意：是属性值变成动态，而不是属性名变成动态。
如果是原生语法，其属性值为固定的字符串，而无法改变。例如：<p id="box">我是一个p标签</p>
格式：<p v-bind:id=" info ">我是动态属性值</p>
简写：<p :id=" info ">我是动态属性值</p>
实例代码：
<style>
.activated {
color: red
}
</style>
<body>
<div id="app">
<!-- 属性值可以写成对象的形式 -->
<div @click="handleDivClick" :class="{activated : isActivated}">
Hello world
</div>
<!-- 属性值可以直接写变量名的形式 -->
<div @click="handleDivClick" :class="activated">
Hello world1
</div>
<!-- 属性值可以写成数组的形式 -->
<!-- 实际显示：class="iactivated activatedOne" -->
<div @click="handleDivClick" :class="[activated , activatedOne]">
Hello world2
</div>
<!-- 实际显示： -->
<div : @click="handleDivClick">
Hello world3
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
styleObj: {
color: "black"
},
isActivated: false,
activated: "iactivated",
activatedOne: "activatedOne"
},
methods: {
handleDivClick: function () {
this.styleObj.color = this.styleObj.color === "black" ? "red" : "black";
this.isActivated = !this.isActivated
this.activated = this.activated === "activated" ? "" : "activated"
}
}
})
class
class对象绑定（可绑定多个值）切换绑定值 可以采用取反 :class="{类名:变量名}"
class数组绑定 （可绑定多个值） 切换绑定值三元表达式 :class="[变量1，变量2]"
style
style对象绑定（可绑定多个值）切换绑定值三元表达式
style数组绑定（可绑定多个值）切换绑定值三元表达式
3.7 心得：
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true的时候被渲染。每次隐藏和显示都要删除/添加dom，性能不如v-show。
<div v-if='show' ></div>
...
data: {
styleObj:{
color:'red',
fontSize:'2em'
},
show:false//div不渲染
},
v-show用法和v-if类似，但当v-show对应的变量值是false，其对应的dom在页面上也存在，只是不渲染显示。
v-if和v-show根据情况选择使用。v-if 是“真正”的条件渲染，因为它会确保在切换过程中，条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
v-else和v-if成对使用，需要处在同一个vue实例控制的dom范围中，紧连在一起来用，不能分隔，显示其中之一。
<div id="color">
<div v-if='show' @click='handleClickColor' :>Hello World</div>
<div v-else>ByeBye!</div>
</div>
key值
当给元素标签加key值，vue会知道该元素唯一，而不会复用同样的内容。给下列的加key值，输入框会在v-if切换时清空，而不是复用之前的输入内容。
<div v-if="show">
newUserName:<input key=' newUserName'/>
</div>
<div v-else>
oldUserName:<input key='oldUserName'/>
</div>
3.8 心得：
vue的列表渲染
v-for="(item.text,index) in list" :key=“item.id” 不建议用index作为key值 可以使用后端返回数据中的id值
传递key值的作用是增强性能 （key值最好是唯一 且不使用index 索引）
操作数据的方式(vue提供可以动态添加数据的方法）改变数据 页面实时响应
1.数组提供的方法
pop() 删除数组最后一个元素
push() 可向数组的末尾添加一个或多个元素，并返回新的长度
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度
shirt() 删除并返回数组的第一个元素
splice() 从数组中添加/删除项目，然后返回被删除的项目，该方法会改变原始数组
sort() 用于对数组的元素进行排序
reverse() 翻转数组
2.更改引用（数组是一个引用类型 更改数组的引用 也可以使数据发生改变）
list=[] 将list引用给一个另外的数组
新增知识
模版占位符： 不会渲染到页面上 可以用于包裹元素
对象循环
1.v-for="(item,key,index) of userInfo" key指的是键名 index 指的是索引
2.修改原有数据并渲染到页面上 vm.userInfo.name = “Mike Lee”
3.新增数据并渲染到页面上 修改对象的引用值 userInfo={}
指令
v-for 循环列表中的数据
3.9 心得：
1、列表渲染的时候，加入key值能提升性能；
2、不能通过给数组的下标赋值的方式改变数组，需要通过7个函数操作数组元素。
3、函数：
splice(1,1,{}) 从下标是1的数组删除1条，并且用第三个元素进行赋值。
4、改变引用的方式来改变数组：
vm.list=[{id:“1”,text:“aaa”},{id:“2”,text:“bbb”},{id:“3”,text:“ccc”}]
5、template 模版占位符，可以帮助包裹一些元素，在dom渲染的过程中，并不会真正的呗渲染到页面之上
6、对象的循环
v-for= “item of object” 的方式来对对象做循环
7、动态遍历对象的时候，直接往对象里加值是不好用的。
可以通过引用的方式修改对象的值[但是真正的项目过程中，对象的值一般是动态获取的，所以直接通过写死的方式获取比较理想化了]：
eg：vm.userInfo = {
name:"Dell",
age:28,
gender:"male",
salary:"secret",
address:"beijing"
}
3.10 心得：
vue事件处理
v-on:click 简写成 @click
@click=“handleClick($event,参数1,参数2)”
e.preventDefault(); 取消事件的默认动作,阻止默认行为
事件修饰符
@click.prevent 阻止事件的默认行为
@click.stop 阻止事件冒泡
@click.self 点击本身dom才会触发事件 （.self要求，click事件只有在e.target=e.currentTarget的时候才会执行）
@click.once 事件只会执行一次，再点击解绑
@click.captrue 按照捕获的顺序执行按键修饰符
@keydown.enter/tab/esc(按键名） 按键之后才会触发
系统修饰符
@keydown.ctrl/shift/meta 按住ctrl等系统修饰符,当按住了@keydown才会执行
鼠标修饰符@click.right/left/middle 如：.right鼠标右键点击的时候才会执行
3.11 心得：
v-model表单绑定，表单中的值和value双向绑定，共同变化
可以应用在
radio（单选框，需要给value值，选中则显示）
checkbox（复选框true，false）
->（绑定在select上的v-model对应option选项值，如果给option设置value，则v-model对应value值）
v-model修饰符
v-model.lazy，鼠标失焦（离开input表单）时才改变value
v-model.number, 如果输入内容能转换成数字类型，就自动转换
v-model.trim, 去除首尾空格再存入value
watch API 与选项式 API this.$watch (以及相应的 watch 选项) 完全等效。watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用。默认情况下，它也是惰性的——即回调仅在侦听源发生变化时被调用。