目录：Vue其他篇
目录：
1.1 事件返回顶部
1、说明
1. 绑定事件的两种方法：
<button @click="showMsg">按钮</button>
<button v-on:click="test('123', true, color, $event)">新的按钮</button> <!-- $event 传递事件对象 -->
2. 回调函数在vue的methods属性中定义，如果参数集合()没有定义，回调函数有一个默认参数 this
3. 作用域是vue实例化对象，所以在回调函数中，可以通过this访问vue上的数据
4. 所以methods中定义的方法，可以在methods，以及computed等方法中使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<button @click="showMsg">按钮</button>
<button v-on:click="test('123', true, color, $event)">新的按钮</button> <!-- $event 传递事件对象 -->
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
// 定义vue实例化对象
var app = new Vue({
el: '#app',
data: {
color: 'red'
},
// 回调函数定义在methods属性中
methods: {
// 每一个属性代表一个方法
showMsg: function() {
console.log(this ,arguments)
},
// 定义回调函数
test: function() {
console.log(this, arguments) // arguments = ["123", true, "red", MouseEvent]
}
}
})
</script>
</body>
</html>
vue绑定事件
2、事件冒泡和默认行为
事件冒泡：当内存外层都绑定 如 点击事件时，只让最内层事件执行
默认行为：如 a 标签点击默认会跳转到 href 地址中，然其点击后不跳转
一次触发：<button @click.once="print"> 只触发一次 </button>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡和默认行为</title>
<script src="js/vue.js"></script>
<script>
window.onload=function(){
let vm=new Vue({
el:'#itany',
methods:{
show(){
console.log(111);
// e.stopPropagation();
},
print(){
console.log(222);
},
write(){
console.log(333);
},
study(){
console.log(444);
// e.preventDefault();
}
}
});
}
</script>
</head>
<body>
<div id="itany">
<div @click="write">
<p @click="print">
<!-- <button @click="show($event)">点我</button> -->
<button @click.stop="show">点我</button>
</p>
</div>
<hr> <!-- <a href="#" @click="study($event)">俺是链接</a> -->
<a href="#" @click.prevent="study">俺是链接</a>
</div>
</body>
</html>
事件冒泡和默认行为
3、事件修饰符(监控enter、up、down等键盘)
1. 绑定键盘事件的时候，经常会判断按键，通过 e.keyCode
2. 事件修饰符语法 v-on:keyup.修饰符=”回调函数()”，表示，当按下的键是修饰符的时候才会触发
3. 在vue中常见的有9个 esc， tab， space， enter， delete， up，down，left，right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" @keyup.enter="showValue">
<h1>{{msg}}</h1>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
// 定义vue实例化对象
var app = new Vue({
el: "#app",
data: {
msg: ''
},
methods: {
showValue: function(e) {
// console.log(e.target.value)
// 判断点击回车键
// if (e.keyCode === 13) {
// // 作用域是vue实例化对象
// this.msg = e.target.value
// }
console.log(1111);
this.msg = e.target.value; // e.target.value 获取的是输入框的值 }
}
})
</script>
</body>
</html>
监控enter键事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
<script src="js/vue.js"></script>
<script>
/**
* 自定义键位别名
*/
Vue.config.keyCodes={
a:65,
f1:112
} window.onload=function(){
let vm=new Vue({
el:'#itany',
methods:{
show(e){
console.log(e.keyCode);
if(e.keyCode==13){
console.log('您按了回车');
}
},
print(){
// console.log('您按了回车');
// console.log('您按了方向键上');
console.log('11111');
}
}
});
}
</script>
</head>
<body>
<div id="itany">
<!-- 键盘事件：@keydown、@keypress、@keyup -->
<!-- 用户名：<input type="text" @keydown="show($event)"> --> <!-- 简化按键的判断 -->
<!-- 用户名：<input type="text" @keydown="show($event)"> -->
<!-- 用户名：<input type="text" @keydown.13="print"> -->
<!-- 用户名：<input type="text" @keydown.enter="print"> -->
<!-- 用户名：<input type="text" @keydown.up="print"> -->
用户名：<input type="text" @keydown.f1="print"> <!-- 事件修饰符 -->
<button @click.once="print">只触发一次</button>
</div>
</body>
</html>
自定义键位别名
4、事件修饰符
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
<template>
<button @click="submit()" :disabled="isDisable">点击</button>
</template>
<script>
export default {
name: 'TestButton',
data: function () {
return {
isDisable: false
}
},
methods: {
submit() {
this.isDisable = true
setTimeout(() => {
this.isDisable = false
}, 1000)
}
},
}
</script>
防止多次提交
5、事件绑定常用方法
'''一：鼠标事件'''
# click 当用户点击某个对象时调用的事件句柄。
# contextmenu 在用户点击鼠标右键打开上下文菜单时触发
# dblclick 当用户双击某个对象时调用的事件句柄。
# mousedown 鼠标按钮被按下。
# mouseenter 当鼠标指针移动到元素上时触发。
# mouseleave 当鼠标指针移出元素时触发
# mousemove 鼠标被移动。
# mouseover 鼠标移到某元素之上。
# mouseout 鼠标从某元素移开。
# mouseup 鼠标按键被松开。 '''二：键盘事件'''
# keydown 某个键盘按键被按下。
# keypress 某个键盘按键被按下并松开。
# keyup 某个键盘按键被松开。
事件绑定常用方法
1.2 模板返回顶部
1、简介
Vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据
模板就是{{}}，用来进行数据绑定，显示在页面中，也称为Mustache语法
2、数据绑定的方式
a.双向绑定
v-model
b.单向绑定
方式1：使用两对大括号{{}}，可能会出现闪烁的问题，可以使用v-cloak解决
方式2：使用v-text、v-html
3、其他指令
v-once 数据只绑定一次
v-pre 不编译，直接原样显示
官网指令： https://cn.vuejs.org/v2/api/#v-once
1.3 自定义过滤器 返回顶部
1、说明
1. 在vue升级之后，vue不建议使用过滤器，而是用插值表达式，或者动态数据绑定替换
2. 使用过滤器的目的是为了在组件间复用处理数据的业务逻辑
3. Vue类中存在一个静态方法filter方法，用来定义过滤器
2、使用过滤器(过滤器定义必须在实例化vue对象前)
1. 语法 {{数据 | 过滤器名称 参数1 参数2 参数3 | 过滤器2 参数2}}
2. 可以使用多个过滤器，前一个过滤器的输出将作为后一个过滤器的输入
3. 2.0版本的改动 {{数据 | 过滤器(参数1, 参数2)}} （2.0版本对过滤器的传参做了改动）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<p> price: 数据 currency: 过滤器名称 ￥和3：表示传递的参数 </p>
<h1>{{price | currency('￥', 3)}}</h1>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
/**
* 自定义过滤器
* currency 过滤器名称
* @price 价格
* @sign 价格标志
* @len 小数位保留的长度
**/
Vue.filter('currency', function(price, sign, len) { // 从第二个开始才是传递的参数
price = Math.abs(price); // 保证是正数
sign = sign || '￥'; // 默认为人命币标志
len = len || 2; // 默认保留两位小数
var arr = String(parseInt(price)).split(''); // arr = ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
for (var i = arr.length - 3; i > 0; i -= 3) { // 添加了成员后面的位置变了，所以从后向前遍历，首位不能添加
arr.splice(i, 0, ',') // i(插入的索引位置)；0（删除0个字符串）； ','(添加的符合)
} // for循环后 arr = [1, 2, ',', 3, 4, 5, ',', 6, 7, 8]
return sign + arr.join('') + (price - parseInt(price)).toFixed(len).slice(1) // 转化成小数 原数字减去整数 保留len位小数，去掉整数部分
// toFixed(len) 保留len位小数（得到结果是字符串）
// 0.23456.toFixed(3) = "0.235" "'0.235'.slice(1) = ".235"
});
new Vue({
el: '#app',
data: {
price: 1234567891.1234567,
msg: 'a hot day'
}
})
</script>
</body>
</html>
自定义过滤器
1.4 过度返回顶部
1、说明
1. 在元素切换状态的时候（例如：元素的显隐），我们可以为元素添加动画
2. Transition属性：Vue会根据属性值自动创建三个css类，例如 transition=“demo”
demo-transition： 定义过渡的
demo-enter 进入样式
demo-leave 移出样式
3. 注意：2.0类的名称变了
.demo-transition => .demo-enter-active, .demo-leave-active
.demo-enter => .demo-enter
.demo-leave => .demo-leave-to
Transition属性 变成了 transition组件了，通过name定义过渡名称
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.demo {
width: 100px;
height: 100px;
margin-top: 20px;
background: green;
}
/*定义过渡*/
.demo-enter-active,
.demo-leave-active {
transition: all 1s;
}
/*定义进场动画和出场动画*/
.demo-enter,
.demo-leave-to {
width: 0;
height: 0;
opacity: 0;
}
</style>
</head>
<body>
<div id="app">
<button v-on:click="toggle">切换显隐</button>
<transition name="demo">
<div class="demo" transition="demo" v-if="isShow">这是内容</div>
</transition>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
// 定义vue实例化对象
var app = new Vue({
el: '#app',
data: {
isShow: true
},
methods: {
toggle: function() {
// 切换isShow
this.isShow = !this.isShow;
}
}
})
</script>
</body>
</html>
过度
1.5 支付宝注册返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
background: #ccc;
}
#app {
width: 800px;
margin: 50px auto;
border: 1px solid #ccc;
background: #fff;
height: 600px;
padding-top: 80px;
}
label {
margin-left: 100px;
margin-right: 20px;
}
input {
padding: 8px 15px;
width: 300px;
}
ul {
width: 330px;
margin-left: 176px;
border: 2px solid #ccc;
margin-top: -1px;
}
ul li {
padding: 0 15px;
height: 26px;
line-height: 26px;
}
ul li:hover,
ul li.hover {
background: #efefef;
}
</style>
</head>
<body>
<div id="app">
<label>账户名</label>
<input
type="text"
v-model="msg"
@keydown.up="showPrevLi"
@keyup.down="showNextLi"
@keyup.enter="chooseLi"
>
<!-- ul的显示与msg有关 -->
<ul v-show="msg">
<li v-for="item in dealMail" v-on:click="chooseCurrentLi">{{dealMsg}}@{{item}}.<template v-if="item == 189">cn</template><template v-else>com</template></li>
</ul>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
// 创建vue实例化对象
var app = new Vue({
el: '#app',
data: { // 定义绑定的数据
msg: '',
num: -1,
isFirst: true, // 是否是第一次
email: ['qq', 163, 126, 189, 'sina', 'hotmail', 'gmail', 'sohu', '21cn']
}, // 动态数据绑定
computed: {
dealMsg: function(vue) { // 处理msg, 截取@符号之前的
if (this.msg.indexOf('@') >= 0){ // 是否存在@
// 截取@符号之前的，不包括@, slice, substring, substr, 哪个参数表示长度，出现负数，第一个参数大于第二个参数怎么办，*涛
return this.msg.slice(0, this.msg.indexOf('@'))
}
return this.msg // 否则返回msg
}, // 过滤mail集合
dealMail: function() {
if (this.msg.indexOf('@') > 0) { // 判断是否包含@, 包含@，根据@符号后面的内容过滤
var str = this.msg.slice(this.msg.indexOf('@') + 1); // 截取@后面的内容
var result = []; // 过滤email集合
for (var i = 0; i < this.email.length; i++) { // 遍历email找到符号条件的
var mail = this.email[i] + (this.email[i] == 189 ? '.c' : '.co'); // 每一个成员要带上后缀，例如sina => sina.co
if (mail.indexOf(str) === 0) { // 什么成员符合条件：以str开头,
result.push(this.email[i]) // 存储这个成员
}
}
return result; // 返回过滤的结果
}else {
return this.email // 不包含，直接返回email
}
}
}, // 定义事件回调函数
methods: {
chooseCurrentLi: function(e) { // 点击li，然后选中li
var val = e.target.innerHTML; // 获取li的内容
this.msg = val; // 更新msg
}, // 点击向上键，显示前一个li
showPrevLi: function(e) {
e.preventDefault(e); // 阻止默认行为
if (this.isFirst) { // 如果是第一次，不用减了
this.isFirst = false; // 这次过去了，就不是第一次了
} else {
this.num--;
}
this.changeCurrentLiStyle(); // 更新li的样式
}, // 点击向下键，显示后一个li
showNextLi: function() {
this.num++; // 更改num
this.changeCurrentLiStyle(); // 更新li的样式
this.isFirst = false; // 第一次已经过去了
}, getNum: function(len) { // 获取num对应的li的索引值
// 对于任意一个数（正数和负数）
// 对len取余之后，保证在-len到len之间
// var num = this.num % len;
// // 此时加上len，保证是0到2*len之间，一定是正数了
// num += len;
// // 此时再取余，就保证是0到len之间了
// num %= len
return (this.num % len + len) % len;
}, // 改变当前li的样式
changeCurrentLiStyle: function() {
var lis = this.$el.getElementsByTagName('li'); // 获取所有的li
if (lis.length === 0) { // 判断li是否存在
return;
}
var num = this.getNum(lis.length); // 获取索引值
for (var i = 0; i < lis.length; i++) { // 排他法设置类
lis[i].className = '';
}
lis[num].className = 'hover'; // 当前li选中
}, // 点击enter键，显示当前li
chooseLi: function() {
var lis = this.$el.getElementsByTagName('li'); // 获取对应的li
if (lis.length === 0) { // 判断li是否存在
return;
}
var num = this.getNum(lis.length); // 获取索引值
var value = lis[num].innerHTML; // 获取li的值
this.msg = value;
}
}
})
</script>
</body>
</html>
支付宝注册
