玩转Vue_指令1
2019-01-31 本文已影响0人
伍陆柒_
内容相关v-cloak(了解),v-text,v-html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*属性选择器*/
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="box">
<!--v-cloak能够解决插值表达式闪烁的问题-->
<p v-cloak>{{msg}}</p>
<!--
v-text默认是没有闪烁问题的
但是内容区域需要有其他内容时，就不能用v-text
例如：
<p v-text="msg">你好</p>，标签中的'你好'会被msg对应的值替换
而
<p v-cloak>你好{{msg}}</p>，标签中的你好会被保留
-->
<p v-text="msg"></p>
<!--
v-html会将内容当成html输出
而v-cloak，v-text则是单纯的放字符串
-->
<div v-cloak>{{msg2}}</div>
<div v-text="msg2"></div>
<div v-html="msg2"></div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el : '#box',
data : {
msg : 'hello,vue!',
msg2 : '<h2>Hello,vue!</h2>'
}
})
</script>
</body>
</html>
绑定属性v:bind
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<!--v-bind绑定属性的指令-->
<input type="button" value="按钮" v-bind:title="mytitle"/>
<!--简写方式：直接用一个:，绑定属性中可以写一些表达式-->
<input type="button" value="按钮" :title="mytitle"/>
<input type="button" value="按钮" :title="mytitle+666"/>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el : '#box',
data : {
msg : 'hello,vue!',
msg2 : '<h2>Hello,vue!</h2>',
mytitle: '绑定属性'
}
})
</script>
</body>
</html>
绑定事件v-on
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<!--v-on绑定事件，所有事件都能绑定，这里以一个click为例-->
<input type="button" value="按钮" v-on:click="show"/>
<!-- 简写方式 -->
<input type="button" value="按钮" @click="show"/>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el : '#box',
data : {
msg : 'hello,vue!',
msg2 : '<h2>Hello,vue!</h2>',
mytitle: '绑定属性'
},
methods:{
// methods属性中定义了Vue实例所有可用的方法
show : function(){
alert('GOGOGO');
}
}
})
</script>
</body>
</html>
跑马灯练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 控制区域 -->
<div id="app">
<input type="button" name="" id="" value="浪起来" @click="lang"/>
<input type="button" name="" id="" value="低调" @click="stop"/>
<h4>{{msg}}</h4>
</div>
<script type="text/javascript">
var vue = new Vue({
el:'#app',
data:{
msg:'猥琐发育，别浪~~!',
intervalId : null // 自定义的定时id
},
methods:{
// ES6写法
// 注意:在VM实例中想要获取data中的数据,或者想要调用methods中的方法,
// 必须通过this.数据属性名或this.方法名来访问,this表示new出赖的VM实例
lang(){
// 判断this.intervalId若不为空,不向下进行,否则定时器将会重复开启,"越跑越快"
if(this.intervalId != null){return;}
// 尖嘴函数,这样就不会出现this指向问题
this.intervalId = setInterval(()=>{
// console.log(this.msg);
// 截取首字符
var start = this.msg.substring(0,1);
// 截取剩余字符
var end = this.msg.substring(1);
// 拼接新的字符串赋值给this.msg
this.msg = end + start;
},400)
},
stop(){
clearInterval(this.intervalId);
// 每当清除定时器后,需要重新把this.intervalId赋值为null,否则无法再次启动
this.intervalId = null;
}
}
})
/*
分析
给【浪起来按钮】绑定点击事件
在按钮的时间处理函数中拿到msg字符串，然后调用字符串的substring进行截取，
把第一个字符截取放到最后位置即可
这里需要启动一个定时器定时截取字符串
*/
</script>
</body>
</html>
事件修饰符
stop和prevent
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="../js/vue.js" ></script>
<style>
#app{
height: 150px;
background: #42B983;
}
</style>
</head>
<body>
<div id="app" @click="divShow">
<!-- stop阻止事件冒泡 -->
<input type="button" value="按钮1" @click.stop="btnShow">
<!-- prevent阻止默认行为 -->
<a href="https://www.baidu.com" @click.prevent="linkShow">去百度</a>
</div>
<script type="text/javascript">
// 创建一个vue实例,这个实例，即VM
var vm = new Vue({
el : '#app',
data : {},
methods:{
divShow(){
console.log('div显示信息');
},
btnShow(){
console.log('btn显示信息');
},
linkShow(){
console.log('link显示信息');
}
}
})
</script>
</body>
</html>
capture
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="../js/vue.js" ></script>
<style>
#app{
height: 150px;
background: #42B983;
}
</style>
</head>
<body>
<div id="app" @click.capture="divShow">
<!-- capture添加事件侦听器时使用事件捕获模式,事件顺序由外向内 -->
<input type="button" value="按钮2" @click="btnShow">
</div>
<script type="text/javascript">
// 创建一个vue实例,这个实例，即VM
var vm = new Vue({
el : '#app',
data : {},
methods:{
divShow(){
console.log('div显示信息');
},
btnShow(){
console.log('btn显示信息');
},
linkShow(){
console.log('link显示信息');
}
}
})
</script>
</body>
</html>
self
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="../js/vue.js" ></script>
<style>
#app{
height: 150px;
background: #42B983;
}
</style>
</head>
<body>
<div id="app" @click.self="divShow">
<!-- self点击自己才触发事件 -->
<input type="button" value="按钮1" @click="btnShow">
</div>
<script type="text/javascript">
// 创建一个vue实例,这个实例，即VM
var vm = new Vue({
el : '#app',
data : {},
methods:{
divShow(){
console.log('div显示信息');
},
btnShow(){
console.log('btn显示信息');
},
linkShow(){
console.log('link显示信息');
}
}
})
</script>
</body>
</html>
once
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="../js/vue.js" ></script>
<style>
#app{
height: 150px;
background: #42B983;
}
</style>
</head>
<body>
<div id="app" @click="divShow">
<!-- once事件只触发一次 -->
<!-- <a href="https://www.baidu.com" @click.prevent.once="linkShow">去百度</a> -->
<input type="button" value="按钮1" @click.once="btnShow">
<a href="https://www.baidu.com" @click.once="linkShow">去百度</a>
<!-- stop和self的区别 : self不能阻止子级元素冒泡 -->
</div>
<script type="text/javascript">
// 创建一个vue实例,这个实例，即VM
var vm = new Vue({
el : '#app',
data : {},
methods:{
divShow(){
console.log('div显示信息');
},
btnShow(){
console.log('btn显示信息');
},
linkShow(){
console.log('link显示信息');
}
}
})
</script>
</body>
</html>
