day02 表单以及修饰符，生命周期，动画
一、表单
1.单选框:
绑定的属性一定要与value的值保持一致，提交还是会提交value的值，没有v-model，用name属性互斥，有则可以不写name属性
<!-- 单选框的使用 绑定的属性一定要与value的值保持一致，提交还是会提交value的值-->
<div>
性别: <input type="radio" name="sex" value="0" v-model='sex'>男 <input type="radio" name="sex" value="1" v-model='sex'>女
</div>
2.多选框：
<1>.如果初始值为数组:会把value的值赋值给数组 <2>.如果初始值是对象，则会把数据类型转为布尔值，那么最终的结果就会以true/false展示
<!-- 多选框 1.如果初始值为数组:会把value的值赋值给数组
2.如果初始值是对象，则会把数据类型转为布尔值，那么最终的结果就会以true/false展示-->
<div>
<input type="checkbox" checked value="sing" v-model='hobby'>唱歌
<input type="checkbox" value="dance" v-model='hobby'>跳舞
<input type="checkbox" value="coding" v-model='hobby'>敲代码
{{hobby}}
</div>
<!-- 初始值为对象 -->
<div>
<input type="checkbox" checked value="sing" v-model='hobby2'>唱歌2
<input type="checkbox" value="dance" v-model='hobby2'>跳舞2
<input type="checkbox" value="coding" v-model='hobby2'>敲代码2
{{hobby2}}
</div>
3.下拉框:
把初始值需要绑定到select上,还是根据option的value的值对select进行赋值
选择列表实现多选，只需要加一个mutiple属性
<!-- 下拉框 把初始值需要绑定到select上,还是根据value的值对select进行赋值-->
<div>
<select v-model='edu'>
<option value="小学">小学</option>
<option value="中学">中学</option>
<option value="大学">大学</option>
</select>
</div>
4.文本域
文本域:
<div>
<textarea cols="30" rows="10" v-model='text'></textarea>
</div>
<script>
// vue的配置项有哪些？ el data methods
new Vue({
el:'#app',
data:{
name:'张三',
sex:'0',
hobby:[],
hobby2:{a:'10'},
edu:'大学',
text:'abc'
},
methods: {
},
})
</script>
5.VUE单页应用
SPA：signal page application（单页应用）
多页面：1个url->1个html文件 多个url->多个url
单页面:1个url->多个组件 他们之间的切换是通过路由
二、修饰符
event事件：
<1>.如果方法调用没有带括号，则是隐式传参，那么直接在方法中调用event
<2>.如果方法调用带参数，那么参数中第一位就是event对象，那么此时实参需要用$event来传参 $event 不允许换名 直接在方法中调用event
<body>
<div id='app'>
<!-- event事件：
如果方法调用没有带括号，则是隐式传参，那么直接在方法中调用event
如果方法调用带参数，那么参数中第一位就是event对象，那么此时实参需要用$event来传参 $event 不允许换名 直接在方法中调用event
-->
<div>{{num}}</div>
<button @click = 'add'>点击自增</button>
<button @click = 'add5'>点击增加5</button>
<button @click = 'add5($event,3)'>点击增加3</button>
</div>
</body>
<script src='./vue.js'></script>
<script>
let vm = new Vue({
el: '#app',
data: {
num:10,
},
methods: {
// 定义自增方法:
add(event){
this.num++
console.log(event)
},
add5(event,n){
this.num=this.num+n
console.log(event)
}
},
})
</script>
1.事件修饰符
stop :阻止事件冒泡
<div id='app'>
<div class="box" @click = 'box'>
我是外层的盒子
<div class="outer" @click.stop = 'outer'>
我是中间的盒子
<div class="inner" @click.stop = 'inner'>我是最里层的盒子</div>
</div>
</div>
</div>
prevent:阻止默认行为
<div id='app'>
<a href="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" @click.prevent = 'skip'>点击跳转</a>
</div>
capture:事件捕获 给谁添加谁先出来
once:只执行一次
self:只有自己才可以触发自己
2.鼠标修饰符
left:左键触发
right:右键触发
middle:中间滚轮
注意：对于修饰符自多只能写两个
<body>
<div id='app'>
<!-- 鼠标 左键，右键,中间键 -->
<input type="text" @click.left = 'left' placeholder="left">
<input type="text" @click.middle = 'middle' placeholder="middle">
<!-- 注意：对于修饰符自多只能写两个 -->
<input type="text" @click.right.prevent = 'right' placeholder="right">
</div>
</body>
<script src='./vue.js'></script>
<script>
let vm = new Vue({
el: '#app',
data: {},
methods: {
// 点击鼠标左键
left(){
console.log('我是鼠标左键')
},
// 鼠标右键
right(){
console.log('我是鼠标右键')
},
// 鼠标中间键
middle(){
console.log('我是鼠标中间键')
}
},
})
</script>
3.键盘修饰符
up,down,left,right,enter(回车)
4.表单修饰符
lazy:失去焦点和回车后，内容发生变化，若没有，默认实时变化
number:只判断第一个值是否是number类型 是number返回number 不是返回string
trim:去除用户输入内容的首尾空格
<body>
<div id='app'>
<!-- 表单修饰符 -->
<!-- lazy 失去焦点后获取对应数据-->
<input type="text" @click= 'lazy' placeholder="lazy" v-model.lazy='name'>{{name}}
<!-- number 只匹配第一个字符，如果是数字，则返回数字类型，如果是非数字则返回字符串-->
<input type="text" placeholder="number" v-model.number='num'>{{typeof(num)}}
<!-- trim 这是去除用户输入的内容中的首位空格-->
<input type="text" @click = 'trim' placeholder="trim" v-model.trim='str'>{{str.length}}
</div>
</body>
<script src='./vue.js'></script>
<script>
let vm = new Vue({
el: '#app',
data: {
name:'abc',
num:10,
str:'哈哈'
},
methods: {
// 向上
lazy(){
console.log('输入完成')
},
trim(){
}
},
})
</script>
三、vue生命周期
钩子函数：8个
beforeCreate : el data name 都是undefined
created：el ：undefined data：可以拿到数据
beforeMount：el：有节点了，data：有数据 此时el中的数据没有渲染
mounted:数据、页面加载完成，比如：轮播，数据请求都写在mounted中
beforeUpdate:更新数据
updated：更新完成 注意：更新前后数据是一致的
beforeDestory：销毁之前
destory:销毁完成
vm.$mount('#app')这是另外的一种挂载方式
模拟销毁过程
document.querySelector('button').onclick = function(){
vm.$mount('#app')
}
<body>
<button>点击销毁</button>
<div id='app'>
<div>name:{{name}}</div>
<input type="text" v-model='msg'>
</div>
</body>
<script src='./vue.js'></script>
<script>
let vm = new Vue({
// el: '#app',
data: {
name:'张三',
msg:'信息'
},
methods: {
},
// 生命周期中的钩子函数 el,data,name 均为undefined
beforeCreate() {
console.log('创建之前')
console.log('el:',this.$el)
console.log('data:',this.$data)
console.log('name:',this.name)
},
// 创建完成 el:undefined,data:张三
created() {
console.log('创建完成')
console.log('el:',this.$el)
console.log('data:',this.$data)
console.log('name:',this.name)
},
// 挂载之前 el已经渲染节点，但是数据还未渲染
beforeMount() {
console.log('挂载之前')
console.log('el:',this.$el)
console.log('data:',this.$data)
console.log('name:',this.name)
},
// 挂载完成 数据和页面都已经加载完成 比如后期的轮播图，ajax请求都需要写在这里
mounted() {
console.log('挂载完成')
console.log('el:',this.$el)
console.log('data:',this.$data)
console.log('name:',this.name)
},
// 更新数据
beforeUpdate() {
console.log('更新之前')
console.log('el:',this.$el)
console.log('data:',this.$data)
console.log('msg:',this.msg)
},
updated() {
console.log('更新完成')
console.log('el:',this.$el)
console.log('data:',this.$data)
console.log('msg:',this.msg)
},
// 销毁之前
beforeDestroy() {
console.log('销毁之前')
},
// 销毁完成
destroyed() {
console.log('销毁完成')
},
})
// }).$mount('#app')这是另外的一种挂载方式
// 模拟销毁过程
// document.querySelector('button').onclick = function(){
// vm.$mount('#app')
// }
</script>
四、动画
1.基础使用
第一步：给需要添加动画的元素用包裹起来
第二步：设置6个样式
注意:如果需要添加多个动画，只能修改样式中的v 把v换成自己定义的类名即可
<style>
.box {
width: 100px;
height: 100px;
background: red;
margin-bottom: 20px;
}
.v-enter{
opacity: 0;
}
.v-enter-to{
opacity: 1;
}
.v-enter-active{
transition: all 2s;
}
.v-leave{
opacity: 1;
}
.v-leave-to{
opacity: 0;
}
.v-leave-active{
transition: all 2s;
transform: rotate(360deg);
}
.two-enter{
opacity: 0;
}
.two-enter-to{
opacity: 1;
}
.two-enter-active{
transition: all 2s;
}
.two-leave{
opacity: 1;
}
.two-leave-to{
opacity: 0;
}
.two-leave-active{
transition: all 2s;
transform: rotate(90deg);
}
</style>
</head>
<body>
<div id='app'>
<transition>
<div class="box" v-show='isShow'></div>
</transition>
<!--注意:如果需要添加多个动画，只能修改样式中的v 把v换成自己定义的类名即可-->
<transition name='two'>
<div class="box" v-show='isShow'></div>
</transition>
<button @click='change'>点击切换</button>
</div>
</body>
<script src='./vue.js'></script>
<script>
let vm = new Vue({
el: '#app',
data: {
isShow: true
},
methods: {
change() {
this.isShow = !this.isShow
}
},
})
</script>
2.动画库的使用
<1>.引入animate.css这个库
地址;https://animate.style/
<2>
<transition enter-active-class='animate__animated animate__rubberBand' leave-active-class="animate__animated animate__bounceOutUp">
<div class="box" v-show='isShow'></div>
</transition>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<style>
.box {
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id='app'>
<transition enter-active-class='animate__animated animate__rubberBand'
leave-active-class="animate__animated animate__bounceOutUp"
>
<div class="box" v-show='isShow'></div>
</transition>
<button @click='change'>点击切换</button>
</div>
</body>
<script src='./vue.js'></script>
<script>
let vm = new Vue({
el: '#app',
data: {
isShow: true
},
methods: {
change() {
this.isShow = !this.isShow
}
},
})
</script>
小球案例：
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<style>
.box {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: red;
}
</style>
</head>
<body>
<div id='app'>
<button @click='show'> 点击加入购物车</button>
<transition @before-enter='beforeEnter' @enter = 'enter' @after-enter='afterenter'>
<div class="box" v-show='isShow'></div>
</transition>
</div>
</body>
<script src='./vue.js'></script>
<script>
let vm = new Vue({
el: '#app',
data: {
isShow: false
},
methods: {
show() {
this.isShow = !this.isShow
},
//进来之前 el 就是当前你要操作的对象 这里指的就是小球
beforeEnter(el){
el.style.transform = 'translate(0,0)'
},
enter(el,done){
el.offsetWidth //目的是为了触发动画,原生中js中的三大系列都可以，eg:offsetWidth,clientWidth,scroll
el.style.transition = 'all 3s'
el.style.transform = 'translate(300px,500px)'
done() //用来触发afterenter函数
},
afterenter(el){
this.isShow = !this.isShow
}
},
})
</script>
</html>
五、页面中新增加属性后页面不渲染问题怎么解决
如果数据没有在data中提前声明，那么后续的修改添加都不会引起页面的重新渲染，这就导致后面新增的属性无法实时更新到页面
1.对象：
解决方法： this.$set(this.json,‘sex’,‘男’) Vue.set(this.json,‘sex’,‘女’)
2.数组：
拿到数据之前先添加需要添加的属性，然后再去赋值。
扫一扫
249
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
