一、vue表单
-
单选框:
<!-- 单选框的使用 绑定的属性一定要与value的值保持一致，提交还是会提交value的值--> <div> 性别: <input type="radio" name="sex" value="0" v-model='sex'>男 <input type="radio" name="sex" value="1" v-model='sex'>女 </div> -
复选框：
<!-- 多选框 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> -
下拉框：
<!-- 下拉框 把初始值需要绑定到select上,还是根据value的值对select进行赋值--> <div> <select v-model='edu'> <option value="小学">小学</option> <option value="中学">中学</option> <option value="大学">大学</option> </select> </div> -
文本域：
文本域: <div> <textarea cols="30" rows="10" v-model='text'></textarea> </div>
ps ：VUE单页应用
-
SPA：signal page application（单页应用）
-
多页面：1个url->1个html文件 多个url->多个url
-
单页面:1个url->多个组件 他们之间的切换是通过路由
二、vue事件修饰符
-
事件修饰符
-
stop :阻止事件冒泡
-
prevent:阻止默认行为
<body> <div id='app'> <a href="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" @click.prevent = 'skip'>点击跳转</a> </div> <script src='./vue.js'></script> <script> let vm = new Vue({ el: '#app', data: {}, methods: { skip(){ // e.preventDefault(); // console.log('我不跳转了') } }, }) </script> </body> -
capture:事件捕获 给谁添加谁先出来
<body> <div id='app'> <div class="box" @click.capture = 'box'> 我是外层的盒子1 <div class="outer" @click.capture = 'outer'> 我是中间的盒子1 <div class="inner" @click.capture = 'inner'>我是最里层的盒子1</div> </div> </div> <hr> <div class="box" @click = 'box'> 我是外层的盒子2 <div class="outer" @click.capture = 'outer'> 我是中间的盒子2 <div class="inner" @click.capture = 'inner'>我是最里层的盒子2</div> </div> </div> <hr> <div class="box" @click = 'box'> 我是外层的盒子3 <div class="outer" @click.capture = 'outer'> 我是中间的盒子3 <div class="inner" @click = 'inner'>我是最里层的盒子3</div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let vm = new Vue({ el: '#app', data: {}, methods: { box(){ console.log('box') }, outer(){ console.log('outer') }, inner(){ console.log('inner') } }, }) </script> </body> -
once:只执行一次
<body> <div id='app'> <div class="box" @click='box'> 我是外层的盒子1 <div class="outer" @click.once='outer'> 我是中间的盒子1 <div class="inner" @click='inner'>我是最里层的盒子1</div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let vm = new Vue({ el: '#app', data: {}, methods: { box() { console.log('box') }, outer() { console.log('outer') }, inner() { console.log('inner') } }, }) </script> </body> -
self:只有自己才可以触发自己
<body> <div id='app'> <div class="box" @click='box'> 我是外层的盒子1 <div class="outer" @click.self='outer'> 我是中间的盒子1 <div class="inner" @click='inner'>我是最里层的盒子1</div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let vm = new Vue({ el: '#app', data: {}, methods: { box() { console.log('box') }, outer() { console.log('outer') }, inner() { console.log('inner') }, }) </script> </body>
-
-
鼠标修饰符
-
left：左键触发
-
middle：中间滚轮
-
right：右键触发
（注意：对于修饰符最多只能写两个）
-
<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>
<script src='./vue.js'></script>
<script>
let vm = new Vue({
el: '#app',
data: {},
methods: {
// 点击鼠标左键
left(){
console.log('我是鼠标左键')
},
// 鼠标右键
right(){
console.log('我是鼠标右键')
},
// 鼠标中间键
middle(){
console.log('我是鼠标中间键')
}
},
})
</script>
</body>
-
键盘修饰符
up / down / left / right / enter
<body>
<div id='app'>
<input type="text" @keydown.up = 'up' placeholder = 'up'>
<input type="text" @keydown.down = 'down' placeholder = 'down'>
<input type="text" @keydown.left = 'left' placeholder = 'left'>
<input type="text" @keydown.right = 'right' placeholder = 'right'>
<input type="text" @keydown.enter = 'enter' placeholder = 'enter'>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {},
methods: {
up() {
console.log('我是up');
},
down() {
console.log('我是down');
},
left() {
console.log('我是left');
},
right() {
console.log('我是right');
},
enter(){
console.log('我是enter');
}
}
})
</script>
</body>
-
表单修饰符
- lazy：当光标失去焦点后获取对应的数据；
- number：只匹配用户输入的第一个字，如果是数字则返回number类型，非数字则返回string类型；
- trim：去除用户输入的内容中的首尾空格
<body>
<div id="app">
<!-- lazy当光标失去焦点后获取对应的数据 -->
<input type="text" @click='lazy' placeholder="lazy" v-model.lazy='name'>{{name}}
<hr>
<!-- number 只匹配用户输入的第一个字，如果是数字则返回number类型，非数字则返回string类型 -->
<input type="text" placeholder="number" v-model.number='num'>{{typeof(num)}}
<hr>
<!-- trim 去除用户输入的内容中的首尾空格-->
<input type="text" @click="trim" placeholder="trim" v-model.trim='str'>{{str.length}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
name: 'abc',
num: 666,
str: ' 嗯哼 '
},
methods: {
lazy() {
console.log('输入完成');
},
number() {
},
trim() {
},
},
})
</script>
</body>
三、vue生命周期
- 钩子函数：8个
- beforeCreate : el data name 都是undefined
- created：el ：undefined data：可以拿到数据
- beforeMount：el：有节点了，data：有数据 此时el中的数据没有渲染
- mounted:页面渲染完成
- beforeUpdate:更新数据
- updated：更新完成 注意：更新前后数据是一致的
- beforeDestory：销毁之前
- destory:销毁完成
四、vue动画
-
基础使用
-
第一步：给需要添加动画的元素用包裹起来
<transition> <div class="box" v-show='isShow'></div> </transition> -
第二步：设置6个样式
.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); }（注意:如果需要添加多个动画，只能修改样式中的v 把v换成自己定义的类名即可）
-
-
动画库的使用
引入animate.css这个库
地址;https://animate.style/
<transition enter-active-class='animate__animated animate__rubberBand'
leave-active-class="animate__animated animate__bounceOutUp">
<div class="box" v-show='isShow'></div>
</transition>
3824
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
