文章目录
一、v-model之lazy,number,trim
v-model.lazy：等全部输入完再显示
v-model.number：当数字和字母在一起，只显示前面连续的数字
v-model.trim：相当于python中的strip，消除前后空白
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<input type="text" v-model.lazy="mytext">||{{mytext}}
<br>
<input type="number" v-model.number="mynumber">||{{mynumber}}
<br>
<input type="text" v-model.trim="mytrim">||{{mytrim}}||
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
mytext:'',
mynumber:'',
mytrim:'',
},
})
</script>
</html>
二、跨域问题解决
1、通过jq的ajax实现
前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跨域问题</title>
<script src="vue/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="box">
<button @click="handleClick">加载数据</button>
数据是{{mytext}}
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
mytext:'',
},
methods: {
handleClick(){
$.ajax({
url:'http://127.0.0.1:5000/', //发送请求的url，本地的5000端口，是flask的默认端口
method:'get',
success:(data)=> {
console.log(data)
this.mytext = data
}
})
}
}
})
</script>
</html>
后端
from flask import Flask
app = Flask(__name__)
@app.route('/')
def index():
print('请求来了')
#res = 'hello world‘
res = make_response('hello world')
res.headers['Access-Control-Allow-Origin'] = '*' #解决跨域问题，访问控制允许的源 设置为全部
return res
if __name__ == '__main__':
app.run()
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RzOy80DK-1608125582579)(C:\Users\16093\AppData\Roaming\Typora\typora-user-images\image-20201216161221706.png)]
上述跨域问题：前端向后端成功发送了请求，后端也回复了数据，但被浏览器拦截了。这是因为：跨域问题的存在，浏览器检测到前端和后端不是来自同一个域，所以认为这是不安全的，所以就拦截了该资源的传递。想要解决这个问题，就要实现：CORS，也就是 跨域资源共享
2、后端读取json文件传到前端
json文件：file.json
{
"name": "Darker",
"age": "18",
"gender": "male"
}
后端：main.py
from flask import Flask,make_response,jsonify
import json
app = Flask(__name__)
@app.route('/')
def index():
print('请求来了')
with open('file.json','rt',encoding='utf-8') as f:
dic = json.load(f)
res = jsonify(dic) #将字典序列化成json格式数据
#这两步解决跨域问题
res = make_response(res)
res.headers['Access-Control-Allow-Origin'] = '*'
return res
三、vue项目与后端交互的几种方式
除了ajax交互，还有以下几种
1、fetche向后端发送请求
1.1 fetch介绍
提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应
它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源
1.2 fetch基本格式
fetch('http://example.com/movies.json').then(response => {
return response.json()
}).then(json => {
console.log(json)
})
1.3 示例
前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue/vue.js"></script>
</head>
<body>
<div id="box">
<button @click="handleClick">点我加载数据</button>
<br>用户名：{{name}}
<br>年龄：{{age}}
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
name: '',
age: '',
},
methods: {
handleClick(){
fetch('http://127.0.0.1:5000/').then(response => {
return response.json()
}).then(json => {
console.log('从后端获取的json数据',json)
this.name = json.name
this.age = json.age
}).catch(ex => {
console.log('出异常',ex) //抛出异常
})
}
}
})
</script>
</html>
后端
from flask import Flask,make_response,jsonify
app = Flask(__name__)
@app.route('/')
def index():
res = jsonify({'name':'lqz','age':18})
res = make_response(res)
res.headers['Access-Control-Allow-Origin'] = '*'
return res
if __name__ == '__main__':
app.run()
2、axios
2.1 axios介绍
① Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
② axios官网：http://www.axios-js.com/
2.2 示例
film.json
{
"data":{
"films":[
{
"actors":[
{
"avatarAddress":"https://pic.maizuo.com/usr/movie/45deca0f886633f1a8902f7eece4248a.jpg",
"name":"林超贤",
"role":"导演"
},
{
"avatarAddress":"https://pic.maizuo.com/usr/movie/ff8f5bfd455e660298452c0546bb23d5.jpg",
"name":"辛芷蕾",
"role":"方宇凌"
},
{
"avatarAddress":"https://pic.maizuo.com/usr/movie/f27b94579d10d3131b476ec6c63a2722.jpg",
"name":"蓝盈莹",
"role":"演员"
},
{
"avatarAddress":"https://pic.maizuo.com/usr/movie/0a30de65731f3ddc5ce5d5915c8d9d49.jpg",
"name":"彭于晏",
"role":"高谦"
},
{
"avatarAddress":"https://pic.maizuo.com/usr/movie/728944e292dc6e8161acd7d5344d361c.jpg",
"name":"王彦霖",
"role":"赵呈"
}
],
"category":"剧情|灾难",
"director":"林超贤",
"filmId":4836,
"filmType":{
"name":"2D",
"value":1
},
"grade":"7.8",
"isPresale":true,
"isSale":false,
"item":{
"name":"2D",
"type":1
},
"language":"汉语普通话",
"name":"紧急救援",
"nation":"中国大陆",
"poster":"https://pic.maizuo.com/usr/movie/c14a70858e2bda9c2bc8eaa7bfa0e2aa.jpg",
"premiereAt":1579910400,
"runtime":100,
"synopsis":"《紧急救援》是由林超贤导演，彭于晏、王彦霖、辛芷蕾、蓝盈莹出演的中国首部海上救援打捞题材的作品。筹备过程中，导演林超贤带领团队实地勘察选址，力求打造更劲爆，更震撼的场景设置，本次与奥斯卡最佳摄影鲍德熹，《泰坦尼克号》美术指导Martin Laing等国际顶级制作团队的强强联合，预示着电影将成为首部打开国际市场的华语救援题材作品，也势必会成为又一部华语电影的标杆之作。",
"timeType":3,
"videoId":"XNDIyODM2NjE4OA=="
},
{
"actors":[
{
"avatarAddress":"https://pic.maizuo.com/usr/movie/c8722df42d08942db01c2a262f576950.jpg",
"name":"易小星",
"role":"导演"
},
{
"avatarAddress":"https://pic.maizuo.com/usr/movie/9627d1ebac2b4b12a06fd1623a62af99.jpg",
"name":"彭昱畅",
"role":"肖翔"
},
{
"avatarAddress":"https://pic.maizuo.com/usr/movie/4b6da2deabe5dc7883321bb17372c25b.jpg",
"name":"乔杉",
"role":"周东海"
},
{
"avatarAddress":"https://pic.maizuo.com/usr/movie/7efe813dd79280f236b8d1286cdc313c.jpg",
"name":"卜冠今",
"role":"周希希"
},
{
"avatarAddress":"https://pic.maizuo.com/usr/movie/f244a95cdcd64625a50069bd64db49c2.jpg",
"name":"苇青",
"role":"王素芬"
}
],
"category":"喜剧|动作",
"director":"易小星",
"filmId":5266,
"filmType":{
"name":"2D",
"value":1
},
"grade":"7.2",
"isPresale":true,
"isSale":false,
"item":{
"name":"2D",
"type":1
},
"language":"",
"name":"沐浴之王",
"nation":"中国大陆",
"poster":"https://pic.maizuo.com/usr/movie/e6aabffd040bda24f483bcc95ed79e62.jpg",
"premiereAt":1607644800,
"runtime":102,
"synopsis":"在一次搓澡服务中，富二代肖翔（彭昱畅 饰）和搓澡工周东海（乔杉 饰）发生矛盾，让周东海面临生活困境。肖翔因跳伞事故被送到医院记忆全失，周东海恰巧撞见，心生一计，骗肖翔是自己的弟弟并骗回周家澡堂当搓澡工，于是一个富二代开始了一段终身难忘的搓澡生涯……",
"timeType":3,
"videoId":""
},
{
"actors":[
{
"avatarAddress":"https://pic.maizuo.com/usr/movie/168e82b3c4ec676ca577cb99e5a9ee06.jpg",
"name":"派蒂·杰金斯",
"role":"导演"
},
{
"avatarAddress":"https://pic.maizuo.com/usr/movie/c4cfadaaab8f81ebaf3bdc7aa30fac49.jpg",
"name":"盖尔·加朵",
"role":"戴安娜·普林斯 / 神奇女侠 Diana Prince / Wonder Woman"
},
{
"avatarAddress":"https://pic.maizuo.com/usr/movie/6e0a82c6efac00bfb6b7c1b4bb46eaa9.jpg",
"name":"克里斯·派恩",
"role":"史蒂夫·特雷弗 Steve Trevor"
},
{
"avatarAddress":"https://pic.maizuo.com/usr/movie/79a97235ee2f33741b63eafc2f34658e.jpg",
"name":"克里斯汀·韦格",
"role":"芭芭拉·密涅瓦 Cheetah"
},
{
"avatarAddress":"https://pic.maizuo.com/usr/movie/13c53574fc0c4b13b99e966af5af7e9d.jpg",
"name":"佩德罗·帕斯卡",
"role":"马克斯维尔·劳德 Max Lord"
}
],
"category":"动作|奇幻|冒险",
"director":"派蒂·杰金斯",
"filmId":5287,
"filmType":{
"name":"3D",
"value":2
},
"isPresale":true,
"isSale":false,
"item":{
"name":"3D",
"type":2
},
"language":"",
"name":"神奇女侠1984",
"nation":"美国",
"poster":"https://pic.maizuo.com/usr/movie/4f84f5a48560f5b14b0fac7768da4e05.jpg",
"premiereAt":1608249600,
"runtime":151,
"synopsis":"神奇女侠的全新大银幕冒险来到了1980年代。神奇女侠戴安娜在华盛顿的自然历史博物馆过着与普通人无异的生活，然而在阻止了一场看似平常的劫案后，身边的一切都发生了变化。在强大的神力诱惑下，两位全新劲敌悄然出现——与神奇女侠“相爱相杀”的顶级掠食者豹女，以及掌控着能改变世界力量的麦克斯·洛德，一场惊天大战在所难免。另外一边，旧爱史蒂夫突然“死而复生”，与戴安娜再续前缘，然而浪漫感动之余，史蒂夫的回归也疑窦丛生。",
"timeType":3,
"videoId":""
},
{
"actors":[
{
"avatarAddress":"https://pic.maizuo.com/usr/movie/6735332cb677645542c2f136eb37e561.jpg",
"name":"邱礼涛",
"role":"导演"
},
{
"avatarAddress":"https://pic.maizuo.com/usr/movie/ca47cd961fe0be0c91149f6bcca2f13d.jpg",
"name":"刘德华",
"role":"潘乘风"
},
{
"avatarAddress":"https://pic.maizuo.com/usr/movie/82a5d97e318c447133cd6c8262cee846.jpg",
"name":"刘青云",
"role":"董卓文"
},
{
"avatarAddress":"https://pic.maizuo.com/usr/movie/e776871fe75f0367aa60957457a6f96c.jpg",
"name":"倪妮",
"role":"庞玲"
},
{
"avatarAddress":"https://pic.maizuo.com/usr/movie/dd120eb1f6bda9f3b9c9e4c49785d0ce.jpg",
"name":"谢君豪",
"role":"演员"
}
],
"category":"动作|犯罪",
"director":"邱礼涛",
"filmId":5257,
"filmType":{
"name":"2D",
"value":1
},
"isPresale":true,
"isSale":false,
"item":{
"name":"2D",
"type":1
},
"language":"",
"name":"拆弹专家2",
"nation":"中国大陆,中国香港",
"poster":"https://pic.maizuo.com/usr/movie/4a2bec5290b94f7eb597913727b21df6.jpg",
"premiereAt":1608768000,
"runtime":0,
"synopsis":"香港某处发生爆炸案，前拆弹专家潘乘风（刘德华 饰）因昏迷于现场，被警方怀疑牵涉其中。苏醒后的潘乘风只能一边逃亡一边查明真相，然而，他的好友董卓文（刘青云 饰）和他的前女友庞玲（倪妮 饰）却给他讲述了两段截然不同的经历。有计划的爆炸案接二连三发生，真相却越来越扑朔迷离……",
"timeType":3,
"videoId":""
}
],
"total":47
},
"msg":"ok",
"status":0
}
前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="box">
<button @click="handleClick">点我加载电影</button>
<ul>
<li v-for="item in datalist">
<p>电影名：{{item.name}}</p>
<p>电影名：{{item.director}}</p>
<img :src="item.poster" alt="">
</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
datalist:[],
},
methods: {
handleClick(){
axios.get("http://127.0.0.1:5000/film").then(res => {
console.log(res.data)
if(res.data.status==0){
this.datalist = res.data.data.films
}
}).catch(err => {
console.log('抛出异常',err)
})
}
}
})
</script>
</html>
后端
from flask import Flask,make_response,jsonify
import json
app = Flask(__name__)
@app.route('/film')
def index():
with open('film.json','rt',encoding='utf-8') as f:
dic = json.load(f)
res = jsonify(dic)
res = make_response(res)
res.headers['Access-Control-Allow-Origin'] = '*'
return res
if __name__ == '__main__':
app.run()
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nb5nAa2m-1608125582582)(C:\Users\16093\AppData\Roaming\Typora\typora-user-images\image-20201216204158226.png)]
四、计算属性
1、通过计算属性来实现人名首字母大写
1 直接在{{}}中写js代码 html中尽量少写js代码
2 使用函数 {{函数()}} 使用多次会执行多次
3 使用计算属性 当作变量来使用，多次使用只会执行一次
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue/vue.js"></script>
</head>
<body>
<div id="box">
模板插值：{{text.substring(0,1).toUpperCase()+text.substring(1)}}
<p>普通方法：{{upperName()}}</p> //后台每次都会执行
<p>普通方法：{{upperName()}}</p>
<p>普通方法：{{upperName()}}</p>
<P>计算属性：{{getName}}</P> //后台只会执行一次
<P>计算属性：{{getName}}</P>
<P>计算属性：{{getName}}</P>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
text:'dhaadsjd',
},
methods: {
upperName(){
console.log('我执行了')
return this.text.substring(0,1).toUpperCase()+this.text.substring(1)
}
},
computed: {
getName(){
// console.log('我执行了')
return this.text.substring(0,1).toUpperCase()+this.text.substring(1)
}
}
})
</script>
</html>
2、通过计算属性重写过滤小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<input type="text" v-model="myinput"> {{myinput}}
<br>
<div>
<p v-for="data in new_arr">{{data}}</p>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
myinput:'',
arr: ['aabbc', 'abc', 'aabcd','ccdd','bbcc'],
},
computed:{
new_arr(){
return this.arr.filter(item=>{
return item.indexOf(this.myinput) >-1
})
}
}
})
</script>
</html>
五、虚拟dom与diff算法 key的作用
1 vue有虚拟dom，跟真实dom做替换，使用的算法是diff算法
2 几种方案
-分层级比较
-同key值比较（循环中尽量加key）
-组件或标签的比较去替换
六、组件化开发基础
1 组件是什么
扩展 HTML 元素，封装可重用的代码，目的是复用
-例如：有一个轮播，可以在很多页面中使用，一个轮播有js，css，html
-组件把js，css，html放到一起，有逻辑，有样式，有html
2 分类
-全局组件
-局部组件
3 工程化以后
一个组件就是一个 xx.vue
4 element ui 其实就是写了一堆好看的组件，以后我们直接拿过来用就可以了
1、定义全局组件并使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="vue/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<div @click="handleClick">我是根组件的div</div>
<child></child>
<ul>
<li v-for="i in 4">{{i}}</li>
</ul>
<div>
<child></child>
</div>
</div>
</body>
<script>
//创建组件对象(全局组件)
Vue.component('child', {
template: `
<div>
<div style="background: red" @click="handleClick">我是头部</div>
<div v-if="isShow">显示消失</div>
</div>
`,
methods:{
handleClick(){
console.log('我被点击了')
this.isShow=!this.isShow
}
},
data(){
return {
isShow:true
}
},
})
var vm = new Vue({
el: '#box',
data: {
isShow:true,
},
methods:{
handleClick(){
console.log('根组件我被点击了')
}
}
})
</script>
</html>
思考：什么是跨域问题以及如何解决？
<div>
<div style="background: red" @click="handleClick">我是头部</div>
<div v-if="isShow">显示消失</div>
</div>
`,
methods:{
handleClick(){
console.log('我被点击了')
this.isShow=!this.isShow
}
},
data(){
return {
isShow:true
}
},
})
var vm = new Vue({
el: '#box',
data: {
isShow:true,
},
methods:{
handleClick(){
console.log('根组件我被点击了')
}
}
})
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
