这里写目录标题
一.昨日回顾
0 style和class
-数据绑定:属性名='js变量/js语法'
-class:三目运算符,数组,对象{red:true}
-style:三目运算符,数组[{background:'red'},],对象{background:'red',fontSize:90px}
1 条件控制
-v-if(v-show)
-v-else-if='js变量'
-v-else
2 列表渲染
-v-for='data in 4'
3 数组的检测与更新
-数组,对象数据变化以后,页面没有变化,Vue.set(对象,位置/key,value)
4 简单事件
-@click='函数名'
-@click='函数名()'
-@click='函数名(1,2)'
-@click='函数名($event)'
5 事件之数据过滤小案例
6 事件修饰符
-blur
-change
-input
7 按键修饰符
-@keyup.13
8 v-model数据双向绑定
v-model:input上
9 购物车小案例
10 购物车小案例之全选,全不选
二.今日内容
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="handleCheck"> 全选/全不选
<div></div>
<ul>
<!--<li v-for="item in datalist">商品名字:{{item.name}},商品数量:{{item.number}}</li>-->
<li v-for="item in datalist">
<input type="checkbox" :value="item" v-model="checkgroup" @change="handleOne">
{{item}}
<button @click="item.number++">增</button>
{{item.number}}
<button @click="handleJ(item)">减</button>
</li>
</ul>
<br>
当前价格是:{{getPrice()}}
<br>
{{checkgroup}}
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
datalist: [
{name: '特斯拉', price: 10, number: 1, id: '1'},
{name: '苹果', price: 3, number: 4, id: '2'},
{name: '香蕉', price: 80, number: 6, id: '3'}
],
checkgroup: [],
isAll:false,
},
methods:{
getPrice(){
var sum_price=0
for(i in this.checkgroup){
sum_price+=this.checkgroup[i]['number']*this.checkgroup[i]['price']
}
return sum_price
},
handleCheck(){
// console.log('xxx')
if(this.checkgroup.length>0){
this.checkgroup=[]
}else {
this.checkgroup=this.datalist
}
},
handleOne(){
console.log('选中',this.checkgroup.length)
console.log('总数据',this.datalist.length)
if(this.checkgroup.length==this.datalist.length){
this.isAll=true
}else {
this.isAll=false
}
},
handleJ(item){
if(item.number<=1){
alert('不能再少了')
item.number=1
}else {
item.number--
}
}
}
})
</script>
</html>
2.v-model之lazy,number,trim
修饰符 | 作用 |
---|---|
lazy | 并不是实时改变,而是在失去焦点或者按回车时才会更新 |
number | 将输入转换成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>
3.fetch
vue项目跟后端交互,可以使用ajax
3.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 vm = new Vue({
el: '#box',
data: {
mytext:'',
},
methods:{
handleClick(){
$.ajax({
url:'http://127.0.0.1:5000/',
method:'get',
success: (data)=> {
console.log(data)
this.mytext=data
}
})
}
}
})
</script>
</html>
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()
3.2fetch向后端发送请求
<!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()
4.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()
5.计算属性
5.1通过计算属性来实现人名首字母大写
1.直接在{{}}中写js代码 html中尽量少写jsdiamond
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">
<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>
5.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>
6.虚拟dom与diff算法,key的作用
1.vue有虚拟dom,跟真实dom做替换,使用的算法是diff算法
2.几种方案
-分层级比较
-同key值比较(循环中尽量加key)
-组件或标签的比较去替换
把树按照层级分解
同key值比较
通组件对比
7.组件化开发基础
1.组件是什么
-扩展html元素,封装可重用的代码,目的是复用
-例如:有一个轮播,可以在很多页面中使用,一个轮播有js,css,html
-组件把js,css,html放到一起,有逻辑,有样式,有html
2.分类
-全局组件
-局部组件
3.工程化以后
一个组件就是一个 xx.vue
4.element ui 其实就是写了一堆好看的组件,以后我们直接拿过来用就可以了
7.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>