vue十大常見指令（下）
阿新 • • 發佈：2019-02-13
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
<style>
ul,ol{
list-style: none;
}
</style>
</head>
<body>
<div id="app">
陣列遍歷
<ul>
<li v-for="value in arr">
{{value}}
</li>
</ul>
物件遍歷
<ul>
<li v-for="user in users">
{{user._id}}
</li>
</ul>
v-for 指令常用於渲染資料,除了可以迭代陣列，還可以迭代物件和整數。
<br>
................................................↓................................................
<br /><br />
<a v-bind:href='link' v-bind:target="target">Hello Vue</a>
<br />
↓ 等價於
<br />
<a :href='link' :target="target">Hello Vue</a><br /><br />
v-bind 指令用於動態繫結DOM元素的屬性,v-bind 指令可以簡寫成一個冒號":"。
<br>
................................................↓................................................
<br /><br />
<button v-on:click="say">點選</button>
<br />
↓ 等價於
<br />
<button @click="say('毛大爺')">點選</button> <br /><br />
v-on 指令相當於繫結事件的監聽器，繫結的事件觸發了，可以指定事件的處理函式 v-on 指令可以簡寫成 "@"。
<br>
................................................↓................................................
<br /><br />
<input type="text" v-model='msg'/>
{{msg}} <br /><br />
v-model 指令指定關聯的資料,同步更新。
<br>
................................................↓................................................
<br /><br />
<input type="text" v-model='msg'/>
<p v-once>你輸入：{{ msg }}</p>
</div>
<script>
new Vue({
data:{
arr:['apple','pear','orange'],
users:[
{ "_id": "5a1d276e421aa90fe7253676",
"createdAt": "2017-11-28T17:07:58.240Z",
"desc": "業界首創Android Lint增量掃描實戰紀要",
"publishedAt": "2017-12-06T08:49:34.303Z",
"source": "web",
"type": "Android",
"url": "http://www.jianshu.com/p/4833a79e9396",
"used": true,
"who": null
},
],
link:'http://cn.vuejs.org',
target:"_blank",
msg:'毛大爺'
},
methods:{
say:function(name){
alert(name)
}
}
}).$mount('#app')
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
<style>
ul,ol{
list-style: none;
}
</style>
</head>
<body>
<div id="app">
陣列遍歷
<ul>
<li v-for="value in arr">
{{value}}
</li>
</ul>
物件遍歷
<ul>
<li v-for="user in users">
{{user._id}}
</li>
</ul>
v-for 指令常用於渲染資料,除了可以迭代陣列，還可以迭代物件和整數。
<br>
................................................↓................................................
<br /><br />
<a v-bind:href='link' v-bind:target="target">Hello Vue</a>
<br />
↓ 等價於
<br />
<a :href='link' :target="target">Hello Vue</a><br /><br />
v-bind 指令用於動態繫結DOM元素的屬性,v-bind 指令可以簡寫成一個冒號":"。
<br>
................................................↓................................................
<br /><br />
<button v-on:click="say">點選</button>
<br />
↓ 等價於
<br />
<button @click="say('毛大爺')">點選</button> <br /><br />
v-on 指令相當於繫結事件的監聽器，繫結的事件觸發了，可以指定事件的處理函式 v-on 指令可以簡寫成 "@"。
<br>
................................................↓................................................
<br /><br />
<input type="text" v-model='msg'/>
{{msg}} <br /><br />
v-model 指令指定關聯的資料,同步更新。
<br>
................................................↓................................................
<br /><br />
<input type="text" v-model='msg'/>
<p v-once>你輸入：{{ msg }}</p>
</div>
<script>
new Vue({
data:{
arr:['apple','pear','orange'],
users:[
{ "_id": "5a1d276e421aa90fe7253676",
"createdAt": "2017-11-28T17:07:58.240Z",
"desc": "業界首創Android Lint增量掃描實戰紀要",
"publishedAt": "2017-12-06T08:49:34.303Z",
"source": "web",
"type": "Android",
"url": "http://www.jianshu.com/p/4833a79e9396",
"used": true,
"who": null
},
],
link:'http://cn.vuejs.org',
target:"_blank",
msg:'毛大爺'
},
methods:{
say:function(name){
alert(name)
}
}
}).$mount('#app')
</script>
</body>
</html>