1.v-bind v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>six</title>
</head>
<script src="./js/vue.js"></script>
<body>
<div id="one">
<a v-bind:href="url">链接1</a>
<a >链接2</a>
<input type="text" v-model="url">
</div>
<script>
new Vue({
el:"#one",
data:{
url:"https://www.csdn.net"
}
})
</script>
</body>
</html>
2.v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./js/vue.js"></script>
<div id="two">
<input type="button" value="点我一下" v-on:click="handel()">
<input type="button" value="chick" v-on:click="handel2()">
</div>
<script>
new Vue({
el:"#two",
data:{
},
methods:{
handel:function(){
alert("你点我");
},
handel2:function(){
alert("click")
}
}
})
</script>
</body>
</html>
3.v-if v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue-指令-v-if与v-show</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
年龄<input type="text" v-model="age">经判定,为:
<span v-if="age<=35">年轻人(35及以下)</span>
<span v-if="age<60 && age>35">中年人(35-60)</span>
<span v-if="age>=60">老年人(60及以上)</span>{{age}}
<br><br>
年龄<input type="text" v-model="age">经判定,为:
<span v-if="age<=35">年轻人(35及以下)</span>
<span v-if="age<60 && age>35">中年人(35-60)</span>
<span v-if="age>=60">老年人(60及以上)</span>
</div>
</body>
<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管区域
data:{
age: 20
},
methods: {
}
})
</script>
</html>
4.v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue-指令-v-for</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<span v-for="(item, index) in addrs">{{index+1}}:{{item}}<br></span>
</div>
</div>
</body>
<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管区域
data:{
addrs:["北京", "上海", "西安", "成都", "深圳"]
},
methods: {
}
})
</script>
</html>
5.案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue-指令-案例</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<table border="1" cellspacing="0" width="60%">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
<th>等级</th>
</tr>
<tr align="center" v-for="(use,index) in users">
<td>{{index+1}}</td>
<td>{{use.name}}</td>
<td>{{use.age}}</td>
<td>
<span v-if="use.gender==1">男</span>
<span v-else="use.gender==0">女</span>
</td>
<td>{{use.score}}</td>
<td>
<span v-show="use.score>=85">优秀</span>
<span v-show="use.score>=60 && use.score<85">及格</span>
<span style="color: red;" v-show="use.score<60">不及格</span>
</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
users: [{
name: "Tom",
age: 20,
gender: 1,
score: 78
},{
name: "Rose",
age: 18,
gender: 2,
score: 86
},{
name: "Jerry",
age: 26,
gender: 1,
score: 90
},{
name: "Tony",
age: 30,
gender: 1,
score: 52
}]
},
methods: {
},
})
</script>
</html>
6.生命周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue-指令-v-for</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<span v-for="(item,index) in list">{{index+1}}:{{item}}<br></span>
</div>
</body>
<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管区域
data:{
list: ['第一项', '第二项', '第三项']
},
methods: {
},
mounted(){
alert("vue挂载完成 ,发送请求到服务端");
}
})
</script>
</html>