去后端交互的三种方式
前后端打通，要从前端发送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>
标签：el,console,log,方式,data,三种,组件,交互,name From： https://www.cnblogs.com/YeeQX/p/17715796.html