文本渲染之3種方式
1.{{}}：插值表達(dá)式 弊端：會(huì)出現(xiàn)頁面閃爍問題
v-text：把vue實(shí)例中的內(nèi)容當(dāng)作純文本，顯示在瀏覽器v-html：把vue實(shí)例中的內(nèi)容進(jìn)行渲染后，瀏覽器會(huì)再次執(zhí)行
<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. 純文本
插值表達(dá)式:會(huì)出現(xiàn)閃爍的問題 -->
<div>
{{msg}}
</div>
<!-- 2. 純文本 -->
<div v-text="msg2">
</div>
<!-- 3. 進(jìn)行文本渲染 -->
<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>
樣式綁定、三元運(yùn)算符
-
<div :class="style1">：一種樣式 -
<div :class="[style1,style2]">：兩種樣式并存 -
<div :class="{fontSize:styleFlag}">：根據(jù)true 和false 來判斷是否有fontSize屬性 -
<p :class="[isFlag?red:blue]">：三元運(yùn)算符使用樣式
<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]">
三元運(yùn)算符
</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>
控制臺(tái)可以進(jìn)行相應(yīng)的更改 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()">
調(diào)用無參方法
</button>
</div>
<div>
<button type="button" @click="fun1(10)">
調(diào)用有參方法
</button>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
}，
methods:{
// 方法名(){}
fun(){
console.log("無參方法");
},
fun1(i){
console.log(i);
},
}
});
</script>
</body>
</html>
冒泡事件
- stop：阻止事件冒泡
在進(jìn)行阻止時(shí)，最外邊的事件可以不用寫stop，自動(dòng)阻止
- prevent：阻止默認(rèn)事件（例如：提交事件）
- once：只觸發(fā)一次
<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("組織默認(rèn)事件");
},
addInfo(){
this.message = this.message+"!";
}
}
})
</script>
</body>
</html>
