vue开发知识点总结

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

一、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>

以上是 vue开发知识点总结 的全部内容， 来源链接： utcz.com/z/379491.html

回到顶部