标签：Vue 交互 --- json 调用 组件 data
v-model进阶
lazy: 等待input框的数据绑定失去焦点之后再变化
number: 数字开头只保留数字后面的从字母出现开始不保留，字母开头全都保留
trim: 去除首尾的空格
<!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>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
<h1>lazy</h1>
<p><input type="text" v-model.lazy="name1">{{name1}}---</p>
<h1>number</h1>
<p><input type="text" v-model.number="name2">{{name2}}---</p>
<h1>trim</h1>
<p><input type="text" v-model.trim="name3">{{name3}}---</p>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
name1: '',
name2: '',
name3: '',
}
})
</script>
</html>
与后端交互
axions发送ajax请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
</head>
<body>
<div class="app">
<h1>热映电影</h1>
<button @click="handleClick">点我</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: {
handleClick() {
//1 axios
axios.get('http://127.0.0.1:8000/api/').then(res => {
this.dataList = res.data.data.films
})
}
}
})
</script>
</html>
后端代码：
import json
from django.shortcuts import render
from rest_framework.response import Response
from rest_framework.views import APIView
# Create your views here.
class VueView(APIView):
def get(self, request):
# film.json为从https://m.maizuo.com/v5/?co=mzmovie#/films/nowPlaying爬取的json数据
with open('app01/film.json', 'r', encoding='utf-8') as f:
res_dict = json.load(f)
return Response(data=res_dict, headers={'Access-Control-Allow-Origin': '*'})
路由：
path('api/', views.VueView.as_view())
vue生命周期
从Vue实例创建开始到实例被销毁，总共经历了8个生命周期钩子函数(只要写了就会执行)
8个生命周期函数
beforeCreate 创建Vue实例之前调用
created 创建Vue实例成功之后调用，可以在此处发送异步请求后端数据
beforeMount 渲染DOM之前调用
mounted 渲染DOM之后调用
beforeUpdate 重新渲染之前调用，就是数据更新等操作时控制DOM重新渲染
updated 重新渲染完成之后调用
beforeDestory 销毁之前调用
destoryed 销毁之后调用
这8个钩子函数用的最多的就是created
beforeDestory作用
创建组件，created中启动一个定时器，组件被销毁使用beforeDestory销毁定时器
Vue组件
组件分类
全局组件：在任意组件中都能使用
局部组件：只能在当前组件中使用
定义全局组件
Vue.component('child', {
template: `
<div>
<button>后退</button>
<span style="font-size: 40px">首页--{{ name }}</span>
<button @click="handleFor">前进</button>
<lqz1></lqz1>
</div>`,// 里面写html内容，必须包在一个标签中
data() { // data必须是方法，返回对象
return {
name: '彭于晏',
t: null
}
},
methods: {
handleFor() {
this.name = 'lqz'
}
},
components: {
'lqz1': {
template: `
<div>
<h1>局部组件---{{ age }}</h1>
</div>`,
data() {
return {
age: 19
}
}
},
}
})
定义局部组件
var foo={
template: `
<div>
<h1>局部组件---{{ age }}</h1>
</div>`,
data() {
return {
age: 19
}
}
}
var vm = new Vue({
...
components: {
foo
}
})
标签：Vue,
交互,
---,
json,
调用,
组件,
data
From： https://www.cnblogs.com/zyg111/p/17128530.html