Vue基礎(chǔ)
- Vue主要包含兩個(gè)部分：Vue對(duì)象和指令
- 導(dǎo)入標(biāo)簽
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
1. Vue對(duì)象
var 對(duì)象名 = new Vue({
el:關(guān)聯(lián)對(duì)象的選擇器,
data: 數(shù)據(jù)對(duì)象(屬性和值自己決定),
methods:方法對(duì)象(屬性對(duì)應(yīng)的值是方法)
})
2. 設(shè)置標(biāo)簽內(nèi)容
<div id="app-2">
<p>{{pText}}</p>
<a href="">{{aTitle}}</a>
<h1>{{title}}</h1>
</div>
<script type="text/javascript">
var app2 = new Vue({
el:'#app-2',
data:{
pText: '我是段落',
aTitle: '百度一下',
title: '我是標(biāo)題1'
}
})
</script>
3. 設(shè)置標(biāo)簽屬性值
<div id="app-3">
<img v-bind:src="imageUrl" v-bind:title="name"/>
</div>
<script type="text/javascript">
var app3 = new Vue({
el:'#app-3',
data:{
imageUrl:'img/a1.jpg',
name: '路飛'
}
})
</script>
4. if語(yǔ)句
-
v-if='條件語(yǔ)句（Vue屬性名）'：如果條件語(yǔ)句的結(jié)果是true，標(biāo)簽就顯示，否則不顯示（條件語(yǔ)句需要是與Vue屬性相關(guān)聯(lián)的語(yǔ)句）
<div id="app-4">
<!--如果message的值是空就隱藏树枫，否則顯示-->
<p v-if="message">內(nèi)容是:{{message}}</p>
<!--如果message的值是123就顯示堕绩，否則隱藏-->
<p v-if="message=='123'">內(nèi)容是:{{message}}</p>
</div>
<script type="text/javascript">
var app4 = new Vue({
el:'#app-4',
data:{
message: 'Vue.js'
}
})
</script>
5. 循環(huán)結(jié)構(gòu)
<div id="app-5">
<ul>
<li v-for="mesage in names"><img v-bind:src="mesage['img']"/>{{mesage.name}}</li>
</ul>
</div>
<script type="text/javascript">
var app5 = new Vue({
el:'#app-5',
data:{
names:[
{img:'img/a1.jpg', name:'python'},
{img:'img/a2.jpg', name:'前端H5'},
{img:'img/a3.jpg', name:'java大數(shù)據(jù)'},
{img:'img/luffy.jpg', name:'物聯(lián)網(wǎng)'}
]
}
})
</script>
6. 事件綁定
<div id="app-6">
<p>{{num}}</p>
<button v-on:click="addAction">加1</button>
</div>
<script type="text/javascript">
var app6 = new Vue({
el:'#app-6',
data:{
num: 0
},
methods:{
addAction: function(){
this.num ++
}
}
})
</script>
7. input標(biāo)簽內(nèi)容和屬性雙向綁定
<div id="app-7">
<p>{{message}}</p>
<input v-model="message" />
</div>
<script type="text/javascript">
var app7 = new Vue({
el: '#app-7',
data:{
message: '你好'
}
})
</script>
8. stop修飾符
-
v-on：事件名.stop：捕獲指定標(biāo)簽上的指定事件（阻止事件傳遞給父標(biāo)簽）
<div id="div1" v-on:click.stop="action1">
<div id="div2" v-on:click.stop="action2">
<div id="div3" v-on:click.stop="action3">
</div>
</div>
</div>
<script type="text/javascript">
var app1 = new Vue({
el:'#div1',
methods:{
action1:function(){
alert('div1被點(diǎn)擊')
},
action2:function(){
alert('div2被點(diǎn)擊')
},
action3:function(){
alert('div3被點(diǎn)擊')
}
}
})
</script>
9. 表單提交阻止頁(yè)面重載
- 在form標(biāo)簽中設(shè)置：v-on:submit.prevent='方法屬性名'
<form action="" method="get" id="app-2" v-on:submit.prevent="submitAction">
<input type="" name="username" id="" value="" />
<input type="password" name="password" id="" value="" />
<input type="radio" name="sex" id="" value="" />男
<input type="radio" name="sex" id="" value="" />女
<input type="submit" value="提交"/>
</form>
<script type="text/javascript">
var app2 = new Vue({
el:'#app-2',
methods:{
submitAction:function(){
alert('已經(jīng)提交')
}
}
})
</script>
10. Vue加載異步數(shù)據(jù)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-1">
<h1>{{name}}</h1>
<p v-for="data in datalist" v-if="datalist">{{data.title}}</p>
</div>
<!--1.將請(qǐng)求到的數(shù)據(jù)通過(guò)Vue加載到網(wǎng)頁(yè)中
1)
-->
<script type="text/javascript">
//0)創(chuàng)建Vue對(duì)象
var app1 = new Vue({
el:'#app-1',
data: {
datalist: [],
name: 'abc'
}
})
//1)通過(guò)接口請(qǐng)求
$.ajax({
type:"get",
url:"http://rap2api.taobao.org/app/mock/177073/houseList",
async:true,
success:function(result){
//2）數(shù)據(jù)請(qǐng)求成功將請(qǐng)求到的數(shù)據(jù)關(guān)聯(lián)到Vue對(duì)象
console.log(result)
app1.datalist = result.datalist
}
});
</script>
</body>
</html>
