Vue进阶
声明
本文题材来自于狂神说https://www.bilibili.com/video/BV18E411a7mC
1、异步通信框架Axios
1.1、什么叫Axios
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，所以需要注意的是因为axios是基于现代化游览器设计，所以古老的游览器并不支持。
那么promise又是什么?
- 主要用于异步计算。
- 可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果。
- 可以在对象之间传递和操作promise，帮助我们处理队列。
1.2、Axios有哪些特点
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
1.3、Axios和Ajax有什么区别
- Axios是通过promise实现对ajax技术的一种封装，就像是jQuery实现ajax封装，所以axios是ajax而ajax不止axios。
- ajax使用需要导入jQuery十分的笨重，而使用axios只需要引入简单的cdn。
- ajax是针对MVC进行编码，不符合现在大前端MVVM的设计模型。
1.4、Axios初体验
1.4.1、模拟json数据
{
"name": "axios",
"url": "http://www.baidu.com",
"page": 1,
"isNonProfit": true,
"address": {
"street": "太平街道",
"city": "长沙市",
"country": "中国"
},
"links": [
{
"name": "vue",
"url": "https://cn.vuejs.org/v2/guide/instance.html"
},
{
"name": "axios",
"url": "http://www.axios-js.com/zh-cn/docs/"
}
]
}
1.4.2、引入cdn
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
1.4.3、编写代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.get("./data.json").then(function (response) {
console.log(response.data);
})
</script>
</body>
</html>
1.5、Axios的实际运用
- 使用axios框架发送get请求获取json数据。
- 使用钩子函数在页面加载之前初始化参数。
- 使用
v-bind:href等指令绑定json数据中的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*v-cloak解决页面闪烁问题（慢加载不会出现{{message}}这样的信息）*/
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<span>地址：{{info.address.country}}===={{info.address.city}}===={{info.address.street}}</span>
<hr>
<!-- :href相当于v-bind:href 同时请看清楚这种取vue中参数不需要双重花括号-->
<a :href="info.url">{{info.name}}</a>
<hr>
<div v-for="item in info.links">
<a :href="item.url">{{item.name}}</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vue = new Vue({
el:"#app",
data:{
info:{
address:{
street:'',
city:'',
country:''
},
links:[
{
name:'',
url:''
}
]
}
},
// 钩子函数初始化参数
created: function () {
// axios发送请求
axios.get("./data.json").then(response=>{
// this代表当前的vue实例
this.info=response.data;
});
}
})
</script>
</body>
</html>
2、Vue的生命周期
Vue实例有一个完整的生命周期，也就是从开始创建初始化数据、编译模板、挂载DOM、渲染一更新一渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册JS方法，可以让我们用自己注册的JS方法控制整个大局，在这些事件响应方法中的this直接指向的是Vue的实例。
3、计算属性
3.1、什么叫做计算属性
计算属性和组件应用的效果其实类似，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要依赖属性的值还没有发生改变，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。类似于缓存的作用，能够提高页面响应的速度。计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销。
3.2、代码解释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div>翻转前:{{message}}</div>
<div>翻转后:{{reverseMessage}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vue = new Vue({
el:"#app",
data:{
message:'hello'
},
computed:{
reverseMessage:function () {
return this.message.split('').reverse().join("");
}
}
})
</script>
</body>
</html>
页面能够正常显示后，可以F12打开控制台，vue.message='zhangsan'，可以清晰的看到message，reverseMessage都在实时变化，reverseMessage的变化就能体现计算属性是基于响应式依赖的。
4、内容分发插槽
4.1、什么叫做插槽
在Vue.js中我们使用<slot>元素作为承载分发内容的出口，称之为插槽，组件和插槽的关系其实就是电脑和内存条的区别，每一跟内存条可以插入到不同的电脑上，即插即用，十分的快捷方便。
4.2、代码解释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<slot-component>
<!--将组件和插槽关联 同时传递参数-->
<slot-name slot="slot-name1" :bookname="name"></slot-name>
<slot-book slot="slot-book2" v-for="item in books" :book="item"></slot-book>
</slot-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
// 在组件中声明哪里需要用到插槽，注意slot标签的name不是组件名而是后续引用组件的slot属性名字
Vue.component("slot-component",{
template:'<div><h1>书籍详情 </h1>' +
'<slot name="slot-name1"></slot>\n' +
'<ul>' +
' <slot name="slot-book2"></slot>' +
'</ul></div>'
});
Vue.component("slot-name",{
props:{
bookname:''
},
template: '<h2>{{bookname}}</h2>'
});
Vue.component("slot-book",{
props:{
book:''
},
template: '<li>{{book}}</li>'
});
var vue = new Vue({
el:"#app",
data:{
name:"学习slot",
books:["Java初级","Java中级","Java高级"]
}
});
</script>
</body>
</html>
4.3、注意坑
- 在组件中申明哪里需要用到插槽时，请一定要用div标签包裹起来，不然页面不报错，但是插槽内容根本不是展示。
- 在将组件和插槽关联起来时，需要特别注意的是属性为
slot="slot-name1"并非name。
5、自定义事件
思考：数据项在Vue的实例中， 但删除操作要在组件中完成， 那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了， Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题。
5.1、逻辑梳理
- 需要定义一个点击按钮
@click='remove1'，点击时触发自定义方法remove1。 - 自定义方法remove里面实现就是
this.$emit('remove2',index)，$emit用处就是传入事件名称来触发一个事件。 - 在父级标签监听
v-on:remove2="removeItems"。 - 在vue实例中定义方法removeItems完成删除books数组内容操作。
5.2、流程图说明
5.3、代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<slot-component>
<slot-name slot="slot-name" :name="name"></slot-name>
<!--v-on:remove="removeItems" 简写为@remove="removeItems"-->
<slot-book slot="slot-book" v-for="(item,index) in books" :bookname="item" :index="index" v-on:remove2="removeItems"></slot-book>
</slot-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
Vue.component("slot-component",{
template:"<div>\n" +
" <h1>java开发: <slot name='slot-name'></slot></h1>\n" +
" <ul>\n" +
" <slot name='slot-book'></slot>\n" +
" </ul>\n" +
" </div>"
});
Vue.component("slot-name",{
props:{
name:""
},
template: "<h1>{{name}}</h1>"
});
Vue.component("slot-book",{
props:{
bookname:'',
index:''
},
template: "<li>" +
"{{bookname}} =====> <button @click='remove1'>删除</button>" +
"</li>",
methods:{
remove1(index){
// $emit 方法 传入事件名称来触发一个事件
this.$emit('remove2',index)
}
}
});
var vue = new Vue({
el:"#app",
data:{
name:"java学习路线",
books:["Java初级","Java中级","Java高级"]
},
methods: {
removeItems(index){
this.books.splice(index,1);
}
}
})
</script>
</body>
</html>
6、Vue入门小结
核心：双向绑定、组件化、计算属性。
优点：Vue集成了AngularJS的模块化开发和React的虚拟Dom。
常用的属性：
- v-if
- v-else-if
- v-else
- v-for
- v-on绑定事件，简写@
- v-model数据双向绑定
- v-bind给组件绑定参数，简写：
组件化：
- 组合组件slot插槽
- 组件内部绑定事件需要使用到
this.$emit("事件名",参数); - 计算属性的特色，缓存计算数据
遵循SoC关注度分离原则，Vue是纯粹的视图框架，并不包含如Ajax之类的通信功能，为了解决通信问题，我们需要使用Axios框架做异步通信；
Vue的开发都是要基于NodeJS，实际开发采用Vue-cli脚手架开发，vue-router路由，vuex做状态管理；Vue UI，界面我们一般使用ElementUI
（饿了么https://element.eleme.cn/#/zh-CN），或者ICE（阿里巴巴https://ice.work/）来快速搭建前端项目。
扫一扫
872
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
