Vue基础入门知识总结
1. 什么是Vue
- Vue.js是一个渐进式JavaScript 框架，作者尤雨溪。
- Vue.js 的目标是通过尽可能简单的 API， 实现响应的数据绑定和组合的视图组件。
- 它不仅易于上手，还便于与第三方库或既有项目整合。
2.MVVM模式
- MVVM：是Vue框架提供一种模式，分离了Model数据和View视图。
- 我们只要从服务端加载数据：Model。Vue框架会帮我们把数据显示到View页面上
- 如果View页面上的数据变化了，Vue框架也会帮我们直接获取到
3.Vue 快速入门
- 把vue.js拷贝到web应用里
- 创建html页面，在页面里引入vue.js
- 在页面里编写代码：创建Vue实例，在页面中显示message的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue快速入门</title>
</head>
<body>
<!--
要求:有一项数据message，使用Vue显示到页面app里
View：id为app的html区域
-->
<div id="app">
{{message}}
</div>
<script src="js/vuejs-2.5.16.js"></script>
<script>
//1.创建对象
new Vue({
//表示Vue框架接管的html区域是 id为app的标签
el:"#app",
//data：我们定义的数据 Model
data:{
message:"hello"
}
});
</script>
</body>
</html>
4.事件
这里只简单说三个 其他的差不多
①单击事件 v-on: click
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单击事件</title>
</head>
<body>
<div id="app">
<!--要求：点击按钮时，修改message的值-->
<!--第一种是没有实参的情况-->
<input type="button" value="按钮1" v-on:click="fnClick">
<!--按钮二是传实参的情况-->
<input type="button" value="按钮2" @click="fnClick2('123')">
{{message}}
</div>
<script src="js/vuejs-2.5.16.js"></script>
<script>
new Vue({
el:"#app",
data:{message:"hello"},
methods:{
fnClick:function () {
this.message="你好";
},
fnClick2:function (a) {
this.message=a;
}
}
});
</script>
</body>
</html>
②键盘按下事件
@keydown
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>keydown事件</title>
</head>
<body>
<div id="app">
<!--
要求：如果用户按下的是数字键，允许输入；否则不允许输入
分析：
当用户按下按键时，要获取到按下的是什么。
Vue提供了对象，是当前事件对象$event。可以从这个事件获取到 按下的是什么
preventDefault()：阻止事件的继续执行
stopPropagation()：阻止事件冒泡
判断：按下的是否是数字键
如果是，允许输入
如果不是，不允许输入
-->
输入数字:<input type="text" @keydown="numberCheck($event)">
</div>
<script src="js/vuejs-2.5.16.js"></script>
<script>
new Vue({
el:"#app",
methods:{
numberCheck:function(e){
//从事件状态对象e里获取按下的键 的ASCII码 其中0-9对应的是48-57
var keyCode=e.keyCode;
if(keyCode<49||keyCode>57){
//说明用户按下的不是数字键要阻止执行
e.preventDefault();
}
}
}
});
</script>
</body>
</html>
③鼠标移入
@mouseover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标移入移出事件</title>
<style>
.c1{
width:200px;
height:200px;
background-color: green;
}
</style>
</head>
<body>
<div id="app">
<div class="c1" @mouseover="showWin" @mouseout="showWin2"></div>
</div>
<script src="js/vuejs-2.5.16.js"></script>
<script>
new Vue({
el:"#app",
methods:{
showWin:function () {
alert("鼠标移入成功");
},
showWin2:function () {
alert("鼠标移出成功")
}
}
});
</script>
</body>
</html>
5.模板语法
Vue的常用指令
- 插值表达式
{{}} v-html和v-textv-bind和v-model
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插值表达式</title>
</head>
<body>
<div id="app">
<!--
{{}}的特性：类似于jQuery里的text()方法
1. 如果Vue实例里的数据变化了，dom里显示的数据会跟着变化。
提供一个按钮，点击时修改Vue实例里message的值，看页面上是否会跟着变
2. {{}}里可以写js表达式，但是不能有多条js代码
3. {{}}插入的是文本
-->
<input type="button" value="修改message的值"@click="changeMsg">
{{message}}
</div>
<script src="js/vuejs-2.5.16.js"></script>
<script>
new Vue({
el:"#app",
data:{
message:"hello"
},
methods:{
changeMsg:function () {
this.message="你好
";
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-text和v-html</title>
</head>
<body>
<div id="app">
<!--1. 把message的值，用v-text插入到div里-->
<div v-text="message"></div>
<!--2. 把message的值，用v-html插入到div里-->
<div v-html="message"></div>
<!--可以看到用v-text插入的代码不会生效是纯文本
而用v-html插入的代码会生效-->
</div>
<script src="js/vuejs-2.5.16.js"></script>
<script>
new Vue({
el:"#app",
data:{
message:"楼主你真棒!
"
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind指令</title>
</head>
<body>
<div id="app">
<!--把url的值，绑定给a标签的href属性：用v-bind 第一种简写 第二种全称-->
<a :herf="url">{{title}}</a> <br>
<a v-bind:herf="url"> {{title}}</a>
</div>
<script src="js/vuejs-2.5.16.js"></script>
<script>
new Vue({
el:"#app",
data:{
url:"http://www.baidu.com",
title:"百度"
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model</title>
</head>
<body>
<div id="app">
<!--
注意：v-bind是单向绑定。
Vue框架会帮我们把data里的数据，显示到View页面上。 Model => View 有
但是，如果页面上数据变化了，data里的数据是不会跟着变的。View => Model 没有
-->
<input type="text" :value="message"><br>
<!--
注意：v-model是双向绑定的
Vue框架会帮我们把data里的数据，显示到View页面上。 Model => View 有
-->
<input type="text" v-model="message"><br>
<select name="" id="" v-model="province">
<option value="">==选择省==</option>
<option value="gd">广东</option>
<option value="sx">山西</option>
<option value="sd">山东</option>
<option value="gx">广西</option>
</select>
{{province}}<br>
<textarea name="" cols="30" rows="10" v-model="introduce"></textarea>
{{introduce}}
</div>
<script src="js/vuejs-2.5.16.js"></script>
<script>
new Vue({
el:"#app",
data:{
message:"hello",
province:"sd",
introduce:"我真帅"
}
});
</script>
</body>
</html>
v-for 和 v-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for循环</title>
</head>
<body>
<div id="app">
<!--把数据里的users，循环遍历显示出来-->
<ul>
<li v-for="(user,index) in users">{{user.name}},{{user.sex}},索引:{{index}}</li>
</ul>
<ul>
<!--循环5次,显示偶数-->
<li v-for="i in 5 ">{{i*2}}</li>
</ul>
<!--查询所有用户,显示到表格上-->
<table>
<tr>
<th>姓名</th>
<th>性别</th>
</tr>
<tr v-for="user in users">
<td>{{user.name}}</td>
<td>{{user.sex}}</td>
</tr>
</table>
</div>
<script src="js/vuejs-2.5.16.js"></script>
<script>
new Vue({
el:"#app",
data:{
users:[
{name:"张三",sex:"男"},
{name:"李四",sex:"男"},
{name:"王五",sex:"男"},
{name:"赵柳",sex:"女"}
]
},
created:function () {
//发送Ajax请求,去服务端加载数据,把得到的数据赋值给data
}
});
</script>
</body>
</html>
v-if
未成年
已成年
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-show显示与隐藏</title>
</head>
<body>
<div id="app">
<!--如果年龄小于18，这个标签显示出来-->
<!--
v-show：
如果判断为false，元素仍然存在，只是有隐藏起来了 display:none
如果判断为true，元素存在，并且显示出来
-->
<div v-show="age < 18">未成年</div>
<input type="button" value="切换显示与隐藏" @click="toggle">
<div v-show="flag">显示/隐藏</div>
</div>
<script src="js/vuejs-2.5.16.js"></script>
<script>
new Vue({
el:"#app",
data:{
age:20,
flag:true
},
methods:{
toggle:function(){
this.flag = !this.flag;
}
}
});
</script>
</body>
</html>
Vue的生命周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>生命周期</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="js/vuejs-2.5.16.js"></script>
<script>
//Vue提供了一些钩子函数，被Vue调用
/*
Vue生命周期过程：
1. new Vue。
2. 初始化生命周期和事件监听
====调用钩子函数beforeCreate=====。
通过Vue对象操作data？不能，还没有加载data；
通过Vue得到el对应的元素？不能，还没有加载el对应的dom元素
3. 加载data数据
====调用钩子函数created=====
通过Vue对象操作data？能，已经加载了data；
通过Vue得到el对应的元素？不能，还没有加载el对应的dom元素
4. 获取el对应的元素dom
====调用钩子函数beforeMount====
通过Vue对象操作data？能，已经加载了data；
通过Vue得到el对应的元素？能，已经获取了el对应的dom元素。获取的dom里有{{}}
5. 把data数据，设置到dom里，显示出来
====调用钩子函数mounted=====
通过Vue对象操作data？能，已经加载了data；
通过Vue得到el对应的元素？能，已经获取了el对应的dom元素。获取的dom里是最终要显示的内容
如果我们变更了data的数据
====调用钩子函数beforeUpdate=====
把data数据更新到dom页面上显示出来
====调用钩子函数updated=====
如果我们销毁了Vue实例对象
=====调用钩子函数beforeDestroy=====
销毁Vue对象：不再监听data变化
=====调用钩子函数destroyed=====
*/
var v = new Vue({
el:"#app",
data:{
message:"hello"
},
beforeCreate:function(){
console.log("=========beforeCreate=======");
//通过Vue对象操作data？不能，还没有加载data；
console.log(" data : " + this.message);
//通过Vue得到el对应的元素？不能，还没有加载el对应的dom元素。 this.$el 获取Vue里加载的元素dom
console.log(" el : " + this.$el);
},
created:function(){
console.log("=========created=======");
//通过Vue对象操作data？能，已经加载了data；
console.log(" data : " + this.message);
//通过Vue得到el对应的元素？不能，还没有加载el对应的dom元素
console.log(" el : " + this.$el);
},
beforeMount:function(){
console.log("=========beforeMount=======");
//通过Vue对象操作data？能，已经加载了data；
console.log(" data : " + this.message);
//通过Vue得到el对应的元素？能，已经获取了el对应的dom元素。获取的dom里有{{}}
console.log(" el : " + this.$el);
console.log(document.getElementById("app"));
},
mounted:function(){
console.log("=========mounted=======");
//通过Vue对象操作data？能，已经加载了data；
console.log(" data : " + this.message);
//通过Vue得到el对应的元素？能，已经获取了el对应的dom元素。获取的dom里是最终要显示的内容
console.log(" el : " + this.$el);
console.log(document.getElementById("app"));
},
beforeUpdate:function(){
console.log("=========beforeUpdate=======");
//看data里的数据：已经变化了
console.log(" data : " + this.message);
//el对应的元素：没有变化，数据还没有更新显示到dom里
console.log(" el : " + this.$el.outerHTML);
//console.log(document.getElementById("app"));
},
updated:function(){
console.log("=========updated=======");
//看data里的数据：已经变化了
console.log(" data : " + this.message);
//el对应的元素：已经变化了
console.log(" el : " + this.$el.outerHTML);
},
beforeDestroy:function(){
console.log("=========beforeDestroy=======");
console.log(" data : " + this.message);
console.log(" el : " + this.$el.outerHTML);
},
destroyed:function(){
console.log("=========destroyed=======");
console.log(" data : " + this.message);
console.log(" el : " + this.$el.outerHTML);
}
});
//2秒后，修改Vue对象里的message的值
setTimeout(function () {
v.message = "你好";
}, 2000);
//5秒后，销毁Vue对象
setTimeout(function () {
v.$destroy();
}, 5000);
</script>
</body>
</html>
axios
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>axios</title>
</head>
<body>
<script src="js/vuejs-2.5.16.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
//正常情况是请求到Servlet，得到响应的json格式的数据
//发get方式的ajax请求，直接请求到user.json，得到其中的数据
axios.get("./data/users.json?username=lisi")
.then(function(response){
//then：在得到响应数据之后会被执行
//response：是响应信息对象。
// response.data：是响应回来的数据
// response.status：是响应状态码
console.log(response.data);
})
.catch(function(error){
console.log(error);
});
//发post方式的ajax请求
axios.post("./data/users.json",{
username:"lisi",
password:"12345"
}).then(function(response){
console.log(response.data);
});
</script>
</body>
</html>
axiso 加载用户显示
提前准备一个user.json文档 这里就模仿从数据库接收到这种情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>axios加载用户显示</title>
</head>
<body>
<!--
要求：
1. 要求：页面上表格里显示的数据，是Vue里定义的
2. 要求：Vue里的数据，来自于users.json（将来可能是来自于服务端）
Vue里何时加载数据？
-->
<div id="app">
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr v-for="user in users">
<td>{{user.name}}</td>
<td>{{user.age}}</td>
</tr>
</table>
</div>
<script src="js/vuejs-2.5.16.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
new Vue({
el:"#app",
data:{
users:[
{"name":"张三","age":50},
{"name":"李四","age":60}
]
},
created:function(){
//这里的this，是Vue对象
//console.log(this);
//var t = this;
//发ajax请求加载数据，把数据设置给data的users
/*axios.get("./data/users.json")
.then(function(response){
//在这个函数里，this并不是Vue对象，所以this.users不是Vue里数据
//console.log(this);
t.users = response.data;
});*/
//=============================
axios.get("./data/users.json")
.then(response =>{
this.users = response.data;
});
}
});
</script>
</body>
</html>