一、vue介绍
Vue.js 是一套构建用户界面(UI)的渐进式Javascript框架&＃xff0c;是一个轻量级MVVM&＃xff08;model-view-viewModel&＃xff09;框架。
二、数据绑定
- 最常用的方式&＃xff1a;
Mustache(插值语法)&＃xff0c;也就是{{}}语法 - 解释&＃xff1a;
{{}}从数据对象data中获取数据 - 说明&＃xff1a;数据对象的属性值发生了改变&＃xff0c;插值处的内容都会更新
- 说明&＃xff1a;
{{}}中只能出现Javascript表达式 而不能解析js语句 - 注意&＃xff1a;Mustache 语法不能作用在 HTML 元素的属性上
双向数据绑定&＃xff1a;将DOM与Vue实例的data数据绑定到一起&＃xff0c;彼此之间相互影响
- 数据的改变会引起DOM的改变
- DOM的改变也会引起数据的变化
原理&＃xff1a;Object.defineProperty中的get和set方法
getter和setter&＃xff1a;访问器- 作用&＃xff1a;指定
读取或设置对象属性值的时候&＃xff0c;执行的操作
三、vue指令
v-text、v-html、v-if、v-show、v-for、v-bind&＃xff08;绑定标签属性&＃xff09;、v-on(绑定事件)、v-model&＃xff08;绑定表单&＃xff09;
- 在监听键盘事件时&＃xff0c;Vue 允许为
v-on在监听键盘事件时添加关键修饰符&＃xff0c;eg&＃xff1a;&＃64;keyup.enter&＃61;"add"
四、过滤器filters
1.全局过滤器
1
2
3
4
2.局部过滤器
1 {
2 data: {},
3 // 通过 filters 属性创建局部过滤器
4 // 注意&＃xff1a;此处为 filters
5 filters: {
6 filterName: function(value, format) {}
7 }
8 }
五、监听数据变化watch
watch是一个对象&＃xff0c;键是需要观察的表达式&＃xff0c;值是对应回调函数
1 new Vue({
2 data: { a: 1, b: { age: 10 } },
3 watch: {
4 a: function(val, oldVal) {
5 // val 表示当前值
6 // oldVal 表示旧值
7 console.log(&＃39;当前值为&＃xff1a;&＃39; &＃43; val, &＃39;旧值为&＃xff1a;&＃39; &＃43; oldVal)
8 },
9
10 // 监听对象属性的变化
11 b: {
12 handler: function (val, oldVal) { /* ... */ },
13 // deep : true表示是否监听对象内部属性值的变化
14 deep: true
15 },
16
17 // 只监视user对象中age属性的变化
18 &＃39;user.age&＃39;: function (val, oldVal) {
19 },
20 }
21 })
六、计算属性computed
1 var vm &＃61; new Vue({
2 el: &＃39;#app&＃39;,
3 data: {
4 firstname: &＃39;jack&＃39;,
5 lastname: &＃39;rose&＃39;
6 },
7 computed: {
8 fullname() {
9 return this.firstname &＃43; &＃39;.&＃39; &＃43; this.lastname
10 }//注意不能和data里面重名
11 }
12 })
七、vue生命周期
- 介绍&＃xff1a;一个组件从开始到最后消亡所经历的各种状态&＃xff0c;就是一个组件的生命周期
- 生命周期钩子函数&＃xff1a;从组件被创建&＃xff0c;到组件挂载到页面上运行&＃xff0c;再到页面关闭组件被卸载&＃xff0c;这三个阶段总是伴随着组件各种各样的事件&＃xff0c;这些事件&＃xff0c;统称为组件的生命周期函数&＃xff01;
beforeCreate()
- 说明&＃xff1a;在实例初始化之后&＃xff0c;数据观测 (data observer) 和 event/watcher 事件配置之前被调用
- 注意&＃xff1a;此时&＃xff0c;无法获取 data中的数据、methods中的方法
created()
- 注意&＃xff1a;这是一个常用的生命周期&＃xff0c;可以调用methods中的方法、改变data中的数据
- 使用场景&＃xff1a;发送请求获取数据
beforeMounted()
- 说明&＃xff1a;在挂载开始之前被调用
mounted()
- 说明&＃xff1a;此时&＃xff0c;vue实例已经挂载到页面中&＃xff0c;可以获取到el中的DOM元素&＃xff0c;进行DOM操作
beforeUpdated()
- 说明&＃xff1a;数据更新时调用&＃xff0c;发生在虚拟 DOM 重新渲染和打补丁之前。
updated()
- 说明&＃xff1a;组件 DOM 已经更新&＃xff0c;所以你现在可以执行依赖于 DOM 的操作。
beforeDestroy()
- 说明&＃xff1a;实例销毁之前调用。在这一步&＃xff0c;实例仍然完全可用。
- 使用场景&＃xff1a;实例销毁之前&＃xff0c;执行清理任务&＃xff0c;比如&＃xff1a;清除定时器等
destroyed()
- 说明&＃xff1a;Vue 实例销毁后调用。调用后&＃xff0c;Vue 实例指示的所有东西都会解绑定&＃xff0c;所有的事件监听器会被移除&＃xff0c;所有的子实例也会被销毁。
八、axios
- 以Promise为基础的HTTP客户端&＃xff0c;适用于&＃xff1a;浏览器和node.js
- 封装ajax&＃xff0c;用来发送请求&＃xff0c;异步获取数据
- 安装&＃xff1a;
npm i -S axios
1、创建axios文件
1 import axios from "axios";
2 import qs from "qs";
3 import { Indicator, Toast } from "mint-ui";
4
5 const Axios &＃61; axios.create({
6 baseURL: "",//接口域名
7 timeout: 5000,
8 responseType: "json",
9 // withCredentials: true, // 是否允许带COOKIE这些
10 headers: {
11 "Content-Type": "application/x-www-form-urlencoded;charset&＃61;utf-8"
12 }
13 });
14
15 Axios.interceptors.request.use( // POST传参序列化(添加请求拦截器)
16 config &＃61;> {
17 // 在发送请求之前做某件事
18 if (
19 config.method &＃61;&＃61;&＃61; "post" ||
20 config.method &＃61;&＃61;&＃61; "put" ||
21 config.method &＃61;&＃61;&＃61; "delete"
22 ) {
23 // 序列化
24 config.data &＃61; qs.stringify(config.data);
25 }
26
27 // 若是有做鉴权token , 就给头部带上token
28 // if (localStorage.token) {
29 // config.headers.Authorization &＃61; localStorage.token;
30 // }
31
32 Indicator.open({
33 // text: &＃39;加载中...&＃39;,
34 spinnerType: &＃39;fading-circle&＃39;
35 });//mint-ui加载动画
36
37 return config;
38 },
39 error &＃61;> {
40 console.log(error)
41 Toast({
42 message: error,
43 position: &＃39;middle&＃39;,
44 duration: -1
45 });
46 Indicator.close();
47 return Promise.reject(error);
48 }
49 );
50
51 Axios.interceptors.response.use( // 响应拦截器
52 response &＃61;> {
53 Indicator.close();
54 // if (res.status !&＃61; 200) {
55 // alert(res.statusText);
56 // return Promise.reject(res);
57 // }
58 if (response.data &＃61;&＃61; null && response.config.responseType &＃61;&＃61;&＃61; &＃39;json&＃39; && response.request.responseText !&＃61; null) {
59 try {
60 // eslint-disable-next-line no-param-reassign
61 response.data &＃61; JSON.parse(response.request.responseText);
62 } catch (e) {
63 // ignored
64 }
65 }
66 return response;
67 },
68 error &＃61;> {
69 Indicator.close();
70 if (error.response) {
71 // 请求已发出&＃xff0c;但服务器响应的状态码不在 2xx 范围内
72
73 } else {
74 //一些错误是在设置请求的时候触发
75
76 console.log(&＃39;Error&＃39;, error.message);
77 }
78
79 Toast({
80 message: error.message,
81 position: &＃39;middle&＃39;,
82 duration: -1
83 });
84
85 return Promise.reject(error);
86 }
87 );
88
89
90 export default {
91 install: function (Vue, Option) {
92 Object.defineProperty(Vue.prototype, "$axios", { value: Axios });
93 }
94 };
---
// 在组件中使用&＃xff1a;
methods: {getData() {this.$axios.get(&＃39;url&＃39;).then(res &＃61;> {}) .catch(err &＃61;> {}) } }
九、组件之间通讯
父组件到子组件&＃xff08;通过props&＃xff09;
- 注意&＃xff1a;属性的值必须在组件中通过
props属性显示指定&＃xff0c;否则&＃xff0c;不会生效 - 说明&＃xff1a;传递过来的
props属性的用法与data属性的用法相同
1
2
3
4
5
6
7
8
9
子组件到父组件
- 1、在父组件中定义方法 parentFn
- 2、在子组件 组件引入标签 中绑定自定义事件 v-on:自定义事件名&＃61;"父组件中的方法" &＃61;&＃61;> &＃64;pfn&＃61;"parentFn"
- 3、子组件中通过
$emit()触发自定义事件事件 this.$emit(pfn,参数列表。。。)
1
2
3
非父子组件通讯
- 在简单的场景下&＃xff0c;可以使用一个空的 Vue 实例作为事件总线&＃xff0c;创建eventBus.js文件
1 import Vue from &＃39;Vue&＃39;
2
3 export const Event &＃61; new Vue() // 注册单一事件管理组件通信
- 示例&＃xff1a;组件A ---> 组件B
1
2
3
4
5
6
十、内容分发
- 通过
标签指定内容展示区域
十一、获取组件&＃xff08;或元素&＃xff09; - refs
- 说明&＃xff1a;
vm.$refs一个对象&＃xff0c;持有已注册过 ref 的所有子组件&＃xff08;或HTML元素&＃xff09; - 使用&＃xff1a;在 HTML元素 中&＃xff0c;添加
ref属性&＃xff0c;然后在JS中通过vm.$refs.属性来获取 - 注意&＃xff1a;如果获取的是一个子组件&＃xff0c;那么通过ref就能获取到子组件中的data和methods
1
2
3
4
5
6
7
京公网安备 11010802041100号