Vue:是一个构建数据驱动的web界面的渐进式框架。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。
入门案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>快速入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--Vued的插值表达式，把data中定义的数据显示到此处-->
<!--插值表达式只支持表达式，不支持赋值和语句流等-->
{{message}}
{{true ? "ok" : "no"}}
</div>
</body>
<script>
//创建Vue对象
new Vue({
el:"#app",//由vue接管id为app区域
data:{
message:"hello Vue!"//注意，此处不要加分好
}
});
</script>
</html>Vue语法：
1、按钮点击事件触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-on</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
<button v-on:click="fun1('被点击了')">vue的onclick</button>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
message:"hello world"
} ,
methods:{
fun1:function (meseage) {
alert("hello");
this.message = meseage;
}
}
});
</script>
</html>2、键盘按下事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-on:keydown="fun($event)"/>
</div>
</body>
<script>
new Vue({
el:"#app",
methods: {
/*$event它是vue中的事件对象，和我们传统的js的event对象是一样的*/
fun:function (event) {
event.preventDefault();
}
}
});
</script>
</html>3、鼠标悬停事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
#div{
background: red;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="app">
<div v-on:mouseover="fun1" id="div">
<textarea v-on:mouseover="fun2($event)"></textarea>
</div>
</div>
</body>
<script>
new Vue({
el:"#app",
methods:{
fun1:function () {
alert("鼠标停在div上")
},
fun2:function (event) {
alert("鼠标停在textarea上")
event.stopPropagation();
}
}
});
</script>
</html>4、事件修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件修饰符</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<form @submit.prevent action="index.jsp" method="post">
<input type="submit" value="submit">
</form>
</div>
</body>
<script>
new Vue({
el:"#app"
});
</script>
</html>5、text与html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-text,v-html</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-text="message"></div>
<div v-html="message"></div>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
message:"<h1> hello world</h1>"
}
})
</script>
</html>6、属性指绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<font size="5" v-bind:color="ys1">heihei</font>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
ys1:"green"
}
});
</script>
</html>7、按键修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按键修饰符</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-on:keydown.enter="fun1">
</div>
</body>
<script>
new Vue({
el:"#app",
methods:{
fun1:function () {
alert("按下回车")
}
}
});
</script>
</html>8、遍历数据v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul v-for="(value,index) in arr">
<li>{{value}}={{index}}</li>
</ul>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5]
}
});
</script>
</html>9、遍历对象数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<table>
<tr v-for="(product) in products">
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
products:[
{id:1,name:"笔记本",price:10000},
{id:2,name:"手机",price:5000}
]
}
});
</script>
</html>10、v-model，绑定数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<form action="" method="post">
<input type="text" name="username" v-model="user.username"><br/>
<input type="text" name="password" v-model="user.password"><br/>
</form>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
user:{
username:"test",
password:"1234"
}
}
})
</script>
</html>11、ajax和生命周期应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
</body>
<script>
new Vue({
el:"#app",
data:{
userList:[]
},
methods:{
findAll:function () {
var _this = this;
axios.get('/user?id=12345')
.then(function (response) {
_this.userList=response.date;
console.log(response)
})
.catch(function (error) {
console.log(error)
})
}
},
created: function () {
this.findAll();
}
});
</script>
</html>Vue生命周期：
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue生命周期学习</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Vue的生命周期'
},
beforeCreate: function() {
console.group('------beforeCreate创建前状态------');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
created: function() {
console.group('------created创建完毕状态------');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function() {
console.group('------beforeMount挂载前状态------');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
mounted: function() {
console.group('------mounted 挂载结束状态------');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})
</script>
</html>Vue的ajax：
axios：一个基于promise的HTTP库，可以用在浏览器和node.js中