开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 18 天，点击查看活动详情 响应式数据的基本实现

this.$options与request封装

this.$options 指的是什么

Vue实例初始化的时候传进去的参数。

new Vue(options)

el就是element的缩写，也就是页面挂载在那个dom上面。 和mount一样都是挂载，一个意思。 所以Vue实例化的时候有两种方式

• 方式一

new Vue({
  el: "#app",
  render: h => h(App)
})

• 方式二

new Vue({
  render: h => h(App)
}).$mount("#app");

this.$options.data() data方法指的又是什么。

调用data()方法指的是什么呢，为什么this.$options.data().formModal 可以重置表单

如下所示页面的一般结构

<script>
    export default {
        data() {
            return {
                // 表单
                form: {
                    input: ''
                }
            }
        },
        ...
        methods: {
            // 因此我们可以调用datafangfa里面的form来重置表单默认值方法
            retset() {
                this.form = this.$options.data().form;
            }
        },
        ...
    }
</script>

script标签里面export导出的对象里面有data()方法，methods 对象。没错this.$options.data() 中data方法就是页面script标签导出的data方法。

因此当我们输入一半想重置form表单的时候就可以this.$options.data().form;来实现。

install插件增加全局request属性来封装接口请求

• main.js

Vue.use(request)

const app = new Vue({
  ...App,
  api
})

• api.js

export default {
  // 所有的请求
  requestMethods: {
    login (data) {
      return minRequest.post('/login', data)
    }
  }
}

• request.js

封装request的install方法

Request.install = function (Vue) {
  Vue.mixin({
    beforeCreate: function () {
			if (this.$options.api) {
        console.log(this.$options.api)
				Vue._requestApi = this.$options.api
			}
    }
  })
  // 通过 Object.defineProperty在Vue上面添加属性
  Object.defineProperty(Vue.prototype, '$uniApi', {
    get: function () {
        return Vue._requestApi.requestMethods
    }
  })
}

export default Request

在pages页面调用

<script>
    export default {
        data() {
            return {
                // 表单
                form: {
                    input: ''
                }
            }
        },
        ...
        methods: {
            // 请求登录接口
            login() {
                this.$uniApi.login({userName: 'admin', password:md5(this.form.password)}).then(res => {
                       // 请求完成的回调
			this.res = res
			console.log(res)
		}).catch(err => {
                       // 错误处理。
			console.log(err)
		})
            }
        },
        ...
    }
</script>
  

通过 Object.defineProperty在Vue上面添加属性将网络请求简化。

uni-app中main.js中的myType干嘛用

用来区分component的。

uview报SassError: Undefined variable: “$u-border-color“

按照说明一条一条对比，基本上概括全了次问题。

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 18 天，点击查看活动详情 响应式数据的基本实现