复习
# 1 属性指令
-v-bind:属性名=属性值
-:属性名=属性值
-src，href，id，name，自定义属性
# 2 class和style属性
-字符串，数组，对象
-class使用数组，style使用对象（对象的key可以不加引号，如果不加引号，使用驼峰）
# 3 条件渲染
-v-if=条件
-v-else-if=条件
-v-else
-如果复合期中某一个，显示某个标签
# 4 列表渲染
-v-for
-对象 item in book_list：item指的是value
value,index in book_list:value和index值和key
-数组
-数字
-字符串
# v-for控制购物车商品展示
# key值的解释：加快虚拟dom的替换
# 数组的检测与更新
# 数据双向绑定 input v-model绑定
-只要input的value属性发生变化，绑定的js变量也变化
# 事件处理
# 过滤案例：input的事件
-input：只要input发生变化，就会触发
-change：只要value值变化，就会触发
-blur：只要失去焦点，就会触发
# 事件修饰符：stop（阻止事件冒泡，加在子组件上），
-self阻止事件冒泡，加在父组件上），
-prevent（阻止a标签跳转），
-once（只点击依次）
# 按键修饰符
-@keyup=函数
-只要键按下弹起，就会触发
-@keyup.enter=函数 :只要enter键，弹起，就会触发
今日内容
1 表单控制之checkbox，单选，多选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
<form>
<p>用户名：<input type="text" v-model="username"></p>
<p>密码：<input type="password" v-model="password"></p>
<input type="radio" v-model="radio" value="1">男
<input type="radio" v-model="radio" value="2">女
<input type="radio" v-model="radio" value="0">保密
<p><input type="checkbox" v-model="remember">记住密码</p>
<h2>选择爱好(多选)</h2>
<p><input type="checkbox" v-model="checkMany" value="1">足球</p>
<p><input type="checkbox" v-model="checkMany" value="2">篮球</p>
<p><input type="checkbox" v-model="checkMany" value="3">乒乓球</p>
<br><br>您选择的性别：{{radio}}
<br><br>您选择的爱好是：{{checkMany}}
</form>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
username: '',
password: '',
// 如果是checkbox，选择是true，不选中是false
remember: false,
// 如果是radio，多个radio框要绑定同一个变量，radio的值是选择的value值
radio:'',
// 如果是多选，绑定的变量是数组，数组内容是value的值
checkMany:[]
}
})
</script>
</html>
2 购物车案例(普通)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
<table border="1">
<tr>
<td>商品名称</td>
<td>商品价格</td>
<td>商品数量</td>
<td>选中/不选中</td>
</tr>
<tr v-for="item in good_list">
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.count}}</td>
<td><input type="checkbox" v-model="checkGroup" :value="item"></td>
</tr>
</table>
<h2>您选中的商品有：{{checkGroup}}</h2>
<h2>总价格为(由于数据的双向绑定，只要变量变了，页面也会变)：{{getPrice()}}</h2>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
good_list: [
{name: '特斯拉', price: 102304, count: 2},
{name: '钢笔', price: 6, count: 3},
{name: '鸡蛋', price: 2, count: 5},
{name: '鞋子', price: 299, count: 7},
{name: '衬衣', price: 189, count: 4},
],
checkGroup: []
},
methods: {
getPrice() {
// 计算选中的商品总价格
let totalPrice = 0
// 1 js老循环方式（按索引循环）
// for (i = 0; i < this.checkGroup.length; i++) {
// totalPrice += this.checkGroup[i].price * this.checkGroup[i].count
// }
//2 js的按迭代循环 【i是数组的索引值】
for (i in this.checkGroup) {
// console.log(i)
totalPrice += this.checkGroup[i].price * this.checkGroup[i].count
}
return totalPrice
}
}
})
</script>
</html>
3 购物车案例(全选，全不选)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
<table border="1">
<tr>
<td>商品名称</td>
<td>商品价格</td>
<td>商品数量</td>
<td>选中/不选中 <input type="checkbox" v-model="checkAll" @change="handelCheckALL"></td>
</tr>
<tr v-for="item in good_list">
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.count}}</td>
<td><input type="checkbox" v-model="checkGroup" :value="item" @change="checkOne"></td>
</tr>
</table>
<h2>您选中的商品有：{{checkGroup}}</h2>
<h2>总价格为(由于数据的双向绑定，只要变量变了，页面也会变)：{{getPrice()}}</h2>
<!-- <h3>{{checkAll}}</h3>-->
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
good_list: [
{name: '特斯拉', price: 102304, count: 2},
{name: '钢笔', price: 6, count: 3},
{name: '鸡蛋', price: 2, count: 5},
{name: '鞋子', price: 299, count: 7},
{name: '衬衣', price: 189, count: 4},
],
checkGroup: [],
checkAll:false
},
methods: {
getPrice() {
// 计算选中的商品总价格
let totalPrice = 0
// 1 js老循环方式（按索引循环）
// for (i = 0; i < this.checkGroup.length; i++) {
// totalPrice += this.checkGroup[i].price * this.checkGroup[i].count
// }
//2 js的按迭代循环 【i是数组的索引值】
for (i in this.checkGroup) {
// console.log(i)
totalPrice += this.checkGroup[i].price * this.checkGroup[i].count
}
return totalPrice
},
handelCheckALL(){
//一个是全选了，一个是全不选
if(this.checkAll){
this.checkGroup=this.good_list
}else {
this.checkGroup=[]
}
},
checkOne(){
if(this.checkGroup.length==this.good_list.length){
//全选
this.checkAll=true
}else {
this.checkAll=false
}
}
}
})
</script>
</html>
4 购物车案例（数量加减）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
<table border="1">
<tr>
<td>商品名称</td>
<td>商品价格</td>
<td>商品数量</td>
<td>选中/不选中 <input type="checkbox" v-model="checkAll" @change="handelCheckALL"></td>
</tr>
<tr v-for="item in good_list">
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td><button @click="handleDown(item)">-</button>{{item.count}} <button @click="item.count++">+</button></td>
<td><input type="checkbox" v-model="checkGroup" :value="item" @change="checkOne"></td>
</tr>
</table>
<h2>您选中的商品有：{{checkGroup}}</h2>
<h2>总价格为(由于数据的双向绑定，只要变量变了，页面也会变)：{{getPrice()}}</h2>
<!-- <h3>{{checkAll}}</h3>-->
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
good_list: [
{name: '特斯拉', price: 102304, count: 2},
{name: '钢笔', price: 6, count: 3},
{name: '鸡蛋', price: 2, count: 5},
{name: '鞋子', price: 299, count: 7},
{name: '衬衣', price: 189, count: 4},
],
checkGroup: [],
checkAll:false
},
methods: {
getPrice() {
// 计算选中的商品总价格
let totalPrice = 0
// 1 js老循环方式（按索引循环）
// for (i = 0; i < this.checkGroup.length; i++) {
// totalPrice += this.checkGroup[i].price * this.checkGroup[i].count
// }
//2 js的按迭代循环 【i是数组的索引值】
for (i in this.checkGroup) {
// console.log(i)
totalPrice += this.checkGroup[i].price * this.checkGroup[i].count
}
return totalPrice
},
handelCheckALL(){
//一个是全选了，一个是全不选
if(this.checkAll){
this.checkGroup=this.good_list
}else {
this.checkGroup=[]
}
},
checkOne(){
if(this.checkGroup.length==this.good_list.length){
//全选
this.checkAll=true
}else {
this.checkAll=false
}
},
handleDown(item){
if(item.count>1){
item.count--
}else {
alert('太少了，我受不了了')
}
}
}
})
</script>
</html>
5 v-model进阶
lazy:懒对应
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">
<!-- <input type="text" v-model.lazy="name">-->
<!-- <hr>-->
<!-- {{name}}-->
<!-- <input type="text" v-model.number="age"> 必须以数字开头-->
<!-- <hr>-->
<!-- {{age}}-->
<input type="text" v-model.trim="name">
<hr>
{{name}}
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
name: '',
age: ''
},
})
</script>
</html>
6 生命周期钩子
6.1 延迟和定时任务
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
// 延迟执行
// 3s后弹出lqz
// setTimeout(function () {
// alert('lqz')
// },3000)
// 使用箭头函数
// setTimeout(() => {
// alert('lqz')
// }, 3000)
// setInterval,每隔多长时间干什么事
// 应用挺多：由于http协议，不能服务端主动向客户端推送消息
// 服务端向客户端推送消息：轮询，长轮询，websocket
setInterval(function () {
console.log('lqz')
},3000)
</script>
</html>
# 8个
-created
-mounted
-updated
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>生命周期</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="box">
<child v-if="isShow"></child>
<hr>
<button @click="terminate">删除子组件</button>
<button @click="reborn">显示子组件</button>
</div>
</body>
<script>
// 子组件 child 定义的组件，相当于一个标签，但是他有自己的模板和样式，事件
Vue.component('child', {
template: `
<div>
<button @click="handleClick">点我，name更新</button>
<br>
{{name}}
</div>
`,
data() {
return {
name: 'lqz',
t:''
}
},
methods:{
handleClick(){
this.name='彭于晏'
}
},
beforeCreate() {
console.group('当前状态：beforeCreate')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.name)
},
created() {
console.group('当前状态：created')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.name)
},
beforeMount() {
console.group('当前状态：beforeMount')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.name)
},
mounted() {
console.group('当前状态：mounted')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.name)
//用的最多，向后端加载数据，创建定时器等
console.log("页面已被vue实例渲染, data, methods已更新");
console.log('mounted')
// 定时器，每隔3s钟，打印daada
this.t = setInterval(function () {
console.log('daada')
}, 3000)
},
beforeUpdate() {
console.group('当前状态：beforeUpdate')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.name)
},
updated() {
console.group('当前状态：updated')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.name)
},
beforeDestroy() {
console.group('当前状态：beforeDestroy')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.name)
},
destroyed() {
console.group('当前状态：destroyed')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.name)
//组件销毁，清理定时器
clearInterval(this.t)
this.t = null
console.log('destoryed')
},
})
let vm = new Vue({
el: '#box',
data: {
isShow: true
},
methods: {
terminate() {
this.isShow = false
},
reborn() {
this.isShow = true
}
},
})
</script>
</html>
7 跟后端交互
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<!-- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="app">
<!-- <h1>我的名字是：{{name}}</h1>-->
<!-- <h1>我的年龄是：{{age}}</h1>-->
<div v-for="data in data_list">
<h1>电影名为：{{data.name}}</h1>
<h2>导演：{{data.director}}</h2>
<img :src="data.poster" alt="">
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
name: '',
age: '',
data_list:[]
},
// created() {
// // 发送ajax请求，正常来讲，需要使用js向后端发送请求
// // 原生js写的ajax，非常麻烦，还要处理浏览器兼容
// // 于是 jquery，封装了一个ajax函数，方便咱们使用
// //CORS:面试重点，跨域问题
// $.ajax({
// url: 'http://127.0.0.1:5000/',
// type: 'get',
// success: data=> {
// console.log(data)
// this.name=data.name
// this.age=data.age
// }
// })
// }
// created() {
// // fetch:新的ajax，原生js支持的
// fetch('http://127.0.0.1:5000/').then(res => res.json()).then(res=>{
// // console.log(res)
// this.name=res.name
// this.age=res.age
// })
// }
created(){
// axios：第三方
axios.get('http://127.0.0.1:5000/').then(res=>{
console.log(res.data) //需要从res.data中取出后台给的数据
this.data_list=res.data.data.films
})
}
})
</script>
</html>
