文本渲染之3种方式
1.{{}}：插值表达式 弊端：会出现页面闪烁问题
v-text：把vue实例中的内容当作纯文本，显示在浏览器v-html：把vue实例中的内容进行渲染后，浏览器会再次执行
<html>
<head>
<meta charset="utf-8">
<title>文本渲染</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 1. 纯文本
插值表达式:会出现闪烁的问题 -->
<div>
{{msg}}
</div>
<!-- 2. 纯文本 -->
<div v-text="msg2">
</div>
<!-- 3. 进行文本渲染 -->
<div v-html="msg3">
</div>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
msg:'<b>msg1111</b>',
msg2:'<b>msg2222</b>',
msg3:'<b>msg3333</b>',
}
});
</script>
</body>
</html>
属性绑定: v-bind：（v-bind可以省略，直接写 ： ）
<html>
<head>
<meta charset="utf-8">
<title>属性绑定</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<img v-bind:src="imgurl" :title="title" />
</div>
<div>
<input type="checkbox" :disabled="flag"/>
</div>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
imgurl:'img/亚索.jpg',
title:'憨包包',
flag:true,
}
})
</script>
</body>
</html>
样式绑定、三元运算符
-
<div :class="style1">：一种样式 -
<div :class="[style1,style2]">：两种样式并存 -
<div :class="{fontSize:styleFlag}">：根据true 和false 来判断是否有fontSize属性 -
<p :class="[isFlag?red:blue]">：三元运算符使用样式
<html>
<head>
<meta charset="utf-8">
<title>样式绑定</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
.fontSize{
font-size: 30px;
}
.backColor{
background-color: aquamarine;
}
.redcolor{
color: red;
}
.bluecolor{
color: blue;
}
</style>
</head>
<body>
<div id="app">
<!-- <div :class="style1"> -->
<!-- <div :class="[style1,style2]"> -->
<div :class="{fontSize:styleFlag}">
样式绑定
</div>
<p :class="[isFlag?red:blue]">
三元运算符
</p>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
style1:'fontSize',
style2:'backColor',
styleFlag:true,
isFlag:true,
red:'redcolor',
blue:'bluecolor'
}
});
</script>
</body>
</html>
控制台可以进行相应的更改 true false 属性
事件绑定
v-on-事件名称@事件名称
<html>
<head>
<meta charset="utf-8">
<title>事件处理</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- <button v-on-click=''></button> -->
<div>
<button type="button" @click="count++">
{{count}}
</button>
</div>
<div>
<button type="button" @click="fun()">
调用无参方法
</button>
</div>
<div>
<button type="button" @click="fun1(10)">
调用有参方法
</button>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
}，
methods:{
// 方法名(){}
fun(){
console.log("无参方法");
},
fun1(i){
console.log(i);
},
}
});
</script>
</body>
</html>
冒泡事件
- stop：阻止事件冒泡
在进行阻止时，最外边的事件可以不用写stop，自动阻止
- prevent：阻止默认事件（例如：提交事件）
- once：只触发一次
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<title></title>
</head>
<body>
<!-- 冒泡事件 -->
<div id="app">
<div @click="alert1()">
111
<div @click.stop="alert2()">
222
<div @click.stop="alert3()">
333
</div>
</div>
</div>
<div>
<form action="index.html" @submit.prevent="sub()">
<button type="submit">提交</button>
</form>
</div>
<div @click="addInfo()">
hello{{message}}
</div>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
message:'vue.js',
},
methods:{
alert1(){
alert(1);
},
alert2(){
alert(2);
},
alert3(){
alert(3);
},
sub(){
console.log("组织默认事件");
},
addInfo(){
this.message = this.message+"!";
}
}
})
</script>
</body>
</html>
