(1). v-if指令
v-if 指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回true值的时候被渲染.
<html>
<head>
<title>hello</title>
<meta charset="utf8"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
type: "D"
}
});
</script>
</body>
</html>
(2). v-for指令
<html>
<head>
<title>hello</title>
<meta charset="utf8"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul id="example-2">
<li v-for="(item, index) in items">
- -
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
parentMessage : "Parent",
items : [
{message : "Foo" },
{message : "Bar" }
]
}
});
</script>
</body>
</html>
(3). v-on指令
<html>
<head>
<title>hello</title>
<meta charset="utf8"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div id="example-1">
<button v-on:click="counterClick($event)">Add 1</button>
<p>The button above has been clicked <span style="color: red;"> </span> times.</p>
</div>
</div>
<script>
var app = new Vue({
el: '#example-1',
data: {
counter : 1
},
methods : { // 定义方法
counterClick : function(event){
// this = data
this.counter++;
console.log(event);
}
}
});
</script>
</body>
</html>
(4). axios
<html>
<head>
<title>hello</title>
<meta charset="utf8"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./axios.min.js"></script>
</head>
<body>
<div id="app">
<div>名称:</div>
<div>地址: -- -- </div>
<div>
URL:
<a v-bind:href="info.url" target="_blank"></a>
</div>
<ul>
<li v-for=" link in info.links">
--
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
info:{}
},
mounted(){
axios.get('./data.json')
.then(response=>{ this.info = response.data ; console.log(this.info) })
.catch(error => {console.log(error)});
}
});
</script>
</body>
</html>
(5). v-model指令
<html>
<head>
<title>hello</title>
<meta charset="utf8"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-model设置input与message进行双向绑定 -->
<input v-model="message" placeholder="edit me" value="hello world">
<p>Message is: </p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message : "edit me"
}
});
</script>
</body>
</html>
