第一章
引入vue脚本在html页面上
基本操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="../js/vue.js"></script>
<body>
<div class="app">
<h1> hello {{name}} {{demo()}}</h1>
</div>
</body>
<script>
new Vue({
el:".app",
data:{
name:"张三"
},
methods:{
demo (){
return "test demo"
}
}
})
</script>
</html>
{{}} 里面能写data里面的属性，可以是运算表达式或者三目表达式，或者函数
- 动态指令
v-bind 可以动态的给标签的属性绑定data里面的值(标签属性)
可以简写为：v-bind:href ==== (:href)
不管{{}}还是v-bind 获取的都是data的第一层数据 如果多层就需要从第一层一直.下去去找
{{}}：插值语法
v-bind 指令语法（单向绑定）data里面的值绑定到元素中
v-model (双向绑定) data与元素之间数据互通绑定（只能用在表单元素 （输入类元素））
总结：
Vue中有2种数据绑定的方式：
1.单向绑定(v-bind)：数据只能从data流向页面。
2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
备注：
1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
el与data的两种写法
data不要写成箭头函数，因为调用者是window 要么data:function(){ return {name:'aaaa'}} ,要么 data(){ return{ name:‘aaa’ }}
小结：
data与el的2种写法
1.el有2种写法
(1).new Vue时候配置el属性。
(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
2.data有2种写法
(1).对象式
(2).函数式
如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
3.一个重要的原则：
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
mvvm的理解
MVVM模型
1. M：模型(Model) ：data中的数据
2. V：视图(View) ：模板代码
3. VM：视图模型(ViewModel)：Vue实例
观察发现：
1.data中所有的属性，最后都出现在了vm身上。
2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
Object.defineProperty方法说明
数据代理
数据代理原理
数据代理详情
1.Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）
2.Vue中数据代理的好处：
更加方便的操作data中的数据
3.基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。
事件处理
v-on:click=“方法名” data 中methods：{}中定义方法，该方法不能是箭头函数 可以简写为@click=“方法名”
注意：方法后面的（）可以省略，因为没有参数，也可以加上（）需要传参数的时候，可以使用$event为占位符，在方法中进行event参数占位
只要data里面的数据，vue才会做数据代理
事件的基本使用：
1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
2.事件的回调需要配置在methods对象中，最终会在vm上；
3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；
vue事件修饰符
Vue中的事件修饰符：
1.prevent：阻止默认事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有event.target是当前操作的元素时才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
多个事件修饰，可以使用. 连续写
键盘事件
@keyup 松手之后 @keydown 按下键盘
计算属性
注意： 实际上上面的fullName是vm中的属性不是函数所以插值语法中只能写{{fullName}} 不能写成{{fullName()}}
计算属性：
1.定义：要用的属性不存在，要通过已有属性计算得来。
2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
3.get函数什么时候执行？
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5.备注：
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
也可以将fullName 简写为函数就当做返回值值，相当于get()方法
监视属性
wathc
computed和watch之间的区别：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
这样this的指向才是vm 或 组件实例对象。
vue绑定class样式
:class=""
style绑定 ，可以是一个对象
：style值可以是一个数组对象
总结：
绑定样式：
1. class样式
写法:class="xxx" xxx可以是字符串、对象、数组。
字符串写法适用于：类名不确定，要动态获取。
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
2. style样式
:style="{fontSize: xxx}"其中xxx是动态值。
:style="[a,b]"其中a、b是样式对象。
vue条件渲染
v-show="" 结果是一个boolean值，表示当前元素隐藏还是显示（可以是一个Boolean值也可以是表达式，或者逻辑运算）
v-if用法和v-show用法一样
二者的区别是v-show还在页面，只是隐藏起来了，而v-if 是直接从页面去除掉了，不存在了
条件渲染：
1.v-if
写法：
(1).v-if="表达式"
(2).v-else-if="表达式"
(3).v-else="表达式"
适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
2.v-show
写法：v-show="表达式"
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
注意：template标签只能和v-if结合使用，不能和v-show结合使用
列表
v-for 标签 用于循环数据 ，UI li 应该标记在立标签上面
<ul>
<li p in person > 循环<li> // 或者 <li (per, p ) in person></li>
</ul>
如果循环的是对象数组 ，里面两个参数的，第一个是结果第二个参数是下标 每个循环的标签应该加上：（：key="index"） 对象里面唯一的数据
数组，对象，字符串都一样
如果被循环的数据是一个数组，表示循环到到那个数，也可以说循环多少次
v-for key 说明
面试题：react、vue中的key有什么作用？（key的内部原理）
1. 虚拟DOM中key的作用：
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,
随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
2.对比规则：
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM，随后渲染到到页面。
3. 用index作为key可能会引发的问题：
1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
2. 如果结构中还包含输入类的DOM：
会产生错误DOM更新 ==> 界面有问题。
4. 开发中如何选择key?:
1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
使用index作为key是没有问题的。
列表过滤
computed:{
filPerons(){
return this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord) !== -1 // keyWord是被监视字段
})
}
}
和watch
watch:{
keyWord:{ //被监视字段
immediate:true,
handler(val){
this.filPerons = this.persons.filter((p)=>{
return p.name.indexOf(val) !== -1
})
}
}
}
二者的区别
watch:
1,是当被监视字段发生改变的时候就执行该字段相应的方法，
2,（加上imediate:true）是表示刚开始加载完就执行该方法
computed:
两个时候调用
1，一上来就调用
2，所监视的字段发生改变的时候
当该字段一旦发生改变就执行相应的方法，一上来就加载computed里面的所有方法（该方法是根据返回值判断的）
注意：computed里面能实现的方法，在watch中都可以实现