精华内容
下载资源
问答
  • vue api

    千次阅读 2018-05-21 17:06:40
    1.全局配置Vue.config时一个对象有以下属性: ··· Vue.config.solent = true; 取消Vue所有的日志和警告 ··· Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) { return child...

    1.全局配置Vue.config时一个对象有以下属性:

       ··· Vue.config.solent = true; 取消Vue所有的日志和警告

       ··· Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) {

         return child + 1

        }

    const Profile = Vue.extend({
      _my_option: 1
    })合并策略选项分别接收在父实例和子实例上定义的该选项的值作为第一个和第二个参数,Vue 实例上下文被作为第三个参数传入。

       ····Vue.config.devtools = true; 配置是否允许vue-devtools检查代码。开发版本默认为true,生产版本默认为false.

        ····Vue.config.errorHandler = function(err,vm,info){};捕获错误的处理函数

        ····Vue.config.warmHandler = function(smg,vm,trace){};为vue运行时警告赋予一个自定义处理函数

        ····Vue.config.productionTip = true;默认   设置为false 阻止vue 在启动时声成生产提示。

    2.全局API

       ···Vue.extend();

    // 创建构造器
    var Profile = Vue.extend({
      template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
      data: function () {
        return {
          firstName: 'Walter',
          lastName: 'White',
          alias: 'Heisenberg'
        }
      }
    })
    // 创建 Profile 实例,并挂载到一个元素上。
    new Profile().$mount('#mount-point')
    

    结果如下:

    <p>Walter White aka Heisenberg</p>

        ···Vue.nextTick(funciton(){})或者 Vue.nextTick().then(function(){});在下次DOM更新循环结束之后执行的演示回调。在修改数据之后立即使用这个方法,获取更新后的DOM.

        ···Vue.set(target,key,value);向响应式对象中添加一个属性,并确保这个心属性同样是响应式的,且出发视图更新。它必须用于响应式对象上添加新属性,因为Vue无法探测普通的属性。

        ···Vue.directive("name",{bind:function(){},inserted:function(){},updata:function(){},componentUpdated(){}})或

            指令函数Vue.directive("name",function(){});; 这里在bind和 update 时调用。

        ···Vue.filter("name",function(){});注册全局过滤器

        ···Vue.component("name",{});注册全局组件

        ···Vue.use();安装Vue.js插件。如果插件是一个对象,必须提供install方法。如果插件是一个函数,它会被作为install。install方法调用时,会将vue作为参数传入。

        选项/数据

            ···vm.$data === data;

            ···props:[] 或者props:{age:{type:Number.default:0,validator:function(){}})

            ···computed:计算属性会被缓存,示例:

    var vm = new Vue({
      data: { a: 1 },
      computed: {
        // 仅读取
        aDouble: function () {
          return this.a * 2
        },
        // 读取和设置
        aPlus: {
          get: function () {
            return this.a + 1
          },
          set: function (v) {
            this.a = v - 1
          }
        }
      }
    })
    vm.aPlus   // => 2
    vm.aPlus = 3
    vm.a       // => 2
    vm.aDouble // => 4

           ·····watch:{key: value}

            ····生命周期钩子:

                    1.beforeCreate

                    2.created

                    3.beforeMount

                    4.mounted  注意:mounted不会承诺所有的子组件都一起呗挂载。如果希望等到整个视图都渲染完毕,可以有vm.$nextTick替换mounted 例如:::

    mounted: function () {
      this.$nextTick(function () {
        // Code that will run only after the
        // entire view has been rendered
      })
    }
                     5.updated   注意:mounted不会承诺所有的子组件都一起呗挂载。如果希望等到整个视图都渲染完毕,可以有vm.$nextTick替换updated  例如:::  
    updated: function () {
      this.$nextTick(function () {
        // Code that will run only after the
        // entire view has been re-rendered
      })
    }

            ···parent:子示例可以用this.$parent访问父示例  父示例可以this.$children访问子示例

            ···vm.$data 访问对象属性

            ···vm.$options 访问自定义属性        

            ···vm.$slots.xxx  访问插槽

            ···vm.$attrs:包含了父作用域中不作为props被识别的特性绑定。当一个组件没有声明任何prop时,这里会包含所有父作用域的绑定,并且可以通过v-bind=“$attrs"传入内部组件--在创建告警别的组件时非常有用

            ···vm.$listeners:包含了父作用域中的v-on时间监听器。它可以通过v-on="$listeners"传入内部组件--在创建更高层次的组件时非常有用。

            ···选项deep:为了发现对象内部值得变化,可以在选项中指定deep:true.注意坚挺数组的变动不需要这么做。

            ···vm.$mount():手动地挂载一个未挂载的实例

            ···v-on 用在普通元素上时,只能监听原生DOM时间。用在自定义元素组件上,也可以监听子组件出发的自定义时间。

            

    <!-- 方法处理器 -->
    <button v-on:click="doThis"></button>
    
    <!-- 内联语句 -->
    <button v-on:click="doThat('hello', $event)"></button>
    
    <!-- 缩写 -->
    <button @click="doThis"></button>
    
    <!-- 停止冒泡 -->
    <button @click.stop="doThis"></button>
    
    <!-- 阻止默认行为 -->
    <button @click.prevent="doThis"></button>
    
    <!-- 阻止默认行为,没有表达式 -->
    <form @submit.prevent></form>
    
    <!--  串联修饰符 -->
    <button @click.stop.prevent="doThis"></button>
    
    <!-- 键修饰符,键别名 -->
    <input @keyup.enter="onEnter">
    
    <!-- 键修饰符,键代码 -->
    <input @keyup.13="onEnter">
    
    <!-- 点击回调只会触发一次 -->
    <button v-on:click.once="doThis"></button>
    
    <!-- 对象语法 (2.4.0+) -->
    <button v-on="{ mousedown: doThis, mouseup: doThat }"></button
    <!-- 方法处理器 -->
    <button v-on:click="doThis"></button>
    
    <!-- 内联语句 -->
    <button v-on:click="doThat('hello', $event)"></button>
    
    <!-- 缩写 -->
    <button @click="doThis"></button>
    
    <!-- 停止冒泡 -->
    <button @click.stop="doThis"></button>
    
    <!-- 阻止默认行为 -->
    <button @click.prevent="doThis"></button>
    
    <!-- 阻止默认行为,没有表达式 -->
    <form @submit.prevent></form>
    
    <!--  串联修饰符 -->
    <button @click.stop.prevent="doThis"></button>
    
    <!-- 键修饰符,键别名 -->
    <input @keyup.enter="onEnter">
    
    <!-- 键修饰符,键代码 -->
    <input @keyup.13="onEnter">
    
    <!-- 点击回调只会触发一次 -->
    <button v-on:click.once="doThis"></button>
    
    <!-- 对象语法 (2.4.0+) -->
    <button v-on="{ mousedown: doThis, mouseup: doThat }"></button


              ···key:当你遇到如下场景会用到:1.完整地触发生命周期钩子 2.触发过渡

    <transition>
      <span :key="text">{{ text }}</span>
    </transition>

            ···








    展开全文
  • vue api详解

    千次阅读 2018-12-04 17:00:58
    silent: true 或者 false, 脚手架生成默认为false (取消 Vue 所有的日志与警告。) Vue.config.silent = true optionMergeStrategies:用于自定义选项的合并策略,Vue已经预定义了一些自己配置项的合并策略,...

    全局配置:

    silent: true 或者 false, 脚手架生成默认为false  (取消 Vue 所有的日志与警告。)

    Vue.config.silent = true

    optionMergeStrategies:用于自定义选项的合并策略,Vue已经预定义了一些自己配置项的合并策略,extend,extends和mixins三种方式接收的options,最终都是通过mergeOptions进行合并的

    var strats = config.optionMergeStrategies;
    strats.props =
    strats.methods =
    strats.computed = function (parentVal, childVal) {
      if (!childVal) { return Object.create(parentVal || null) }
      if (!parentVal) { return childVal }
      var ret = Object.create(null);
      extend(ret, parentVal);
      extend(ret, childVal);
      return ret
    };
    

     errorHandler:可以进行全局错误收集,我们可以根据这个特性对前端异常做这样的处理:业务错误直接写在业务里;代码错误、ajax请求异常等错误可以进行全局捕获然后抛出,不至于前端页面挂掉

    import Vue from 'vue'
    //系统错误捕获
    const errorHandler = (error, vm)=>{
      console.error('抛出全局异常');
      console.error(vm);
      console.error(error);
      
    }
    
    Vue.config.errorHandler = errorHandler;
    Vue.prototype.$throw = (error)=> errorHandler(error,this);

     如果是ajax异步请求,异常需要通过this.$throw()手动抛出

    productionTip:设置为 false 以阻止 vue 在启动时生成生产提示。脚手架默认生成false

    Vue.config.productionTip = false

    全局 API:

     extend:使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。可以扩展 Vue 构造器,从而用预定义选项创建可复用的组件构造器。

    let options = {
        template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
        data: function () {
            return {
                firstName: 'Walter',
                lastName: 'White',
                alias: 'Heisenberg'
            }
        },
        created(){
            console.log('onCreated-1');
        }
    };

     

    ​
    let BaseComponent = Vue.extend(baseOptions);
    //基于基础组件BaseComponent,再扩展新逻辑.
    new BaseComponent({
        created(){
            //do something
            console.log('onCreated-2');
        }
        //其他自定义逻辑
    });
    new BaseComponent().$mount('#mount-point')//将baseComponent实例化 挂载到mount-point
    
    ​

    mixin:全局注册一个混入,影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入,向组件注入自定义的行为

    Vue.mixin({
      updated : function() {
        console.log("全局updated");
      }
    });

    nextTick:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

    • 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中

    delete:删除对象的属性。如果对象是响应式的,确保删除能触发更新视图。在 2.2.0+ 中同样支持在数组上工作

    directive:自定义指令或者获取全局指令,Vue.directive要在实例初始化之前,不然会报错,还有,定义的指令不支持驼峰式写法,也会报下面同样的错,钩子函数:bind inserted update componentUpdated unbind

    Vue.directive('focus', {//元素一渲染就自动聚焦
    
      inserted: function (el) {
    
        el.focus()
      }
    })
    //使用
    <input v-focus>

    filter:注册或获取全局过滤器

    Vue.filter('my-filter', function (value) {//注册
    
    })
    
    var myFilter = Vue.filter('my-filter')//获取

    component:注册获取全局组件

    Vue.component('my-component', Vue.extend({ /* ... */ }))
    Vue.component('my-component', { /* ... */ })
    var MyComponent = Vue.component('my-component')

    use:该方法需要在调用 new Vue() 之前被调用。

    局部api:

    mixins:选项接受一个混合对象的数组。局部混入,这些混合实例对象可以像正常的实例对象一样包含选项,他们将在 Vue.extend() 里最终选择使用相同的选项合并逻辑合并。(混入执行顺序:全局混入语句>局部混入语句>原本的语句)

    <div id="app">
            {{num}}
            <button @click="add">addNumber</button>
        </div>
        <script type="text/javascript">
            var mixin = {
                updated: function() {
                    console.log("局部混合updated");
                }
            };
            new Vue({
               el: "#app",
                data: {
                    num : 1
                },
                methods : {
                    add : function() {
                        this.num++;
                    }
                },
                updated : function(){
                  console.log('原生updated');
                },
                mixins: [mixin]
            });
    
        </script>
    
    展开全文
  • vue api封装

    2019-06-03 10:24:20
    https://www.cnblogs.com/JosephBee/p/7060778.html https://blog.csdn.net/qq_41115965/article/details/80780264
    展开全文
  • vue api接口管理

    2020-04-15 15:45:14
    api接口管理 1.在src目录下新建api目录,在该目录下新建axios.js文件,代码如下: import axios from 'axios' const config = { baseURL: 'http://base.com', //http请求baseurl timeout: 5 * 1000, // 请求超时...

    api接口管理

    1.在src目录下新建api目录,在该目录下新建axios.js文件,代码如下:

    import axios from 'axios'
    
    const config = {
        baseURL: 'http://base.com', //http请求baseurl
        timeout: 5 * 1000, // 请求超时时间设置
        crossDomain: true
        
      }
    // 创建请求实例
    const _axios = axios.create(config)
    /**
     * @param {string} url
     * @param {object} data
     * @param {object} params
     */
    export function post(url, data = {}, params = {}) {
        return _axios({
            method: 'post',
            url,
            data,
            params,
        })
    }
    
    /**
     * @param {string} url
     * @param {object} params
     */
    export function get(url, params = {}) {
        return _axios({
            method: 'get',
            url,
            params,
        })
    }
    
    /**
     * @param {string} url
     * @param {object} data
     * @param {object} params
     */
    export function put(url, data = {}, params = {}) {
        return _axios({
            method: 'put',
            url,
            params,
            data,
        })
    }
    
    /**
     * @param {string} url
     * @param {object} params
     */
    export function _delete(url, params = {}) {
        return _axios({
            method: 'delete',
            url,
            params,
        })
    }
    
    export default _axios
    
    

    2.在api目录下新建model文件,如test.js,代码如下:

    import  {  get } from './axios'
    
    class test {
        async getList() {
            const res = await get('api地址')
            return res
        }
    }
    export default new test()
    

    3.使用,代码如下:

    <template>
        <div></div>
    </template>
    
    <script>
        import testModel from '../api/test'
        export default {
            data() {
                return {
    
                }
            },
            methods: {
                async test() {
                    //方式一:
                    const res = await testModel.getList()
                    console.log(res)
                    //方式二:
                    await testModel.getList(res=>{
                        console.log(res)
                    })
                }
            },
            mounted() {
                this.test()
            }
        }
    </script>
    
    展开全文
  • vue api接口统一管理

    2020-02-29 15:41:49
    api 接口封装 首先创建utils文件夹,创建request.js,这个文件主要是做请求拦截或者响应请求。 import axios from 'axios' import { MessageBox, Message } from 'element-ui' import { getToken } from '@/utils/...
  • // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: { isshow: false }, methods: { myAnimate() { this.isshow = !this.isshow; } } });
  • 高德地图VueAPI(vue-amap)学习记录

    万次阅读 2017-06-03 17:48:59
    最近想测试一下地图插件,就先试了一下引用高德地图,鉴于我主要在学习Node.js和Vue.js,所以先找了一下高德地图的Vue插件,vue-amap,这个插件很不错的一点就是,有一个不错的文档。具体使用方法并不难。
  • vue api层封装 axios封装(大厂案例)

    万次阅读 2019-08-01 00:55:01
    有一定设计思想的同学,应该会有个意识,我们前端的api层与业务层应该是分离的。 否则业务层会特别混乱,我们要实现的目标是业务层只调用方法,返回接口数据。其余的都交给api层来做。那我们具体应该怎么设计呢? ...
  • vue api接口请求设置全局地址变量

    千次阅读 2019-10-31 14:22:56
    Global.vue <script> //const serverSrc='http://200.200.0.1:8001'; //如果是本地调试运行状态请用这个地址 const serverSrc = '..'; //如果是打包时请用这个 export default { serverSrc } </script...
  • Vue . prototype . $axios = Axios Axios . defaults . baseURL = '/api' Axios . defaults . headers . post [ 'Content-Type' ] = 'application/json' ; 2、配置api地址通用域名前缀 // Paths...
  • "../js/vue.js" > script > < script > const vm = new Vue({ el: "#app" , data:{ msg: "hello,vue" , text:` '#' >click< /a>`, url:"http:/ /www.atguigu.com/im ages/indexIcon/student/cover....
  • //API 坑 // this.arr[index] = obj; //this.arr=[]; this .arr.splice(index, 1 ,obj) } } }) script > 代码运行测试结果: 注意事项: 由于 JavaScript 的限制,Vue 不能检测以下变动...
  • vue全局API

    千次阅读 2019-07-23 08:12:02
    全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,在构造器外部用Vue提供给我们的API函数来定义新的功能。 二、Vue.directive自定义指令 Vue.directive('wzq',{ ...
  • vue 组件通过api调用 可组合 (vue-composable) Vue composition-api composable components. Vue composition-api可组合组件。 vue-composable is out-of-box ready to use composition-api generic components, ...
  • <p><em>[vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function.</strong></em> <p>I am using VueCompositionAPI as a Nuxt plugin. <pre><code> import Vue from "vue"; ...
  • Vue 常用API整理

    千次阅读 2020-12-19 16:38:22
    关于API这东西,前端各个框架都是不同的,且都经常更新,不用死记,所以本篇博客记录一下Vue中业务上常用的API(稍复杂些的API,简单的略) Vue中的数组操作 循环 <ul> // FAQ: key值一般不取index(数组...
  • Vue模拟api数据

    2020-07-07 11:18:02
    Vue模拟api数据 1.安装vue-resource : ①在项目文件夹下执行npm install vue-resource命令 ②在main.js文件中注册使用 import VueResource from 'vue-resource' Vue.use(VueResource) 2.在static文件夹下创建...
  • vue封装API接口

    2020-11-01 19:42:51
    浅谈一下如何在vue项目中封装API api的封装要用到axios模块。所以那我们在创建好vue脚手架后需要安装axios依赖包(指令:npm i axios --save)。 api的封装主要的目的就是:在帮助我们简化代码和后期的更新维护 在...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,421
精华内容 10,968
关键字:

vueapi

vue 订阅