vue开发知识点总结

一、vue介绍Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架，是一个轻量级MVVM（model-view-viewModel）框架。

一、vue介绍

　　Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架，是一个轻量级MVVM（model-view-viewModel）框架。

二、数据绑定

最常用的方式：Mustache(插值语法)，也就是 {{}} 语法
解释：{{}}从数据对象data中获取数据
说明：数据对象的属性值发生了改变，插值处的内容都会更新
说明：{{}}中只能出现JavaScript表达式而不能解析js语句
注意：Mustache 语法不能作用在 HTML 元素的属性上

　双向数据绑定：将DOM与Vue实例的data数据绑定到一起，彼此之间相互影响

数据的改变会引起DOM的改变
DOM的改变也会引起数据的变化

　　原理：Object.defineProperty中的get和set方法

getter和setter：访问器
作用：指定读取或设置对象属性值的时候，执行的操作

三、vue指令

　　v-text、v-html、v-if、v-show、v-for、v-bind（绑定标签属性）、v-on(绑定事件)、v-model（绑定表单）

在监听键盘事件时，Vue 允许为 v-on 在监听键盘事件时添加关键修饰符，eg：@keyup.enter="add"

四、过滤器filters

　　1.全局过滤器

1 <div>{{ dateStr | date }}</div>
2 <div>{{ dateStr | date('YYYY-MM-DD hh:mm:ss') }}</div>
3 
4 <script>
5   Vue.filter('date', function(value, format) {
6     // value 要过滤的字符串内容，比如：dateStr
7     // format 过滤器的参数，比如：'YYYY-MM-DD hh:mm:ss'
8   })
9 </script>

　　2.局部过滤器

1 {
2   data: {},
3   // 通过 filters 属性创建局部过滤器
4   // 注意：此处为 filters
5   filters: {
6     filterName: function(value, format) {}
7   }
8 }

五、监听数据变化watch

　　watch是一个对象，键是需要观察的表达式，值是对应回调函数

 1 new Vue({
 2   data: { a: 1, b: { age: 10 } },
 3   watch: {
 4     a: function(val, oldVal) {
 5       // val 表示当前值
 6       // oldVal 表示旧值
 7       console.log('当前值为：' + val, '旧值为：' + oldVal)
 8     },
 9 
10     // 监听对象属性的变化
11     b: {
12       handler: function (val, oldVal) { /* ... */ },
13       // deep : true表示是否监听对象内部属性值的变化 
14       deep: true
15     },
16 
17     // 只监视user对象中age属性的变化
18     'user.age': function (val, oldVal) {
19     },
20   }
21 })

六、计算属性computed

 1 var vm = new Vue({
 2   el: '#app',
 3   data: {
 4     firstname: 'jack',
 5     lastname: 'rose'
 6   },
 7   computed: {
 8     fullname() {
 9       return this.firstname + '.' + this.lastname
10     }//注意不能和data里面重名
11   }
12 })

七、vue生命周期

介绍：一个组件从开始到最后消亡所经历的各种状态，就是一个组件的生命周期
生命周期钩子函数：从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，这些事件，统称为组件的生命周期函数！

　　beforeCreate()

说明：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
注意：此时，无法获取 data中的数据、methods中的方法

　　created()

注意：这是一个常用的生命周期，可以调用methods中的方法、改变data中的数据
使用场景：发送请求获取数据

　　beforeMounted()

说明：在挂载开始之前被调用

　　mounted()

说明：此时，vue实例已经挂载到页面中，可以获取到el中的DOM元素，进行DOM操作

　　beforeUpdated()

说明：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。

　　updated()

说明：组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。

　　beforeDestroy()

说明：实例销毁之前调用。在这一步，实例仍然完全可用。
使用场景：实例销毁之前，执行清理任务，比如：清除定时器等

　　destroyed()

说明：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

八、axios

