V-model进阶 Vue与后端交互，Vue生命周期，Vue组件
目录
v-model进阶操作
lazy等待input框的数据绑定失去焦点时在变化。
number 数字开头只保留数字，后面的字母不要，字母开头，都保留
trim去除首尾空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
<h1>lazy</h1>
<input type="text" v-model.lazy="myText">---->{{myText}}
<h1>number</h1>
<input type="text" v-model.number="myNumber">---->{{myNumber}}
<h1>trim</h1>
<input type="text" v-model.trim="myTrim">---->{{myTrim}}
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
myText: '',
myNumber: '',
myTrim: ''
},
})
</script>
</html>
与后端交互
jq的ajax与后端交互
我们在vue里使用jq的ajax与后端交互是会出现跨域问题.可以往请求头里添加键值对'Access-Control-Allow-Origin':'*'
drf接口
from rest_framework.response import Response
from rest_framework.generics import GenericAPIView
class UserView(GenericAPIView):
def get(self,request):
return Response(headers={'Access-Control-Allow-Origin':'*'},data={'code':100,'data':{'name':'lxj','age':18,'gender':'男'}})
# url
from django.contrib import admin
from django.urls import path
from app01 import views
urlpatterns = [
path('admin/', admin.site.urls),
path('ssss/',views.UserView.as_view())
]
vue html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
<script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>加载用户信息</h1>
<button @click="click">点我</button>
<div v-if="userinfo">
<p>用户名：{{userinfo.user.name}}</p>
<p>年龄：{{userinfo.user.age}}</p>
<p>性别：{{userinfo.user.gender}}</p>
</div>
<div v-else>没有信息</div>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
userinfo:{user:{}},
},
methods:{
click(){
$.ajax({
url:'http://127.0.0.1:8001/ssss/',
type:'get',
success: data => {
Vue.set(this.userinfo,'user',data.data)
}
})
}
}
})
</script>
</html>
fetch与后端交互
fetch 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应
一个新的发送ajax的接口
用起来比较方便，支持promise写法[最新的异步写法]
解决了原生的XMLHttpRequest兼容性的问题
不是所有浏览器都支持
主流现在是用axios[第三方]发送请求
与 XMLHttpRequest的区别
XMLHttpRequest
比较老，不同浏览器需要做一些兼容性的处理，写起来比较麻烦
jq基于它做了封装
代码
click(){ fetch('http://127.0.0.1:8001/ssss/').then(response=>response.json()).then(res=>{
Vue.set(this.userinfo,'user',res.data)
})
}
axios发送ajax请求
导入模块
<scrip src:"https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
或直接保存到本地
https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js
官方文档http://axios-js.com/zh-cn/docs/
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
<script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
</head>
<body>
<div id="app">
<h1>加载用户信息</h1>
<button @click="click">点我</button>
<div v-if="userinfo">
<p>用户名：{{userinfo.user.name}}</p>
<p>年龄：{{userinfo.user.age}}</p>
<p>性别：{{userinfo.user.gender}}</p>
</div>
<div v-else>没有信息</div>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
userinfo:{user:{}},
},
methods:{
click(){
// 2 axios 发送ajax请求
axios.get('http://127.0.0.1:8001/ssss/').then(res=>{
Vue.set(this.userinfo,'user',res.data.data)
})
}
}
})
</script>
</html>
小电影项目
接口
from django.shortcuts import render
from rest_framework.response import Response
# Create your views here.
from rest_framework.generics import GenericAPIView
import json
class FilmView(GenericAPIView):
def get(self,request):
with open('./app01/film.json','r',encoding='utf8') as f:
res = json.load(f)
return Response(headers={'Access-Control-Allow-Origin':'*'},data=res)
from django.contrib import admin
from django.urls import path
from app01 import views
urlpatterns = [
path('admin/', admin.site.urls),
path('ssss/',views.UserView.as_view()),
path('film/',views.FilmView.as_view())
]
页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
<script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
</head>
<body>
<div id="app">
<h1>热映电影</h1>
<button @click="click">点我</button>
<ul>
<li v-for="item in dataList">
<h2>名字：{{item.name}}</h2>
<h3>导演：{{item.director}}</h3>
<h3>类型：{{item.category}}</h3>
<p>简介：{{item.synopsis}}</p>
<img :src="item.poster" alt="" height="300px" width="200px">
</li>
</ul>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
dataList:[],
},
methods:{
click(){
// 2 axios 发送ajax请求
axios.get('http://127.0.0.1:8001/film/').then(res=>{
this.dataList=res.data.data.films
})
}
}
})
</script>
</html>
vue生命周期
从vue实例创建开始，到实例被销毁，总共经历了8个生命周期钩子[只要写了就会执行钩子函数
钩子函数：就是我们反序列化验证里写的钩子函数功能类似。
学名[专门名字]：面向切面编程(AOP)
OOP:面向对象编程
# 8个生命周期钩子函数
beforeCreate 创建Vue实例之前调用
created 创建Vue实例成功后调用（可以在此处发送异步请求后端数据） # data里的值就走这个函数的时候创建
beforeMount 渲染DOM之前调用 # 挂载div app还没渲染
mounted 渲染DOM之后调用 # 渲染完了
beforeUpdate 重新渲染之前调用（数据更新等操作时，控制DOM重新渲染） # 页面发生变化重新挂载
updated 重新渲染完成之后调用 # 渲染完成
beforeDestroy 销毁之前调用
destroyed 销毁之后调用
重点：
-1 用的最多的，created钩子函数, 在内部发送ajax请求，但是有的人放在mounted中加载
-2 beforeDestroy
-组件一创建，created中启动一个定时器
-组件被销毁,beforeDestroy销毁定时器
创建组件
我们在new Vue()产生的实例就是根组件。Vue提供了固定的语法创建组件
全局组件 component
一个根组件页面可以放多个同一个全局组件，可以分开布局，也可以放在别的全局组件中(套娃)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>组件的生命周期</h1>
<button @click="click">显示</button>
<!--因在根组件页面 使用全局组件所以 show是根组件的-->
<child v-if="show"></child>
</div>
</body>
<script>
Vue.component('child', {
// 其实写法一样只是el变成了template,data变成了data()
template: `<div>
<span>我是个全局组件</span>想要在这里显示的变量标签都要在这全局组件里写标签，变量要写在data()中
</div>` ,// 像我们在编写vue的时候弄了一个dvi包裹这里同 意思
data(){ // data与根组件data相同必须要使用data()写法，因为组件可以使用多次，直接写data会影响全部的data
return {} // 返回一个对象，在内部填写变量
},
methods:{},
// 可以在全局组件内部写钩子函数
})
var vm = new Vue({
el: '#app',
data: {
show:false,
},
methods: {
click(){
this.show =!this.show
}
},
})
</script>
</html>
局部组件
写在根组件内或全局组件内 注册components
var vm = new Vue({
el: '#app',
data: {
show:false,
},
methods: {
click(){
this.show =!this.show
}
},
// 局部组件 可以在根组件vm页面使用，不能在别的地方使用，全局组件内也可以定义局部组件
components:{
'lxj':{
template: `<div>
<span>我是个局部组件</span>
</div>` ,
data(){
return {}
},
methods:{},
}}
})
也可以在外面定义一个变量接收局部组件
var foo ={ template: `<div> <span>我是个局部组件</span></div>` ,
data(){
return {}
},
methods:{},}
foo就可以在下面的局部组件components内使用了
var vm = new Vue({
el: '#app',
data: {
show:false,
},
methods: {
click(){
this.show =!this.show
}
},
// 局部组件 可以在根组件vm页面使用，不能在别的地方使用，全局组件内也可以定义局部组件
components:{
foo }
})
