网硕互联帮助中心目录
Vue
Ajax
Vue
Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
基于MVVM思想，实现数据的双向绑定，将编程的关注点放在数据上。
框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。
官方文档：安装 — Vue.js
Vue快速入门
一、新建HTML页面，引入Vue.js文件
<script src="js/vue.js"></script>
二、在JS代码区域，创建Vue核心对象，定义数据模型
<script>
new Vue({
e1:"#app",
data:
message:"Hello Vuel"
}
})
</script>
e1:代表Vue要控制哪个区域 #为id选择器（类似于css）
data：数据模型（双向绑定）
三、编写视图
<div id="app">
<input type="text" v-model="message">
{{ message }}
</div>
插值表达式：
形式：{{表达式}}。
内容可以是：变量、三元运算符、函数调用、算数运算
v-model在view中叫做指令
常用指令
v-bind
<a v-bind:href="url">哈哈哈</a>
简化写法
<a :href="url">哈哈哈</a>
<script>
new Vue({
e1:"#app",
data:
url:"https://www.itcast.cn"
}
})
</script>
v-model
<input type="text" v-model="url">
注意：通过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>Vue-快速入门</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="点我" v-on:clink="handle()">
<!– 简化写法<input type="button" value="点我" @clink="handle()"> –>
</div>
</body>
<script>
new Vue({
e1:"#app",
data:{
},
methods:{
handle:function(){
alert("被点了一下");
}
}
})
</script>
</html>
v-if
年龄{{age}}，经判定为：
<span v-if="age" <=35">年轻人</span>
<span v-else-if="age>35 && age<60">中年人</span>
<span v-else">老年人</span>
和java中的if语句相同，如果第一条if判断为true则执行第一条，进行渲染，否则不断往后判断
v-show
年龄{{age}}，经判定为：
<span v-show="age" <=35">年轻人</span>
只要条件判断成立则渲染
v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UX-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="button" value="点我" v-on:clink="handle()"> –>
<!– 简化写法<input type="button" value="点我" @clink="handle()"> –>
<!– <a v-bind:href="url">链接1</a>
<a :href="url">链接2</a> –>
<!– <input type="text" v-model="url"> –>
<div v-for="addr in addrs ">{{addr}}</div>
<div v-for="(addr,index) in addrs ">{{index}}{{addr}}</div>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
addrs:["北京","上海","西安","成都","深圳"]
},
methods: {
}
})
</script>
</html>
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<table border="1" contenteditable="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">
<td>{{index+1}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>
<span v-if="user.gender==1">男</span>
<span v-if="user.gender==2">女</span>
</td>
<td>{{user.score}}</td>
<td>
<span v-if="user.score>=85">优秀</span>
<span v-else-if="user.score>=60">及格</span>
<span style="color: red;"v-else>不及格</span>
</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
users:[{
name:"Tom",
age:20,
gender :1,
score:78
}]
}
})
</script>
</html>
生命周期
生命周期：一个对象从创建到销毁的整个过程。
生命周期的八个阶段：每触发一个生命周期的事件，会自动执行一个生命周期的方法（钩子）
可以与methods方法平级定义一个钩子方法，一旦触发了这个生命周期的事件，就会自动触发生命周期的方法。
mounted：Vue初始化成功，HTML页面渲染成功。（发送请求到服务端，加载数据）
Ajax
概念：异步的JavaScript和XML
作用：
数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
异步交互：可以在不加载整个页面的情况下，与服务器交换数据并更新部分网页的技术， 如：搜索联想、用户名是否可用的校验等。
步骤：
1.准备数据地址
2.创建XMLHttpRequest对象：用于和服务器交换数据
3.向服务器发送请求
4.获取服务器响应数据
Axios
介绍：Axios对原生的Ajax进行封装，简化书写，快速开发
官网：Axios中文文档 | Axios中文网
Axios入门：
1.引入Axios的js文件
<script src="js/axios-0.18.0.js"></script>
2.使用Axios发送请求，并获取数据结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax-Axios</title>
<script src="js/axios-0.18.0.js"></script>
</head>
<body>
<input type="button" value="获取数据GET" onclick="get()">
<input type="button" value="删除数据POST" onclinck="post()">
</body>
<script>
function get(){
//通过axios发送异步请求-get
axios({
method:"get",
url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"
}).then(result=>{
console.log(result.data);
})
}
function post(){
//通过axios发送异步请求-post
axios({
method:"post",
url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
data:"id=1"
}).then(result=>{
console.log(result.data);
})
}
</script>
method:"get"为请求方式
url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"为服务器路径
.then(result=>{ console.log(result.data);为得到服务器响应后结果
简化方式：
发送GET请求
axios.get("url:"http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result)=>{
console.log(result.data);
});
发送POST请求
axios.post("url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById"，"id=1").then((result)=>{
console.log(result.data);
});
评论前必须登录！
注册