- v-model:雙向數(shù)據(jù)綁定和單向數(shù)據(jù)綁定：使用 v-model 進(jìn)行雙向數(shù)據(jù)綁定
功能與v-bind類似,不過數(shù)據(jù)可同步改動(dòng),即修改標(biāo)簽中的元素?cái)?shù),對(duì)應(yīng)的Vue實(shí)例對(duì)象中data對(duì)應(yīng)的數(shù)據(jù)也會(huì)發(fā)生變化
- v-html:按照html的格式進(jìn)行取值
<div id="app" >
<!--這種直接取出來的數(shù)據(jù)是帶有span標(biāo)簽的-->
{{content}}
</div>
<!--v-html(這種取出來是不帶標(biāo)簽的):將html格式數(shù)據(jù)渲染出來-->
<div id="app" v-html="content">
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
content:"<span style='color: red;'>這是內(nèi)容</span>"
}
})
</script>
- v-if判斷指令
<!--age是否大于18，等于18输吏，小于18-->
<div id="app">
<span v-if="age > 18">成年了</span>
<span v-else-if="age < 18">未成年</span>
<span v-else="age == 18">踩線了</span>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
age:18
}
})
</script>
- v-for:循環(huán)指令
<body>
<ul id="app">
<!--<li>a</li>
<li>b</li>
<li>c</li>-->
<li v-for="item in arrs">{{item}}</li>
</ul>
<script>
var app = new Vue({
el:'#app',
data:{
arrs:['aa','bb','cc']
}
})
</script>
</body>
- 對(duì)象集合
<body>
<ul id="app">
<!--(item,index)前面的是元素,后面的是元素順序,這是固定的位置,不能更改-->
<li v-for="(item,index) in arrs">{{index}}-{{item.name}}</li>
</ul>
<script>
var app = new Vue({
el:'#app',
data:{
arrs:[
{id:1,name:'zs',age:18},
{id:2,name:'ls',age:19},
{id:3,name:'ww',age:20}
]
}
})
</script>
</body>
- v-on:事件綁定,可簡寫成@,如v-on:click //綁定點(diǎn)擊事件-->(@click注意了,這里的@后面是沒有冒號(hào)的)
<body>
<ul id="app">
<!--(item,index)前面的是元素,后面的是元素順序,這是固定的位置,不能更改-->
<!--$event:表示事件信息封裝對(duì)象,寫法是固定的,這里表示的就是z整個(gè)事件對(duì)象,-->
<li v-on:click="choseClick($event)" v-for="(item,index) in arrs">{{index}}-{{item.name}}</li>
<!--以下寫法與上面的效果一樣-->
<!--<li @click="choseClick" v-for="(item,index) in arrs">{{index}}-{{item.name}}</li>-->
</ul>
<script>
var app = new Vue({
el:'#app',
data:{
arrs:[
{id:1,name:'zs',age:18},
{id:2,name:'ls',age:19},
{id:3,name:'ww',age:20}
]
},
methods:{
//這個(gè)就是事件函數(shù)
choseClick:function (ev) {
//拿到事件對(duì)象
console.log(ev);
//獲取當(dāng)前的事件元素(也就是當(dāng)前項(xiàng)目中的li元素)
console.log(ev.currentTarget);
alert(11);
}
}
})
</script>
</body>
- 事件傳參
<ul>
<li v-for="u in list" v-on:click="choseClick($event,u.id,u.name)">
{{u.id}}-{{u.name}}-{{u.age}}-{{u.sex==1?'男':'女'}}
</li>
</ul>
methods:{
choseClick:function (e, id, name) {
console.log(e.currentTarget, id, name);
}
}
- el:用來指定編譯器從什么地方開始解析語法(可以簡單理解為將Vue實(shí)例對(duì)象綁定在頁面的那個(gè)標(biāo)簽上的)
- data:用來組織從view中抽象出來的屬性离陶，可以說將視圖的數(shù)據(jù)抽象出來存放在data中
- methods:放置頁面中的業(yè)務(wù)邏輯纷宇，js函數(shù)一般都放置在methods中(可以簡單理解為存放自定義方法的方法區(qū))
- filters:過濾器集合,專門存放過濾器的
<body>
<ul id="app">
<li v-for="(item,index) in arrs">
{{index}}-{{item.name}}-{{item.sex | sexFilter}}</li>
</ul>
<script>
var app = new Vue({
el:'#app',
data:{
arrs:[
{id:1,name:'zs',age:18,sex:1},
{id:2,name:'ls',age:19,sex:0},
{id:3,name:'ww',age:20,sex:-1}
]
},
filters:{
dataFormat:function () {
//多用來做數(shù)據(jù)格式轉(zhuǎn)換
},
sexFilter:function (sex) {
if (sex == 0){
return '女'
}else if(sex == 1){
return '男'
}else {
return '保密'
}
}
}
})
</script>
</body>
- mounted:是一個(gè)函數(shù),在Vue實(shí)例對(duì)象創(chuàng)建時(shí)調(diào)用,也就是data之前,常用來初始化data中的數(shù)據(jù)
<body>
<ul id="app">
<li v-for="(item,index) in arrs">
{{index}}-{{item.name}}-{{item.sex}}</li>
</ul>
<script>
var app = new Vue({
el:'#app',
data:{
arrs:[
/*{id:1,name:'zs',age:18,sex:1},
{id:2,name:'ls',age:19,sex:0},
{id:3,name:'ww',age:20,sex:-1}*/
]
},
mounted:function () {
console.log('先執(zhí)行了吧');
let _this = this;
//模擬請(qǐng)求獲取數(shù)據(jù)
$.get('/data/employ-data.json',function (data) {
console.log(data);
_this.arrs = data;
})
}
})
</script>
</body>
