Vue（尚硅谷天禹老师）+ axious + ajax (一）

天禹老师的尚硅谷课程在七月下旬才出来。本着复习的目的重新快速地听了天禹老师的课，觉得老师讲得很细很好，同时也防止自己遗忘，因此快速复习后隔一段时间就记笔记。在其中也加一点自己的理解与问题。

前端负责的是把数据展示在页面上很多前端的小伙伴在与后端的同学进行交互时不懂得如何使用ajax。因此首先说一下前后端的交互问题：

1、前端请求数据

在开发中，URL主要是由后台来写好给前端。
若后台在查询数据，需要借助查询条件才能查询到前端需要的数据时，这时后台会要求前端提供相关的查询参数（即URL请求的参数）。

2、接口文档

接口文档主要由后台设计和修改。后台直接跟数据打交道，最清楚数据库里有什么数据，能返回什么数据。前端只是数据的被动接受者，只是接口文档的使用者。使用过程中，发现返回的数据部队，则跟后台商量，由后台修改。切记：前端不能随意更改接口文档，除非取得后台同意。

3、前端与后台交互的数据格式

主要为JSON

4、前端与后台的交互原理

关注点：接口地址、前端请求的参数、后端返回的参数。调接口后观察返回的数据。

5、前端请求参数的形式

GET和POST两种方式：
GET从指定的服务器中获取数据，POST提交数据给指定的服务器处理。

6、前端应该告知后台那些有效信息，后台才能返回前端想要的数据

先将要展示的页面内容进行模块划分，将模块的内容提取出来，以及方便前端的一些标志值等，将所有想要的内容和逻辑告知后端。
后端从数据库里面去查询相应的数据表以获得相应的内容或者图片地址信息
URL中的参数主要是根据后台需要，若后台需要一个参数作为查询的辅助条件，前端在URL数据请求时就传递参数

7、前端如何把页面信息有效传达给后台，以及后台如何获取到这些数据

所有前端请求的URL后面的参数都是辅助后台数据查询的，若不需要参数，那后台就会直接给个URL给前端。

8、当前端在调用数据接口时，发现有些数据不是我们想要的，那么前端应该怎么办

把请求的URL和返回的数据以及在页面的展示的情况给后台看【后台查询数据、取数据、封装数据方面等】

9、为什么需要在请求的时候传入参数

后台在查询数据库的时候需要条件查询

接下来的是天禹老师的总结：

初识Vue：

1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；

2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；

3.root容器里的代码被称为【Vue模板】；

4.Vue实例和容器是一一对应的；

5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；

6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；

7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

注意区分：js表达式 和 js代码(语句)

1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：

 (1). a (2). a+b (3). demo(1) (4). x === y ? 'a' : 'b'

 2.js代码(语句)

(1). if(){}  (2). for(){}

Vue模板语法有2大类：

1.插值语法：

功能：用于解析标签体内容。

写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

2.指令语法：

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。

举例：v-bind:href="xxx" 或  简写为 :href="xxx"，xxx同样要写js表达式， 且可以直接读取到data中的所有属性。

备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。

Vue中有2种数据绑定的方式：

1.单向绑定(v-bind)：数据只能从data流向页面。

2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。

备注：

1.双向绑定一般都应用在表单类元素上（如：input、select等）

2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值

单向数据绑定：<input type="text" v-bind:value="name"><br/>
			双向数据绑定：<input type="text" v-model:value="name"><br/> 

3.v-model只能应用在表单类元素（输入类元素）上

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 是 Model-View-ViewModel 的缩写。 Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。 View 代表UI 组件，它负责将数据模型转化成UI 展现出来。 ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理

1. M：模型(Model) ：data中的数据

2. V：视图(View) ：模板代码

3. VM：视图模型(ViewModel)：Vue实例

观察发现：

1.data中所有的属性，最后都出现在了vm身上。

 2.vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用。

Object.defineproperity

给对象追加属性，相关配置属性如下：

value:给属性设置值
enumerable：设置属性是否可以枚举，默认false,不可以枚举的属性在遍历中看不到
writable:设置属性是否可以被修改，默认为false
configurable:设置属性是否可以被删除，默认是false
get函数：当该属性被读取时，get函数就会被调用，返回值为value的值
Set函数：当该属性被修改的时候，Set函数就会被调用，可以收到被修改的具体值。

Object.defineProperty(person,'age',{
// value:18,
// enumerable:true, //控制属性是否可以枚举，默认值是false
// writable:true, //控制属性是否可以被修改，默认值是false
// configurable:true //控制属性是否可以被删除，默认值是false

//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
get(){
	 console.log('有人读取age属性了')
	 return number
     },

//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
set(value){
			console.log('有人修改了age属性，且值是',value)
			number = value
		  }

                                    })

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

1.Vue中的数据代理：

 通过vm对象来代理data对象中属性的操作（读/写）

<script type="text/javascript" >
			let obj = {x:100}
			let obj2 = {y:200}

			Object.defineProperty(obj2,'x',{
				get(){
					return obj.x
				},
				set(value){
					obj.x = value
				}
			})
		</script>

2.Vue中数据代理的好处：

更加方便的操作data中的数据

3.基本原理：

通过Object.defineProperty()把data对象中所有属性添加到vm上。

为每一个添加到vm上的属性，都指定一个getter/setter。

在getter/setter内部去操作（读/写）data中对应的属性

事件的基本使用：

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中的事件修饰符：

1.prevent：阻止默认事件（常用）；

2.stop：阻止事件冒泡（常用）；

3.once：事件只触发一次（常用）；

4.capture：使用事件的捕获模式；

5.self：只有event.target是当前操作的元素时才触发事件；

6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

键盘事件

1.Vue中常用的按键别名：

 回车 => enter 删除 => delete (捕获“删除”和“退格”键)  退出 => esc  空格 => space 换行 => tab (特殊，必须配合keydown去使用)  上 => up  下 => down 左 => left 右 => right

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

3.系统修饰键（用法特殊）：ctrl、alt、shift、meta

(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

(2).配合keydown使用：正常触发事件。

4.也可以使用keyCode去指定具体的按键（不推荐）

5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

计算属性：

1.定义：要用的属性不存在，要通过已有属性计算得来。

2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。

 3.get函数什么时候执行？

(1).初次读取时会执行一次。

(2).当依赖的数据发生改变时会被再次调用。

4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

5.备注：

1.计算属性最终会出现在vm上，直接读取使用即可。

2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

监视属性watch：

1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作

2.监视的属性必须存在，才能进行监视！！

3.监视的两种写法：

(1).new Vue时传入watch配置

(2).通过vm.$watch监视

watch:{
				isHot:{
					immediate:true, //初始化时让handler调用一下
					//handler什么时候调用？当isHot发生改变时。
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				}

深度监视：

(1).Vue中的watch默认不监测对象内部值的改变（一层）。

(2).配置deep:true可以监测对象内部值改变（多层）。

备注：

(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！

(2).使用watch时根据数据的具体结构，决定是否采用深度监视。

computed和watch之间的区别：

 1.computed能完成的功能，watch都可以完成。

 2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

const vm=new Vue({
            el:'#app',
            data() {
                return {
                    name:''
                    ,age:''
                }
            },
            // 写法1
            watch: {
                name:{
                    immediate:true,//初始化时让下面的回调函数执行一次
                    handler(newVal,oldVal){
                        console.log('name属性值被修改了'+oldVal+'=>'+newVal)
                    }
                }
            },
        })
        // 写法2
        vm.$watch('age',(newVal,oldVal)=>{
            console.log('hello')
            console.log(oldVal+'=>'+newVal)
        })

两个重要的小原则：

1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。

2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。

绑定样式：

1. class样式

写法:class="xxx" xxx可以是字符串、对象、数组。

字符串写法适用于：类名不确定，要动态获取。

对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。

数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

2. style样式

:style="{fontSize: xxx}"其中xxx是动态值。

:style="[a,b]"其中a、b是样式对象。

<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
			<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>

			<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
			<div class="basic" :class="classArr">{{name}}</div> <br/><br/>

			<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
			<div class="basic" :class="classObj">{{name}}</div> <br/><br/>

			<!-- 绑定style样式--对象写法 -->
			<div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
			<!-- 绑定style样式--数组写法 -->
			<div class="basic" :style="styleArr">{{name}}</div>

const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				mood:'normal',
				classArr:['atguigu1','atguigu2','atguigu3'],
				classObj:{
					atguigu1:false,
					atguigu2:false,
				},
				styleObj:{
					fontSize: '40px',
					color:'red',
				},
				styleObj2:{
					backgroundColor:'orange'
				},
				styleArr:[
					{
						fontSize: '40px',
						color:'blue',
					},
					{
						backgroundColor:'gray'
					}
				]
			},

条件渲染：

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一定可以获取到。

v-show和v-if的区别：v-show是css切换，v-if是完整的销毁和重新创建。

使用：频繁切换时用v-show，运行时较少改变时用v-if

v-if=‘false’ v-if是条件渲染，当false的时候不会渲染