前端框架
<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">
<input type="text" v-model="message">
<!-- v-model绑定输入框和data中的message，实现双向数据绑定 -->
{{ message }}
<!-- {{ }} 输出data中的message -->
</div>
<script>
// 定义Vue对象
new Vue({
el: "#app", // vue接管区域
data: {
message: "Hello Vue"
}
});
</script>
</body>
</html>Vue的常用指令
v-bind和v-model
这两个一旦绑定，那这个对象要在数据模型中要定义。
<!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-bind</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<a v-bind:href="url">链接1</a>
<a :href="url">链接2</a>
<!-- 简写可以省略v-bind -->
<input type="text" v-model="url">
<!-- v-model可以双向绑定输入框和data中的url，在这里修改url的值，页面上的链接1、2也会跟着变化 -->
</div>
<script>
// 定义Vue对象
new Vue({
el: "#app", // vue接管区域
data: {
url: "https://www.baidu.com"
}
})
</script>
</body>
</html>v-on
<!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-on</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="点我一下" v-on:click="handle()">
<input type="button" value="点我一下" @click="handle()">
<!-- 简写 -->
</div>
<script>
// 定义Vue对象
new Vue({
el: "#app", // vue接管区域
data: {
},
methods: {/* 定义方法 */
handle: function() {
alert("你点我了一下...");
}
}
})
</script>
</body>
</html>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-else-if="age > 35 && age < 60">中年人(35-60)</span>
<span v-else>老年人(60及以上)</span>
<br><br>
年龄<input type="text" v-model="age"> 估判定，为:
<span v-show="age <= 35">年轻人(35及以下)</span>
<span v-show="age > 35 && age < 60">中年人(35-60)</span>
<span v-show="age >= 60">老年人(60及以上)</span>
</div>
<script>
// 定义Vue对象
new Vue({
el: "#app", // vue接管区域
data: {
age: 20
}
})
</script>
</body>
</html>
v-for
{{addr}} 是 Vue.js 中的插值表达式，它用于将数据绑定到 HTML 模板中。
<!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">
<div v-for="addr in addrs">{{addr}}</div>
<div v-for="(addr, index) in addrs">{{index + 1}} : {{addr}}</div>
</div>
<script>
// 定义Vue对象
new Vue({
el: "#app", // vue接管区域
data: {
addrs: ["北京", "上海", "西安", "成都", "深圳"]
},
methods: {
}
})
</script>
</body>
</html>通过Vue完成表格数据的渲染
<!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">
<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="(user, index) in users" :key="index">
<td>{{ index + 1 }}</td>
<td>{{ user.name }}</td>
<td>{{ user.age }}</td>
<td>
<span v-if="user.gender === 1">男</span>
<span v-else>女</span>
</td>
<td>{{ user.score }}</td>
<td>
<span v-if="user.score >= 90">优秀</span>
<span v-else-if="user.score >= 60">及格</span>
<span v-else style="color: red;">不及格</span>
</td>
</tr>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<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 }
]
}
});
</script>
</body>
</html>
Vue生命周期
主要mounted
