vue api

最新推荐文章于 2024-11-08 11:33:07 发布

派大星1

最新推荐文章于 2024-11-08 11:33:07 发布

阅读量1.1k

点赞数

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>

···