昨日回顾
0 style和class
-数据绑定 :属性名='js变量/js语法'
-class:三目运算符、数组、对象{red:true}
-style:三目运算符、数组[{background:'red'},]、对象{background:'red'}
1 条件控制
v-if(v-show)
v-else-if='js变量'
v-else
3 列表渲染
v-for='data in 4'
4 数组的检测与更新
数组/对象数据变化以后,页面没有变化,Vue.set(对象,位置/key,value)
5 简单事件
@click='函数名'
@click='函数名()'
@click='函数名(a,b)'
@click='函数名($event)'
6 事件之数据过滤小案例
7 事件修饰符
blur
change
input
8 按键修饰符
@keyup.13
9 v-model数据双向绑定
v-model:input
10 购物车小案例
11 购物车案例之全新,全不选
今日内容
0.1 购物车增减功能
<!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="checkbox" v-model="isAll" @change="handleChange">全选/取消
<ul>
<li v-for="data in datalist"><input type="checkbox" v-model="checklist" :value="data" @change="handleOne">{{data}}
|
<button @click="handleJ(data)">-</button>
{{data.num}}
<button @click="data.num++">+</button>
</li>
</ul>
<hr>
{{checklist}}
<br>
total:{{totalPrice()}}
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
isAll: false,
datalist: [
{name: 'apple', price: 12, num: 1},
{name: 'banana', price: 19, num: 3},
{name: 'peach', price: 6, num: 5},
],
checklist: [],
},
methods: {
totalPrice() {
var sum_price = 0
for (i in this.checklist) {
sum_price += this.checklist[i]['price'] * this.checklist[i]['num']
}
return sum_price
},
handleChange() {
if (this.checklist.length > 0) {
this.checklist = []
} else {
this.checklist = this.datalist
}
},
handleOne() {
if (this.checklist.length == this.datalist.length) {
this.isAll = true
} else {
this.isAll = false
}
},
handleJ(item) {
console.log(item)
if (item.num <= 1) {
item.num = 1
} else {
item.num--
}
}
}
})
</script>
</html>
1 v-model之lazy,number,trim
<!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>
2 fetch和axios向后端发送请求
与后端交互数据,首先使用flask发送数据
from flask import Flask, make_response
app = Flask(__name__)
@app.route('/')
def index():
print('请求来了')
res = make_response('hello world')
res.headers['Access-Control-Allow-Origin'] = '*'
return res
if __name__ == '__main__':
app.run()
2.1 jq的ajax实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<button @click="handleClick">点我加载美女数据</button>
美女你好:{{mytext}}
</div>
</body>
<script>
var myajax=$
var vm = new Vue({
el: '#box',
data: {
mytext:'',
},
methods:{
handleClick(){
myajax.ajax({
url:'http://127.0.0.1:5000/',
method:'get',
success: (data)=> {
console.log(data)
this.mytext=data
}
})
}
}
})
</script>
</html>
2.2 fetch实现
fetch(不是所有浏览器都支持,谷歌浏览器支持)
XMLHttpRequest 是一个设计粗糙的 API,配置和调用方式非常混乱,而且基于事件的异步模型写起来不友好。 兼容性不好
polyfill: https://github.com/camsong/fetch-ie8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</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.3 axios(常用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title>Title</title>
</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">
</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
}
})
}
}
})
</script>
</html>
from flask import Flask, make_response, jsonify
import json
app = Flask(__name__)
@app.route('/film')
def film():
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()
3 计算属性
3.1 通过计算属性来实现人名首字母大写
1 直接再{{}}中写js代码 html中尽量少写jsdiamond
2 使用函数 {{函数()}} 使用多次会执行多次
3 使用计算属性 当作变量来使用,多次使用只会执行一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<p>{{name}}</p>
<p>{{name.substring(0,1).toUpperCase()+name.substring(1)}}</p>
<!-- <p>{{upperName()}}</p>-->
<!-- <p>{{upperName()}}</p>-->
<!-- <p>{{upperName()}}</p>-->
<p>{{getName}}</p>
<p>{{getName}}</p>
<p>{{getName}}</p>
<p>{{getName}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
name: 'asdfasdf'
},
methods: {
upperName() {
console.log('我执行了')
return this.name.substring(0, 1).toUpperCase() + this.name.substring(1)
}
},
computed: {
getName() {
console.log('我执行了')
return this.name.substring(0, 1).toUpperCase() + this.name.substring(1)
},
}
})
</script>
</html>
3.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" @input="handleChange"> {{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>
4 虚拟dom与diff算法 key的作用
1 vue有虚拟dom,跟真实dom做替换,使用的算法是diff算法
2 几种方案
-分层级比较
-同key值比较(循环中尽量加key)
-组件或标签的比较去替换
详细:
https://segmentfault.com/a/1190000020170310
5 组件化开发基础
1 组件是什么
扩展 HTML 元素,封装可重用的代码,目的是复用
-例如:有一个轮播,可以在很多页面中使用,一个轮播有js,css,html
-组件把js,css,html放到一起,有逻辑,有样式,有html
2 分类
-全局组件
-局部组件
3 工程化以后
一个组件就是一个 xx.vue
4 element ui 其实就是写了一堆好看的组件,以后我们直接拿过来用就可以了
5.1 定义全局组件并使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/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>