json
vue-事件修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 300px;
background-color: aqua;
}
.minbox {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<script src="./jquery/vue.js"></script>
<script>
window.onload=function(){
new Vue ({
el:'#app',
data:{
},
methods:{
firstClicked:function(){
alert('box')
},
secondClicked:function(){
alert('minbox')
}
}
})
}
</script>
</head>
<body>
<div id="app">
<div class="box" @click="firstClicked">
<!-- 第一种:这时点击会将该点击事件传给父级 -->
<!-- <div class="minbox" @click="secondClicked"> -->
<!-- 阻止事件 -->
<div class="minbox" @click.stop.prevent="secondClicked">
</div>
</div>
</div>
</body>
</html>
练习题-弹窗
第一种–jquery:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
<script src="./jquery/jquery-1.12.4.min.js"></script>
<script>
$(function(){
//第一种方法
$('#btn01').click(function(){
$('#pop').show()
})
$('#shutoff').click(function(){
$('#pop').hide()
})
$('.mask').click(function(){
$('#pop').hide()
})
//第二种方法
/*$('#btn01').click(function(){
$('#pop').show()
return false //阻止事件冒泡
})
$('#shutoff').click(function(){
$('#pop').hide()
})
$('body').click(function(){
$('.pop_con').hide()
})
$('.pop_con').click(function(){
return false
})*/
})
</script>
</head>
<body>
<input type="button" value="弹出弹窗" id="btn01">
<div class="pop_main" id="pop">
<div class="pop_con">
<div class="pop_title">
<h3>系统提示</h3>
<a href="#" id="shutoff">x</a>
</div>
<div class="pop_detail">
<p class="pop_text">亲!请关注近期的优惠活动!</p>
</div>
<div class="pop_footer"></div>
</div>
<div class="mask"></div>
</div>
</body>
</html>
第二种–vue:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>聊天</title>
<style>
.outBox {
width: 322px;
height: 360px;
border: 1px solid black;
/* padding: 50px; */
}
.box {
width: 300px;
height: 300px;
border: 1px solid black;
margin: 10px;
overflow:auto
}
select {
margin-left: 10px;
}
.bTalk {
text-align: left;
}
.aTalk span{
background-color: blue;
color: aliceblue;
}
.bTalk {
text-align: right;
}
.bTalk span{
background-color: gold;
color: aliceblue;
/* float: right; */
}
</style>
<script src="../jquery/vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:"#app",
data:{
inputValue:'',
sayValue:'0',
array:[ //之所以使用数组而不是字典,是因为字典中的键是唯一的
{who:"A",said:"还没吃吗?"},
{who:"B",said:"吃了,你呢?"}
]
},
methods:{
clicked:function(){
if (this.inputValue==''){
alert('输入内容为空,请重新输入')
return
}
this.array.push({who:(this.sayValue=='0'?'A':'B'),said:this.inputValue})
this.inputValue=''
}
}
})
}
</script>
</head>
<body>
<div id="app">
<div class="outBox">
<div class="box" id="words">
<!-- 小胡子语法 <>{{}}</> 而不可以直接使用在>里面 -->
<div v-for="item in array" :class="[item.who=='A'?'aTalk':'bTalk']"><span>{{item.who}}说:{{item.said}}</span></div>
<!-- <div class="bTalk"><span>B说:吃了,你呢?</span></div> -->
</div>
<div>
<!-- v-model 双向绑定 -->
<select name="" id="input02" v-model="sayValue">
<option value="0" id="aSay">A说</option>
<option value="1" id="bSay">B说</option>
</select>
<input type="text" id="input01" v-model="inputValue">
<input @click="clicked" type="button" value="提交" id="btn">
</div>
</div>
</div>
</body>
</html>
过滤器
内置过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery/vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#app',
data:{
msg:"hello word"
},
filters:{ //内置过滤器 可以写多个函数
reverse:function(value){
return value.split('').reverse().join('')
}
}
})
}
</script>
</head>
<body>
<div id="app">
{{msg}}
<br>
{{msg | reverse}}
</div>
</body>
</html>
外置过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery/vue.js"></script>
<script>
window.onload =function(){
//一个外置过滤器里面只能写一个函数
Vue.filter('upper',function(value){
return value.toUpperCase()
})
Vue.filter('lower',function(value){
return value.toLowerCase()
})
new Vue({
el:"#app",
data:{
msg:"hello word"
}
})
}
</script>
</head>
<body>
<div id="app">
{{msg|upper}}
<br>
{{msg|upper|lower}}
</div>
</body>
</html>
自定义指令
外部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery/vue.js"></script>
<script>
window.onload=function(){
Vue.directive('style',{ //自定义指令名
inserted:function(el){
el.style.width='300px',
el.style.height='300px',
el.style.background='blue'
}
}
)
new Vue({
el:"#app",
})
}
</script>
</head>
<body>
<div id="app">
<!-- 自定义指令:v-style -->
<div v-style></div>
</div>
</body>
</html>
内部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery/vue.js"></script>
<script>
window.onload=function(){
Vue.directive('style',{ //自定义指令名
inserted:function(el){
el.style.width='300px',
el.style.height='300px',
el.style.background='blue'
}
}
)
new Vue({
el:"#app",
directives:{
'focus':{
inserted:function(el){
el.focus()
el.style.background='pink'
}
}}
})
}
</script>
</head>
<body>
<div id="app">
<input type="text" v-focus>
</div>
</body>
</html>
定时器之箭头函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*定时器 1.调用的代码 2.定时的时间(只能以毫秒为单位) 定时器是异步执行的*/
//setTimeout(func,3000) //一次性定时器
setInterval(()=>{
alert('func')},3000) //箭头函数
// var timer = setInterval(func,3000) //多次定时器
// function func () {
// alert('func')
// clearInterval(timer) //清除定时器,传一个参数,参数是定时器的名字
// }
</script>
</head>
<body>
</body>
</html>
