轮换挑选图片,补充 es6的对象写法,uniapp使用,class和style,条件渲染,列表渲染,input 标签的事件,过滤案例,es6的箭头函数写法,数据双向绑定
Ⅰ 轮换挑选图片
【一】方式一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js2/vue.js"></script>
</head>
<body>
<div id="app">
<h1>图片定时器</h1>
<img :src="img" width="300px" :height="height">
<button @click="handleChange">{{ isRunning ? '停止' : '开启' }}</button>
<!-- <button @click="handleChange">开启/停止</button>-->
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
height:'300px',
img:'./img/1.jpg',
intervalId: null,
isRunning: false,
currentIndex: 1,
imageCount: 7 // 实际图片数量
},
methods:{
handleChange: function () {
if (this.isRunning) {
// 如果定时器正在运行，停止定时器
clearInterval(this.intervalId);
this.intervalId = null; // 清除定时器 ID
this.isRunning = false;
} else {
// 如果定时器未运行，启动定时器
this.intervalId = setInterval(() => {
this.currentIndex = (this.currentIndex % this.imageCount) + 1;
this.img = `./img/${this.currentIndex}.jpg`;
}, 1000);
this.isRunning = true;
}
}
}
})
</script>
</body>
</html>
【二】方式二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js2/vue.js"></script>
</head>
<body>
<div class="app">
<img :src="img" alt="" height="400px" width="400px">
<br>
<button @click="handleClick">开始/停止</button>
</div>
</body>
<script>
new Vue({
el: '.app',
data: {
img: './img/1.jpg',
img_urls: ['./img/1.jpg', './img/2.jpg', './img/3.jpg'],
t: null
},
methods: {
handleClick: function () {
if (this.t) {
// 如果有值，说明定时器开启了 ,清空定时器
clearInterval(this.t)
this.t = null
} else {
// 如果没有值，定时器没开启
// 定时器--每个1s干xx
var _this = this
this.t = setInterval(function () {
//修改img的值
// 根据索引取值_this.img_urls[数字]
// Math.random() * arr.length Math.random() 生成 0---1之间数字 *数组长度---》0--数组长度之间的数字---》Math.floor 向下取整
_this.img = _this.img_urls[Math.floor(Math.random() * _this.img_urls.length)]
}, 1000)
}
}
}
})
</script>
</html>
Ⅱ 补充 es6的对象写法
【一】修改变量，对象中得值，是否会发生变化-->取决于对象是什么类型：值类型 引用类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
// //1 对象定义--最原始
// var person = {
// 'name': 'zyb',
// 'age': 88
// }
// //2 对象定义--省略key的 ''
// var person2 = {
// name: 'zyb',
// age: 88
// }
//3 对象定义--省略key的 '',定义一个变量叫name
var name='zhangsan'
var age =99
var pet={name:"小花猫",hobby:'喵喵拳'} // 引用类型
var person3 = {
name,
age,
pet
}
name='lisi' // 值类型 所以不会修改 name='zhangsan' 的值
// 可变和不可变--->值和引用
// 可变是 值发生改变，内存地址不变--->列表，字典，集合
// 不可变是 值发生变化，内存地址也变--->数字，字符串，布尔，元组
pet.hobby='抽烟'
console.log(person3)
console.log(name)
// // 修改变量，对象中得值，是否会发生变化-->取决于对象是什么类型：值类型 引用类型
</script>
</html>
- 前端控制台展示
【二】总览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
// //1 对象定义--最原始
// var person = {
// 'name': 'zyb',
// 'age': 88
// }
// //2 对象定义--省略key的 ''
// var person2 = {
// name: 'lqz',
// age: 19
// }
//3 对象定义--省略key的 '',定义一个变量叫name
// var name='zhangsan'
// var age =99
// var pet={name:"小花猫",hobby:'喵喵拳'} // 引用类型
// var person3 = {
// name,
// age,
// pet
// }
//
// name='lisi' // 值类型 所以不会修改 name='zhangsan' 的值
// // 可变和不可变--->值和引用
// // 可变是 值发生改变，内存地址不变--->列表，字典，集合
// // 不可变是 值发生变化，内存地址也变--->数字，字符串，布尔，元组
//
// pet.hobby='抽烟'
// console.log(person3)
// console.log(name)
// // 修改变量，对象中得值，是否会发生变化-->取决于对象是什么类型：值类型 引用类型
// 4 对象中放函数
// var name = 'zhangsan'
// var age = 99
//
// var showName = function () {
// console.log(this.name)
// }
//
//
// var person4 = {
// name,
// age,
// showName
// // showName : function () {
// // console.log(this.name)
// // }
// }
// person4.showName()
// 4 最终写法
var name = 'zhangsan'
var age = 99
var person4 = {
name,
age,
showName() {
console.log(this.name+'_NB')
} // 还是跟key,value一样 只不过 key是showName() value是函数
}
person4.showName() // zhangsanNB
</script>
</html>
Ⅲ uniapp使用
【一】介绍
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
【二】下载hbuilderx
- 傻瓜式安装
【三】hbuilderx步骤
【1】HBuilderX创建:
- 1.打开HBuilderX，选择菜单栏的“文件”>“新建”>“项目”。
- 2.在新建项目对话框中，选择“uni-app”作为项目类型，点击“下一步”
- 3.填写项目名称、选择存储目录，确认项目模板(此处我们选择“默认模板”)，点击“创建”
- 通过 HbuilderX 创建 uni-app vue3 项目
【2】安装uni-app vue3编译器
【3】编译成微信小程序端代码
- 如果第一次使用就在链接下载
【4】项目结构
- 把转化好的vue代码放在index.vue中
- 记得放进去之后，左上角点击保存
【5】发行，进行云打包
【6】选择打包口，证书
【7】个人证书获取
- 生成证书
【8】安装
然后打包完，下面会出现打包好的软件所在目录，打开发送到手机，即可安装
Ⅳ class和style
- class 和style 都是属性--->使用属性指令 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js2/vue.js"></script>
<style>
.red {
background-color: red;
}
.green {
background-color: green;
}
.font {
font-size: 60px;
}
.height {
height: 400px;
}
</style>
</head>
<body>
<div class="app">
<h1>class的使用--字符串，数组，对象</h1>
<!-- <div :class="class_str">-->
<!-- // vm.class_str='green font' 可以再控制台 控制 展示的属性-->
<!-- <div :class="class_list">-->
<!-- vm.class_list 查看-->
<!-- ['red', 'height', __ob__: Observer]-->
<!-- vm.class_list.push('font') 增加一个font属性 -->
<!-- vm.class_list.pop() pop一个属性 -->
<!-- 'font'-->
<div :class="class_obj">
<!-- vm.class_obj.red=false 修改属性-->
<!-- false-->
<!-- vm.class_obj.font=true 坑:再增加 不显示修改-->
<!-- 使用： Vue.set(class_obj,'font',true) 才有响应式-->
<!-- Vue.set(vm.class_obj,'font',true) 若是没有var vm = 则不需要里面vm.-->
我是个div--class
</div>
<h1>style的使用--字符串，数组，对象</h1>
<!-- <div :style="style_str">-->
<!-- vm.style_str='font-size: 70px;background-color: pink;height:400px'-->
<!-- 'font-size: 70px;background-color: pink;height:400px'-->
<!-- <div :style="style_list">-->
<div :style="style_obj">
我是个div---style
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
class_str: 'red height',
class_list: ['red', 'height'], // 数组 最合适
class_obj: {red: true, height: true} , // 坑 ，修改的属性，必须在一开始就要放进去，
// 后期再放的 就是失去响应式了 使用： Vue.set(class_obj,'font',true) 才有响应式
// Vue.set(vm.class_obj,'font',true) 若是没有var vm = 则不需要里面vm.
style_str:'font-size: 70px;background-color: pink',
style_list:[{'font-size':'70px'},{'background-color':'pink'}],
// style_obj:{'font-size':'70px','background-color':'pink'}, // 因为在前端控制台输入时不能直接输入-
// vm.style_obj.font-size='30px'
// 报错 VM446:1 Uncaught SyntaxError: Invalid left-hand side in assignment
// vm.style_obj['font-size']='30px' .不出来带-的，但是可以[]
// '30px'
style_obj:{fontSize:'70px',backgroundColor:'pink'}, // 可以写成驼峰-->建议这种
},
})
</script>
</html>
Ⅴ 条件渲染
# 1 if else if else 逻辑
# 2 指令v-if v-else v-else-if
# 3 小案例：输入用户成绩，显示：优秀，良好，及格，不及格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js2/vue.js"></script>
</head>
<body>
<div class="app">
<h2>您的成绩是：{{score}}</h2>
<h3 v-if="score>=90&&score<=100">优秀</h3>
<h3 v-else-if="score>=80&&score<90">良好</h3>
<h3 v-else-if="score>=60&&score<80">及格</h3>
<h3 v-else>不及格</h3>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
score: 88
},
})
</script>
</html>
Ⅵ 列表渲染
# 1 循环
# 2 v-for 指令
# 3 购物车小案例+bootstrap样式：
goods_list:[{},{},{}]
【一】 购物车小案例+bootstrap样式： v-for 指令循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<script src="./js2/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 offset-md-3">
<h1 class="text-center">购物车</h1>
<hr>
<div>
<table class="table">
<thead>
<tr>
<th scope="col">商品id</th>
<th scope="col">商品名</th>
<th scope="col">商品价格</th>
<th scope="col">商品数量</th>
</tr>
</thead>
<tbody>
<tr v-for="item in shopping_car" :class="item.id%2>0?'table-danger':'table-success'">
<th scope="row">{{item.id}}</th>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.count}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
shopping_car: [
{id: 1001, name: '极光', price: '1024元', count: 1},
{id: 1002, name: '火麒麟', price: '1688元', count: 3},
{id: 1003, name: '雷神', price: '324元', count: 8},
{id: 1004, name: '盘龙', price: '648元', count: 10},
]
},
})
</script>
</html>
- 再加上条件渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<script src="./js2/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 offset-md-3">
<h1 class="text-center">购物车</h1>
<div class="d-flex justify-content-center">
<button class="btn btn-danger" @click="handleLoad">加载购物车</button>
<button class="btn btn-success" @click="handleClear" style="margin-left: 20px">清空购物车</button>
</div>
<hr>
<div v-if="shopping_car.length>0">
<table class="table">
<thead>
<tr>
<th scope="col">商品id</th>
<th scope="col">商品名</th>
<th scope="col">商品价格</th>
<th scope="col">商品数量</th>
</tr>
</thead>
<tbody>
<tr v-for="item in shopping_car" :class="item.id%2>0?'table-success':'table-info'" :key="item">
<th scope="row">{{item.id}}</th>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.count}}</td>
</tr>
</tbody>
</table>
</div>
<div v-else>
<h3>购物车空空如也</h3>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
shopping_car: []
},
methods: {
handleLoad() {
this.shopping_car = [
{id: 1001, name: '极光', price: '1024元', count: 1},
{id: 1002, name: '火麒麟', price: '1688元', count: 3},
{id: 1003, name: '雷神', price: '324元', count: 8},
{id: 1004, name: '盘龙', price: '648元', count: 10},]
},
handleClear(){
this.shopping_car= []
}
}
})
</script>
</html>
【二】v-for 可以循环的变量类型
# 1 可以循环 ：数字，字符串，数组，对象
# 2 循环时，拿到索引值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for循环</title>
<script src="./js2/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 offset-md-3">
<h1 class="text-center">v-for循环数字</h1>
<div class="d-flex justify-content-center">
<ul>
<li v-for="(item,index) in count">循环到得位置是：{{item}}，索引是：{{index}}</li>
</ul>
</div>
<hr>
<h1 class="text-center">v-for循环字符串</h1>
<div class="d-flex justify-content-center">
<ul>
<li v-for="(item,index) in str">循环到得位置是：{{item}}，索引是：{{index}}</li>
</ul>
</div>
<hr>
<h1 class="text-center">v-for循环列表</h1>
<div class="d-flex justify-content-center">
<div>
<p v-for="(item,index) in girls">第{{index}}号女孩，名是：{{item}}</p>
</div>
</div>
<hr>
<h1 class="text-center">v-for循环对象</h1>
<div class="d-flex justify-content-center">
<div>
<!-- <p v-for="(value,key) in obj">key值为：{{key}},value值为：{{value}}</p>-->
<p v-for="value in obj">value值为：{{value}}</p>
</div>
</div>
<hr>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
count: 10,
str: 'Hello world!',
girls: ['凯特琳', '棉麻', '米娜'],
obj: {name: '凯瑟琳', age: 25, height: 157, weight: 90, hobby: '抽烟,喝酒,烫头'}
},
})
</script>
</html>
【三】key值的解释
# vue中使用的是虚拟DOM，会和原生的DOM进行比较，然后进行数据的更新，提高数据的刷新速度（虚拟DOM用了diff算法）
# 在v-for循环数组、对象时，建议在控件/组件/标签写1个key属性，属性值唯一
页面更新之后，会加速DOM的替换（渲染） 增加了替换的效率
:key="变量"
如 <tr v-for="item in shopping_car" :class="item.id%2>0?'table-success':'table-info'" :key="item">
<th scope="row">{{item.id}}</th>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.count}}</td>
</tr>
【四】数组,对象的检测与更新
# 1 数组或对象的值改了，但是页面没有变化 就需要如下操作
-使用Vue.set(对象，对象key，对象value)
-使用Vue.set(数组，数组的下标，数组value)
# 2 对数组来讲：
# 可以检测到变动的数组操作：
push：最后位置添加
pop：最后位置删除
shift：第一个位置删除
unshift：第一个位置添加
splice：切片
sort：排序
reverse：反转
# 检测不到变动的数组操作：
filter()：过滤
concat()：追加另一个数组
slice()：
map()：
# 3 对于对象
对象.属性=值 #如果属性之前不存在，也不会有响应式
Ⅶ 事件处理
【一】input 标签的事件
# input 标签的事件
事件 释义
input 当输入框进行输入的时候 触发的事件
change 当元素的值发生改变时 触发的事件
blur 当输入框失去焦点的时候 触发的事件
focus 获得焦点，触发事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input 标签事件</title>
<script src="./js2/vue.js"></script>
</head>
<body>
<div class="app">
<h1>input标签事件-input</h1>
<!-- input 当输入框进行输入的时候 触发的事件 在控制台可以看见输入一个 控制台就输出一个-->
<input type="text" v-model="input01" @input="handleInput">--->{{input01}}
<h1>change标签事件-change</h1>
<!-- change 当元素的值发生改变时 触发的事件 变化后会在控制台输出提示 若是删除再输入相同内容 则不会提示-->
<input type="text" v-model="change01" @change="handleChange">--->{{change01}}
<h1>blur标签事件-blur</h1>
<!-- blur 当输入框失去焦点的时候 触发的事件 当输入框失去焦点的时候会在控制台输出提示-->
<input type="text" v-model="blur01" @blur="handleBlur">--->{{blur01}}
<h1>focus标签事件-focus</h1>
<!-- focus 获得焦点，触发事件 获得焦点的时候会在控制台输出提示-->
<input type="text" v-model="focus01" @focus="handleFocus">--->{{focus01}}
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
input01: '',
change01: '',
blur01: '',
focus01: ''
},
methods: {
handleInput(event) {
console.log(event.data)
},
handleChange() {
console.log('变化了')
},
handleBlur() {
console.log('失去焦点了')
},
handleFocus() {
console.log('获得焦点')
}
}
})
</script>
</html>
【二】 过滤案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤案例</title>
<script src="./js2/vue.js"></script>
</head>
<body>
<div class="app">
<input type="text" v-model="myText" @focus="handleFocus" @input="handleInput">
<ul>
<li v-for="item in newDataList">{{item}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
myText: '',
dataList: ['a', 'at', 'atom', 'atommon', 'be', 'beyond', 'cs', 'csrf'],
newDataList:[]
},
methods: {
handleFocus() {
if(this.newDataList.length==0){
this.newDataList = ['a', 'at', 'atom', 'atommon', 'be', 'beyond', 'cs', 'csrf']
}
},
handleInput() {
// 根据输入的值：myText，一个个的去dataList 中过滤，只剩下 字符串包含的 值
var _this = this
this.newDataList = this.dataList.filter(function (item) {
//坑：this指向问题 handleInput()方法里面写function方法 function里面的this就不是当前对象了
if (item.indexOf(_this.myText) >= 0) {
return true
} else {
return false
}
})
}
}
})
// 1 数组过滤方法 filter: 匿名函数返回true，就保留，返回false就不保留
// var l = ['a', 'at', 'atom', 'atommon', 'be', 'beyond', 'cs', 'csrf']
// var new_l = l.filter(function (item) {
// return true
// })
// console.log(new_l)
// 2 字符串的包含
// var a = 'zhl1'
// var b = 'zhl is handsome'
// if (b.indexOf(a) >= 0) {
// console.log('在')
// } else {
// console.log('不在')
// }
</script>
</html>
- 相当于每更新一次输入框，就去datalist中过滤一次，然后把剩下的赋值给newdatalist
【三】es6的箭头函数写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>箭头函数</title>
</head>
<body>
</body>
<script>
// 1 正常函数
// function demo01(){
// console.log('demo01')
// }
// demo01() // 调用函数
// 2 匿名函数
// var f=function (){
// console.log('我是匿名函数')
// } // 匿名函数不赋值 相当于在代码一段中突然出现一个字母 会报错
// f()
//3 由于在函数内部，使用this,会有指向问题-->暂时先不研究-->箭头函数没有自己的this-->在箭头函数中使用this 指的是上一层的this
// 无参数无返回值 function 去掉，() 和 函数体之间加个 =>
// var f = () => {
// console.log('我是匿名函数')
// }
// f()
// 4 有一个参数无返回值
// var f = (a) => {
// console.log('我是匿名函数'+ a)
// }
// f('hjj')
// 4.1 有一个参数 简写成
// var f = a => {
// console.log('我是匿名函数' + a)
// }
// f('hjj')
// 5 多个个参数无返回值,不能简写
// var f = (a, b) => {
// console.log(b + a)
// }
// f(10, 11)
// 6 多个参数，有返回值
// var f = (a, b) => {
// return a + b
// }
// 需要用变量接受返回值 var res=f(10, 11)
// 再打印出来console.log(res)
// 可以简写成 console.log(f(10, 11))
// 6.1 多个参数，有返回值,可以简写， 前提是：函数体内容很简单
// var f = (a, b) => a + b
// console.log(f(10, 11))
// 7 一个参数，有返回值
// var f = a => a + 10
var f = (a) => {
return a + 10
}
console.log(f(10))
</script>
</html>
- es6的箭头函数案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤案例</title>
<script src="./js2/vue.js"></script>
</head>
<body>
<div class="app">
<input type="text" v-model="myText" @focus="handleFocus" @input="handleInput">
<ul>
<li v-for="item in newDataList">{{item}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
myText: '',
dataList: ['a', 'at', 'atom', 'atommon', 'be', 'beyond', 'cs', 'csrf'],
newDataList: []
},
methods: {
handleFocus() {
if (this.newDataList.length == 0) {
this.newDataList = ['a', 'at', 'atom', 'atommon', 'be', 'beyond', 'cs', 'csrf']
}
},
handleInput() {
// 根据输入的值：myText，一个个的去dataList 中过滤，只剩下 字符串包含的 值
this.newDataList = this.dataList.filter(item => item.indexOf(this.myText) >= 0)
}
}
})
</script>
</html>
Ⅷ 数据双向绑定
- input标签的数据双向绑定
# 1 v-model 只针对于 input标签
-双向数据绑定：变量变，页面变;页面变，变量变
# 在控制台修改后输出，就是修改后的 在页面修改输出后也是修改的
-如果使用属性指令绑定 value，只有单向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for循环</title>
<script src="./js2/vue.js"></script>
</head>
<body>
<div class="app">
<p>用户名: <input type="text" v-model="username"></p>
<p>密码: <input type="password" v-model="password"></p>
<p><input type="submit" value="登录" @click="handleSubmit"></p>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
username: '',
password: ''
},
methods: {
handleSubmit() {
console.log(this.username)
console.log(this.password)
}
}
})
</script>
</html>
