Day3:Vue与Element、Ajax与Axios

• Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
• 基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。
• 官网： https://v2.cn.vuejs.org/

框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。

Vue快速入门

新建HTML页面，引入Vue.js文件

<script src:"js/vue.js"></script>

在JS代码区域，创建Vue核心对象，定义数据模型

<script>
new Vue({
e1:"app",
data:{
message:"Hello Vue!"
}

})
</script>

编写视图

<div id ="app">
     <input type="text" v-model="message">
{{message}}
</div>

Vue常用指令

指令：HTML 标签上带有 v- 前缀 的特殊属性，不同指令具有不同含义。例如：v-if，v-for…

常用指令

v-bind

<a v-bind:href="url">传智教育</a>

<a :href="url">传智教育</a>

v-model

<input type="text" v-model="url">

通过v-bind或者v-model绑定的变量，必须在数据模型中声明。

<script>
new Vue({
e1:"#app",
data:{
url:"https://www.itcast.cn"
}

})
</script>

v-on

<input type="button" value="按钮" v-on:click="handle()">

<input type="button" value="按钮" @click="handle()">

<script>
new Vue({
el:"#app",
data:{
},
methods:{
handle:function(){
alert('我被点击了');
}
},

})
</script>

v-if

年龄{{age}},经判断为：

<span v-if="age<=35">年轻人</span>

<span v-else-if="age>35&&age<60">中年人</span>

<span v-else>老年人</span>

v-show

<div v-for="(addr,index) in addr">{{index+1}}:{{addr}}</div>

年龄{{age}},经判断为:

<span v-show="age<=35">年轻人</span>

v-for

<div v-for="addr in addrs">{{affr}}</div>

<div v-for="(addr,index) in addrs">{{index+1}}:{{addr}}</div>

data:{

...

addrs:['北京','上海','广州','深圳','成都','杭州']
},

Vue生命周期

Ajax

Axios

引入Axios的js文件

<script src="js/axios-0.18.0.js"></script>

使用Axios发送请求，并获取响应结果

axios({

method:"get",

url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"

}).then(result)=>{

console.log(result.data);

});（成功回调函数）

axios({  

 method: "post",  

 url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",

   data: "id=1"

}).then((result) => {  

 console.log(result.data);

});（成功回调函数）

请求方式别名

• axios.get(url [, config])
• axios.delete(url [, config])
• axios.post(url [, data[, config]])
• axios.put(url [, data[, config]])

发送GET请求

axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result)=>{
console.log(result.data);
});

发送POST请求

axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result)=>{

console.log(result.data);
});

前后端分离开发

YApi

前端工程化

环境准备

介绍： Vue-cli 是Vue官方提供的一个脚手架，用于快速生成一个 Vue 的项目模板。

Vue-cli提供了如下功能：

• 统一的目录结构
• 本地调试
• 热部署
• 单元测试
• 集成打包上线

依赖环境：NodeJS

Vue项目简介

Vue项目开发流程

Vue组件库Element

快速入门

常见组件

案例

Vue路由

打包部署