1、vue框架
vue框架的简单使用如下所示，并且是双向数据绑定的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试四</title>
<!-- 引入vue框架 -->
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
<!-- 插值表达式 -->
{{message}}
</div>
</body>
<script>
new Vue(
{
el: "#app", //vue接管的区域
data: {
message: "Hello Vue!"
}
}
);
</script>
</html>
1.1、vue框架的常用指令
1.1.1、v-bind指令和 v-model指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试四</title>
<!-- 引入vue框架 -->
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<a rel="nofollow" v-bind:href="url">链接一</a>
<a rel="nofollow" :href="url">链接二</a>
<!-- 可以实现表单标签和数据模型的双向数据绑定，即当修改表单标签中的数据时同时也会修改数据模型中的数据 -->
<input v-model="url">
</div>
</body>
<script>
new Vue(
{
el: "#app", //vue接管的区域
data: {
url: "https://www.baidu.com"
}
}
);
</script>
</html>
1.1.2、v-on指令
1.1.3、剩下的常用指令
1.1.4、v-for指令
2、vue的生命周期
具体的声明周期执行情况如下：
==其中比较重要的是：mounted！！！主要用途是向服务端发送请求。==
使用如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试五</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script>
//创建vue对象
new Vue({
el: "#app", //vue接管的区域
data: {},
mounted() {
alert("vue挂载完成!发送请求到服务端!")
}
})
</script>
</html>