vue基礎之模板語法及指令
Vue的模板語法
1、Hello world
body>
<div id="box">
{{title}}
<input type="text" v-model="title">
</div>
<script src="vue.js"></script>
<script>
var vm=new Vue({
el:"#box",
data:{
title:"我今天很好;"
}
});
</script>
</body>
在上面的程式碼中，我們通過new Vue() 構建一個Vue的例項
el:Vue要操作拿一個元素下面的區域，不如：#box則表示操作id為box的元素下面的區域
data:表示Vue例項的資料物件，data的屬效能夠響應資料的變化;每個Vue例項都會代理其data物件裡所有的屬性。
2. v-model 雙向資料繫結
指令帶有字首v-表示它們是Vue.js提供的特殊屬性。我們把則指令當作是特殊的Html特性（attribute）
3、v-attr會操作一個元素的特性 v-repeat會基於陣列來複制一個元素 v-on會繫結事件
4、v-if指令 條件渲染指令，根據表示式的真假來新增或刪除元素。v-if=“expression”
返回true或false 也可返回true或false的表示式。
<p v-if="show">顯示</p> <p v-if="hide">不顯示</p> <p v-if="height">身高：{{height}}</p> <p v-if="name=='maomao'">名稱:{{name}}</p> </div> <script src="vue.js"></script> <script> var vm=new Vue({ el:"#box", data:{ show:true, hide:false, height:1.78, name:'maomao' } }); </script>
5、v-show 跟v-if差不多 可是當false時 有存在但是display:none隱藏了
v-show和v-if的區別：
1. v-if 是真實的條件渲染，因為它會確保條件塊在切換當中適當地銷燬與重建條件塊內的事件監聽器和子元件； v-show 則只是簡單地基於 CSS 切換。
2. v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換使用 v-show 較好，如果在執行時條件不大可能改變則使用 v-if 較好。
6、v-else v-else-if
可以用v-else指令為v-if或v-show新增一個“else塊”。注意：v-else前一兄弟元素必須有 v-if 或 v-else-if。
<p v-if="show">顯示</p>
<p v-else>111</p>
<script src="vue.js"></script>
<script>
var vm=new Vue({
el:"#box",
data:{
show:false,
hide:false,
height:1.78,
name:'maomao'
}
});
</script>
7、 v-for 基於資料渲染一個列表，類似於JS中的遍歷。其資料型別可以是 Array | Object | number | string。
該指令之值，必須使用特定的語法(item, index) in items, 為當前遍歷元素提供別名。 v-for的優先級別高於v-if之類的其他指令
<!--第一種形式-->
<!--// v-for="p in people" -->
<div id="box">
<table>
<thead>
<tr>
<td>姓名</td>
<td>年齡</td>
<td>性別</td>
</tr>
</thead>
<tbody>
<tr v-for="p in people">
<td>{{p.name}}</td>
<td>{{p.age}}</td>
<td>{{p.sex}}</td>
</tr>
</tbody>
</table>
</div>
<script src="vue.js"></script>
<script>
var vm=new Vue({
el:"#box",
data:{
people:[
{name:'zhangshan',age:10,sex:'nv'},
{name:'maomao',age:10,sex:'nan'},
{name:'wangwu',age:10,sex:'nan'},
{name:'zhangge',age:10,sex:'nv'}
]
}
});
</script>
<!--第二種形式-->
<!--// v-for="(value, key) in object-->
<body>
<div id="app">
<ul>
<li v-for="(value, key) in object">
{{ key }} : {{ value }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
object: {
name: ''zhangshan'',
url: 'http://www.maomao.com',
slogan: '學的不僅是技術，更是夢想！'
}
}
})
</script>
<!--第三種形式-->
<!--// v-for="(value, key, index) in object-->
<div id="app">
<ul>
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</li>
</ul>
</div>
