与后端交互三种方式
去后端交互的三种方式
前后端打通，要从前端发送ajax请求，其核心是使用js发送http请求，接收返回
原生js可以开启ajax，但是原生js开启比较麻烦，需要做浏览器兼容，有坑（一般不写）
三种方式：
jq写一个兼容所有浏览器的$.ajax（），不仅有ajax，还封装了很多dom操作，如果vue中使用它，不合适
axios：第三方的ajax包（一般咱们来用）
fetch：原生js发送ajax请求，有的浏览器不兼容
1、jq的ajax和后端交互
jq.hml
<body> <div id="app"> 你的名字是{{ name }}，你的年龄是{{ age }} <br> <input type="button" @click="handleclick">点击加载数据 </div> </body> <script> var vm = new Vue({ el: '#app', data: { name: '', age: '' }, methods: { handleclick() { var _this = this //请求发送了成功，后端执行了，但是被浏览器拦截了，因为有跨域请求 //当前地址，如果向非浏览器地址中的地址发送请求，就会出现跨域（也就是说如果向localhost发送请求是没有问题的， // 但是如果向http://127.0.0.1:8000/index/就会出现跨域问题） $.ajax({ url: 'http://127.0.0.1:8000/index/', type: 'get', success: function (data) { console.log(data) //{name: 'qx', age: 18} console.log(typeof data) //object _this.name = data.name _this.age = data.age } }) } } }) </script> </html>
视图：
2、fetch与后端交互
fetch基本格式：
fetch('http://example.com/movies.json') .then(function(response) { return response.json(); }) .then(function(myJson) { console.log(myJson); });
基本格式和箭头函数简写版（其他地方和上面jq写的代码一样）
3、axios与后端交互
axios中文网|axios API 中文文档 | axios (axios-js.com)
区别是response是个对象，要将response.data.age取值
箭头函数
是es6中的语法：
1、它让函数写法变简单
2、箭头函数没有自己的this，箭头函数中使用this，就是他的上一层
总结：箭头函数 将function去除，在（）和{}中间加入箭头，在没有返回值时，可以省略括号，多个参数时不能省略括号，函数体中只有一个返回值时，省略return和{}
// 箭头函数 //1 无参数，无返回值 // var f =function (){ // console.log('我是匿名函数') // } // var f = () => { // console.log('我是匿名函数') // } // f() //2 有一个参数，没有返回值 ,可以省略括号 // var f = function (name) { // console.log('我是匿名函数',name) // } // var f = name => { // console.log('我是匿名函数', name) // } // f('qx') //3多个参数，不能省略括号 // var f = (name, age) => { // console.log('我是匿名函数', name, age) // } // f('qx', 19) //4多个参数，不能省略括号,一个返回值 // var f = (name, age) => { // return name + 'nb' // } // 简写成 省了return和大括号 // var f = (name, age) => name + 'nb' // var res=f('qx', 19) // console.log(res) // 5 一个参数，一个返回值 // var f = name => name + 'nb' // var res = f('qx') // console.log(res)
电影案例
视图：
html
计算属性
1、计算属性是基于他们的变量进行缓存的
2、计算属性只有在它相关依赖变量发生变化时才会重新求值，否则不会变，只有需要的变量刷新，他才会刷新
3、计算属性就像python中的property，可以把方法或者函数伪装成属性
4、计算属性，必须有返回值
只输入函数：
只输入方法：
监听（侦听）属性
属性如果发生变化，就会执行某个函数
watch的两个参数：watch（新的值，老的值）
Vue生命周期
vue实例有生命周期，每个组件也有生命周期
new Vue()--->创建出来--->关闭页面-->被销毁掉--->整个过程经历了一个周期--->vue提供了一些钩子函数（写了就执行，不写就不执行），到某个阶段就会触发某个函数的执行
8个生命周期钩子函数：
beforeCreate 创建Vue实例之前调用
created 创建Vue实例之后调用
beforeMount 渲染DOM之前调用
mounted 渲染DOM之后调用
beforeUpdate 重新渲染之前调用（数据更新操作时，控制DOM重新渲染）
updated 重新渲染完成之后调用
beforeDestroy 销毁之前调用
destroyed 销毁之后调用
8个生命周期钩子，什么情况会用到：
created：用的最多，变量初始化完成了（data中的数据），在这里发送ajax请求
beforeDestroy：组件销毁之前会执行
组件创建，就执行一个定时任务
组件销毁，定时任务就要销毁，如果定时任务不销毁，就会一直执行
组件显示：
组件隐藏：
<body> <div id="app"> <h3>生命周期钩子</h3> <input type="text" v-model="username"> --->{{username}} <h3>使用组件</h3> <button @click="handleshow">显示组件/隐藏组件</button> <child v-if="is_show"></child> </div> </body> <script> //组件 Vue.component('child', { template: ` <div> <button @click="back">后退</button> {{ name }} <button @click="forward">前进</button> </div>`, data() { //在组件中data必须是函数，返回对象 return { name: '首页' } }, methods: { back() { alert('后退了') }, forward() { alert('前进了') } }, beforeCreate() { console.log('beforeCreate') console.log('当前el状态：', this.$el) console.log('当前data状态：', this.$data) console.log('当前name状态：', this.name) }, create() { console.log('create') console.log('当前el状态：', this.$el) console.log('当前data状态：', this.$data) console.log('当前name状态：', this.name) }, beforeMount() { console.log('beforeMount') console.log('当前el状态：', this.$el) console.log('当前data状态：', this.$data) console.log('当前name状态：', this.name) }, mounted() { console.log('mounted') console.log('当前el状态：', this.$el) console.log('当前data状态：', this.$data) console.log('当前name状态：', this.name) }, beforeUpdate() { console.log('beforeUpdate') console.log('当前el状态：', this.$el) console.log('当前data状态：', this.$data) console.log('当前name状态：', this.name) }, update() { console.log('update') console.log('当前el状态：', this.$el) console.log('当前data状态：', this.$data) console.log('当前name状态：', this.name) }, beforeDestroy() { console.log('beforeDestroy') console.log('当前el状态：', this.$el) console.log('当前data状态：', this.$data) console.log('当前name状态：', this.name) }, destroyed() { console.log('destroyed') console.log('当前el状态：', this.$el) console.log('当前data状态：', this.$data) console.log('当前name状态：', this.name) }, }) var vm = new Vue({ el: '#app', data: { username: '', is_show: false }, methods: { handleshow() { this.is_show = !this.is_show } }, }) </script> </html>
组件的介绍和使用
组件就是：扩展HTML元素，封装可重复用的代码，目的时复用
例如：有一个轮播图，可以在很多页面中使用，一个轮播图有js、css、html，组件将他们放在一起，有逻辑，有样式，有html
组件的分类：
全局组件：可以放在根中，可以在所有组件中使用
局部组件：只能在当前组件中使用
全局组件（component ）
局部组件（components）
写法一：
写法二：
全局组件可以在局部组件中使用，但局部组件不可以在全局中使用
总结：
1、全局组件是使用Vue.component定义的，可以在全局任意组件中使用
2、局部组件是定义在某个组件内的：conponents，只能用在当前组件中，可以定义多个
3、组件可以嵌套定义和使用
组件间通讯值
组件嵌套
父组件把数据传给子组件
自定义属性
1、在子组件中自定义属性，使用属性指令绑定父组件的变量
2、在子组件中，使用props接受[’属性名‘，’属性名2‘]
3、在子组件中，使用属性名即可
子组件把数据传递给父组件
自定义事件
1、父组件中自定义事件
2、子组件中只要执行 .$emit（’ 自定义的事件‘），就会触发自定义事件对应的函数
组件间通讯值父传子
组件间通讯值子传父
代码：
<div id="app"> <h1>组件通讯</h1> 接收到的子组件输入的内容是：{{username}} <hr> <!-- 父组件中执行的重写事件--> <qx @myevent="handlEvent"></qx> </div> </body> <script> var qx = { template: ` <div> <h3>局部组件</h3> <img :src="url" alt="" height="300px"> <br> <input type="text" v-model="username"> <button @click="handlechild">传递给父组件</button> </div>`, data() { return { url: 'https://pic4.zhimg.com/v2-868b59e6760705bf11faf2ed9bceec94_r.jpg?source=1940ef5c', username: '' } }, methods: { handlechild() { this.$emit('myevent', this.username) //这里的username通过emit，自定义事件传给了父组件 } }, } var vm = new Vue({ el: '#app', data: { username:'' }, methods: { handlEvent(username) { console.log('父组件执行了') this.username = username //父组件接收到之后，将子组件的username值传给了自己 } }, components: { qx, } }) </script> </html>
ref属性
ref属性是vue提供的，写在标签上
可以写在普通标签：在vue中使用 this.$refs.名字 拿到dom对象，可以原生操作
可以写在组件上：在vue中使用 this.refs.名字 拿到[组件对象]，组件属性、方法直接使用即可。
<div id="app"> <h1>ref属性放在普通标签上</h1> <input type="text" v-model="username" ref="myinput"> <br> <img src="http://pic.imeitou.com/uploads/allimg/230331/7-230331110I0.jpg" alt="" height="300px" ref="myimg"> <h1>ref放在组件上</h1> <hr> <lqz ref="mylqz"></lqz> <hr> <button @click="handleClick">点我执行函数</button> <br> {{username}} </div> </body> <script> var vm = new Vue({ el: '#app', data: { username: '' }, methods: { handleClick() { console.log(this.$refs) // 通过key，取到标签，拿到原生dom，通过dom操作，控制标签 // this.$refs.myinput.value = 'lqz' // this.$refs.myimg.src='https://img2.woyaogexing.com/2021/09/22/3c686eb61fe34696840c478584b73d36!400x400.jpeg' // 放在组件上---》现在在父组件中，能拿到子组件对象，对象中的属性和方法直接用即可 console.log(this.$refs.mylqz) // this.$refs.mylqz.title = 'sb' // this.username=this.$refs.mylqz.title this.$refs.mylqz.handleBack() } }, components: { lqz: { template: ` <div> <button @click="handleBack">后退</button> {{ title }} <button>前进</button> </div>`, data() { return { title: "首页" } }, methods: { handleBack() { alert('后退了') } } } } }) </script>
