vue
漸進式Javascript框架
它可以獨立完成前后端分離式web項目,屬於組件開發
特點：單頁面web應用，數據驅動，數據雙向綁定，虛擬DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>特點</title>
</head>
<body>
<div id="app">
<h1 @click="action">{{ msg }}</h1>
<h2>{{ msgh2 }}</h2>
<h2>{{ msgh22 }}</h2>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
//創建vue實例與頁面標簽進行綁定，該實例就可以控制該標簽內部所有的標簽
new Vue({
//掛載點，與頁面標簽綁定的關鍵，具有唯一性
el:'#app',
//vue中要使用的數據
data:{
msg: 'h1',
msgh2:'',
msgh22:''
},
//methods控制所有事件
methods:{
action:function(){
this.msg = 'h1被點擊了';
this.msgh2 = 'h1被點擊了';
this.msgh22 = 'h1被點擊了'
}
}
});
</script>
</html>
1.插值表達式，v-text，v-html，v-once等代碼表述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本指令</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--插值表達式-->
<p>{{ msg+num }}</p>
<p>{{ num+1 }}</p>
<!--v-text v-html v-once 三個文本指令-->
<!--v-text:純文本-->
<p v-text="msg"></p>
<!--v-html：可以解析標簽-->
<p v-html="htmlmsg" @click="changemsg"></p>
<p v-html="'<b>變粗吧</b>'"></p>
<!--v-noce：限制修改-->
<p v-once="htmlmsg">{{ htmlmsg }}</p>
</div>
</body>
<script>
new Vue ({
el:'#app',
data:{
msg:'msg',
num:10,
htmlmsg:'<b>點擊我可以變斜吧</b>'
},
methods:{
changemsg:function () {
this.htmlmsg = '<i>斜了</i>';
}
}
})
</script>
</html>
2.事件指令等代碼描述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件指令</title>
<script src="js/vue.js"></script>
<style>
[v-cloak] {
display:none;
}
</style>
</head>
<body>
<!-- 取消閃爍-->
<div id="app" v-cloak>
<!--v-on 指令 ：1）明確事件名 2）明確事件函數 事件名：'事件函數'事件函數萬萬不可寫錯-->
<!--基礎事件綁定-->
<p v-on:click="clickaction">單擊</p>
<p v-on:dblclick="dblclickaction">雙擊</p>
<!--綁定事件並傳參-->
<ul>
<li v-on:click="liaction(1)">{{ li1 }}</li>
<li v-on:click="liaction(2)">{{ li2 }}</li>
<li v-on:click="liaction(3)">{{ li3 }}</li>
</ul>
<!--傳遞事件對象-->
<p v-on:click="sysaction1">不傳自定義參數(默認傳個event)</p>
<p v-on:click="sysaction2(1111,$event)">傳自定義參數(需要指定傳event)</p>
<!--v-on：可以簡寫為 @ 符號-->
</div>
</body>
<script>
new Vue ({
el:'#app',
data:{
li1:'111',
li2:'222',
li3:'333',
},
methods:{
clickaction: function () {
alert('單擊')
},
dblclickaction () {
alert('雙擊')
},
liaction (index) {
// alert(this.li1)
alert(index)
},
sysaction1 (ev) {
console(ev)
},
sysaction2 (num,ev) {
console(num);
console(ev)
}
},
})
</script>
</html>
3.屬性指令等代碼表述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屬性指令</title>
<script src="js/vue.js"></script>
<style>
.box {
width: 200px;
height: 200px;
background-color: black;
}
.wrap {
width: 300px;
height: 300px;
background-color: cyan;
}
.box1 {
width: 100px;
height: 100px;
background-color: black;
}
.x {
width: 100px;
}
.y {
height: 100px;
}
.z {
background-color: blueviolet;
}
</style>
</head>
<body>
<div id="app">
<!--v-bind屬性指令：屬性名='屬性變量',v-bind: 可以簡寫為 ： 冒號-->
<!--eg:v-bind:class='myclass'-->
<div class="box" v-bind:style="mystyle" @click="changecolor('red')"></div>
<!--操作單個樣式-->
<div class="box" v-bind:style="{ 'width': w }" @click="changewidth"></div>
<!--操作多個樣式-->
<div class="box" v-bind:style="more_style" @click="changestyle"></div>
<!--v-bind 可以簡寫為 冒號, 綁定所有系統和自定義屬性，屬性一旦綁定，后面就是變量-->
<div :aaa="xxx">簡寫v-bind</div>
<!--操作單個類名-->
<!--直接賦值-->
<div :class="c1" @click="changeclass"></div>
<!--布爾切換-->
<div :class="{ box1:box_able}"></div>
<!--操作多個類名-->
<div :class="[x,y,{z:is_z}]"></div>
</div>
</body>
<script>
new Vue ({
el:'#app',
data:{
mystyle:'background-color:pink;',
w:'500px',
more_style:{
width:'100px',
height:'100px',
borderRadius:'50%',
backgroundColor:'cyan'
},
xxx:'zzz',
c1:'wrap',
box_able:true,
x:'x',
y:'y',
// z:'z',
is_z:'z',
},
methods:{
changecolor (color){
this.mystyle = 'background-color:' + color + ';'
},
changewidth () {
this.w = '600px'
},
changestyle () {
this.more_style.borderRadius = '20%';
this.more_style.backgroundColor = 'tan'
},
changeclass () {
if (this.c1 === 'box') {
this.c1 = 'wrap';
}else {
this.c1 = 'box';
}
//布爾值來回切換
this.box_able = !this.box_able;
}
}
})
</script>
</html>
4.表單指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>base</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--表單指令 v-model 寫法：v-model='變量' 變量value屬性提供值-->
<!--數據的雙線綁定-->
<input type="text" v-model="val">
<input type="text" v-model="val">
<p>{{ val }}</p>
<form action="">
<!--普通輸入框-->
<input type="password" v-model="val">
<!--單選框-->
<!--radio_val 的值是多個單選框中的一個value值，代表該單選框默認選中-->
<p>
<label for="male">nan</label>
<input type="radio" v-model="radio_val" id="male" name="sex" value="male">
<label for="female">nv</label>
<input type="radio" v-model="radio_val" id="female" name="sex" value="female">
<span>{{ radio_val+'被選中' }}</span>
</p>
<!--獨立使用的復選框-->
<!--suer_val 的值為 true和false 決定單個復選框是否被選中-->
<p>
<input type="checkbox" name="sure" value="同意" v-model="sure_val">
<span>{{ sure_val }}</span>
</p>
<!--復選框-->
<!--hobby_val的值是數組，用來存放復選框所有選項的值，值存在代表該該框選中-->
<p>
<input type="checkbox" value="male" name="hobby" v-model="hobby_val">
<input type="checkbox" value="female" name="hobby" v-model="hobby_val">
<input type="checkbox" value="other" name="hobby" v-model="hobby_val">
<span>{{ hobby_val }}</span>
</p>
<p>
<input type="submit">
</p>
</form>
</div>
</body>
<script>
new Vue ({
el:'#app',
data:{
val:'',
radio_val:'male',
sure_val:true,
hobby_val:[]
},
})
</script>
</html>
5.條件指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>條件指令</title>
<script src="js/vue.js"></script>
<style>
[v-cloak] {
display: none;
}
.box {
width: 100px;
height: 100px;
}
.b1 {
background-color: blueviolet;
}
.b2 {
background-color: blue;
}
.r {background-color: red}
.g {background-color: green}
.b {background-color: blue}
</style>
</head>
<body>
<div id="app" v-cloak>
<!--條件指令 v-if,v-show v-if:'變量' v-show：'變量'-->
<!--兩者都是綁定true 和 false 的-->
<p>
<button @click="showaction(true)">顯示</button>
<button @click="showaction(false)">隱藏</button>
</p>
<!--v-if 在隱藏時不會被渲染， 而v-show在隱藏時 是采用display：none -->
<div class="box b1" v-if="is_show"></div>
<div class="box b2" v-show="is_show"></div>
<!--v-if，v-else-if， v-else-->
<p>
<button @click="tagcolor('red')">hong</button>
<button @click="tagcolor('green')">lv</button>
<button @click="tagcolor('blue')">lan</button>
</p>
<div class="box r" v-if="is_color == 'red' "></div>
<div class="box g" v-else-if="is_color == 'green' "></div>
<div class="box b" v-else></div>
</div>
</body>
<script>
new Vue ({
el:'#app',
data:{
is_show:false,
is_color:'red',
},
methods: {
showaction(is_show) {
this.is_show = is_show
},
tagcolor(color){
this.is_color = color
}
}
})
</script>
</html>