使用的vscode
快速创建html代码 !(英文)+Tab
我的第一个vue代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<!--有闪烁问题-->
<p v-cloak>{{msg}}</p>
<!--没有闪烁问题-->
<h4 v-text="msg"></h4>
<div>{{msg2}}</div>
<div v-text="msg2"></div>
<!--可以解析html-->
<div v-html="msg2">{{msg2}}</div>
<!--下面两个等价-->
<input type="button" value="按钮" v-bind:title="mytitle + msg + '哈哈哈'">
<input type="button" value="按钮" :title="mytitle + msg + '哈哈哈'" v-on:click="show">
<input type="button" value="按钮" :title="mytitle + msg + '哈哈哈'" @mouseover="show">
</div>
<script src="./lib/vue-2.4.0.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'1234',
msg2:'<h1> 我 是 h 1 哈哈哈哈</h1>',
mytitle:'我是title'
},
methods:{
show:function(){
alert('hello')
}
}
})
</script>
</body>
</html>
v-cloak
1.使用 v-cloak 能够解决 插值表达式闪烁的问题
v-text
1.没有插值表达式闪烁的问题
2.会覆盖内容
v-html
可以解析字符串中的html格式
v-bind: 可以简写直接用 :
用于绑定属性的指令(字符串中的为变量)
v-on: 可以简写直接用 @
:click 绑定一个点击事件
:mouseover: 绑定一个鼠标触碰事件
跑马灯案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="走" @click="go">
<input type="button" value="停" @click="stop">
<h4>{{msg}}</h4>
</div>
<script>
var vm =new Vue({
el:'#app',
data:{
msg:'兄弟们跟我走~~!!',
intervalId:null
},
methods:{
/*ES6写法*/
go(){
if(this.intervalId !=null){
return ;
}
//=> 箭头函数 解决了this指向问题
this.intervalId = setInterval(() => {
// console.log(this.msg)
var st = this.msg.substring(0,1)
var end = this.msg.substring(1)
this.msg=end+st
},50)
},
stop(){
clearInterval(this.intervalId)
this.intervalId = null;
}
}
})
</script>
</body>
</html>
事件修饰符
.stop 阻止冒泡
.prevent
.capture
.once
.self
<!-- 使用 .stop 阻止冒泡 -->
<!-- <div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div> -->
<!-- 使用 .prevent 阻止默认行为 -->
<!-- <a href="http://www.baidu.com" @click.prevent="linkClick">有问题,先去百度</a> -->
<!-- 使用 .capture 实现捕获触发事件的机制 -->
<!-- <div class="inner" @click.capture="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div> -->
<!-- 使用 .self 实现只有点击当前元素时候,才会触发事件处理函数 -->
<!-- <div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div> -->
<!-- 使用 .once 只触发一次事件处理函数 -->
<!-- <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题,先去百度</a> -->
<!-- 演示: .stop 和 .self 的区别 -->
<!-- <div class="outer" @click="div2Handler">
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
</div> -->
<!-- .self 只会阻止自己身上冒泡行为的触发,并不会真正阻止 冒泡的行为 -->
<!-- <div class="outer" @click="div2Handler">
<div class="inner" @click.self="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
</div> -->
v-model