以Promise为基础的HTTP客户端，适用于：浏览器和node.js
封装ajax，用来发送请求，异步获取数据
安装：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 = 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=utf-8"
12   }
13 });
14 
15 Axios.interceptors.request.use( // POST传参序列化(添加请求拦截器)
16   config => {
17     // 在发送请求之前做某件事
18     if (
19       config.method === "post" ||
20       config.method === "put" ||
21       config.method === "delete"
22     ) {
23       // 序列化
24       config.data = qs.stringify(config.data);
25     }
26 
27     // 若是有做鉴权token , 就给头部带上token
28     // if (localStorage.token) {
29     //   config.headers.Authorization = localStorage.token;
30     // }
31 
32     Indicator.open({
33       // text: '加载中...',
34       spinnerType: 'fading-circle'
35     });//mint-ui加载动画
36 
37     return config;
38   },
39   error => {
40     console.log(error)
41     Toast({
42       message: error,
43       position: 'middle',
44       duration: -1
45     });
46     Indicator.close();
47     return Promise.reject(error);
48   }
49 );
50 
51 Axios.interceptors.response.use( // 响应拦截器
52   response => {
53     Indicator.close();
54     // if (res.status != 200) {
55     //   alert(res.statusText);
56     //   return Promise.reject(res);
57     // }
58     if (response.data == null && response.config.responseType === 'json' && response.request.responseText != null) {
59       try {
60         // eslint-disable-next-line no-param-reassign
61         response.data = JSON.parse(response.request.responseText);
62       } catch (e) {
63         // ignored
64       }
65     }
66     return response;
67   },
68   error => {
69     Indicator.close();
70     if (error.response) {
71       // 请求已发出，但服务器响应的状态码不在 2xx 范围内
72  
73     } else {
74       //一些错误是在设置请求的时候触发
75 
76       console.log('Error', error.message);
77     }
78 
79     Toast({
80       message: error.message,
81       position: 'middle',
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 };

---
// 在组件中使用：
methods: {
  getData() {
    this.$axios.get('url')
      .then(res => {})
      .catch(err => {})
  }
}

九、组件之间通讯

　　父组件到子组件（通过props）

注意：属性的值必须在组件中通过props属性显示指定，否则，不会生效
说明：传递过来的props属性的用法与data属性的用法相同

 1 <div id="app">
 2   <!-- 如果需要往子组件总传递父组件data中的数据 需要加v-bind="数据名称" -->
 3   <hello v-bind:msg="info"></hello>
 4   <!-- 如果传递的是字面量 那么直接写-->
 5   <hello my-msg="abc"></hello>
 6 </div>
 7 
 8 <!-- js -->
 9 <script>
10   new Vue({
11     el: "#app",
12     data : {
13       info : 15
14     },
15     components: {
16       hello: {
17         // 创建props及其传递过来的属性
18         props: ['msg', 'myMsg'],
19         template: '<h1>这是 hello 组件，这是消息：{{msg}} --- {{myMsg}}</h1>'
20       }
21     }
22   })
23 </script>

　　子组件到父组件

1、在父组件中定义方法 parentFn
2、在子组件组件引入标签中绑定自定义事件 v-on:自定义事件名="父组件中的方法" ==> @pfn="parentFn"
3、子组件中通过$emit()触发自定义事件事件 this.$emit(pfn,参数列表。。。)

 1 <hello @pfn="parentFn"></hello>
 2 
 3 <script>
 4   Vue.component('hello', {
 5     template: '<button @click="fn">按钮</button>',
 6     methods: {
 7       // 子组件：通过$emit调用
 8       fn() {
 9         this.$emit('pfn', '这是子组件传递给父组件的数据')
10       }
11     }
12   })
13   new Vue({
14     methods: {
15       // 父组件：提供方法
16       parentFn(data) {
17         console.log('父组件：', data)
18       }
19     }
20   })
21 </script>

　　非父子组件通讯

在简单的场景下，可以使用一个空的 Vue 实例作为事件总线，创建eventBus.js文件

1 import Vue from 'Vue'
2 
3 export const Event = new Vue() // 注册单一事件管理组件通信

示例：组件A ---> 组件B

 1 <!-- 组件A： -->
 2 <com-a></com-a>
 3 <!-- 组件B： -->
 4 <com-b></com-b>
 5 
 6 <script>
 7   import  Event  from '../assets/js/eventBus'
 8   // 通信组件
 9   var vm = new Vue({
10     el: '#app',
11     components: {
12       comB: {
13         template: '<p>组件A告诉我：{{msg}}</p>',
14         data() {
15           return {
16             msg: ''
17           }
18         },
19         created() {
20           // 给中间组件绑定自定义事件 注意:如果用到this 需要用箭头函数
21           bus.$on('tellComB', (msg) => {
22             this.msg = msg
23           })
24         }
25       },
26       comA: {
27         template: '<button @click="emitFn">告诉B</button>',
28         methods: {
29           emitFn() {
30             // 触发中间组件中的自定义事件
31             bus.$emit('tellComB', '土豆土豆我是南瓜')
32           }
33         }
34       }
35     }
36   })
37 </script>

十、内容分发

通过<slot></slot> 标签指定内容展示区域

十一、获取组件（或元素） - refs

说明：vm.$refs 一个对象，持有已注册过 ref 的所有子组件（或HTML元素）
使用：在 HTML元素中，添加ref属性，然后在JS中通过vm.$refs.属性来获取
注意：如果获取的是一个子组件，那么通过ref就能获取到子组件中的data和methods

 1 <div id="app">
 2   <div ref="dv"></div>
 3   <my res="my"></my>
 4 </div>
 5 
 6 <!-- js -->
 7 <script>
 8   new Vue({
 9     el : "#app",
10     mounted() {
11       this.$refs.dv //获取到元素
12       this.$refs.my //获取到组件
13     },
14     components : {
15       my : {
16         template: `<a>sss</a>`
17       }
18     }
19   })
20 </script>