zoukankan      html  css  js  c++  java
  • vue

    内部指令:

    v-pre:跳过vue编译,直接输出原始值,<div v-pre>{{message}}</div>

    v-cloak:在vue渲染完指定的整个DOM后才进行显示,必须和css样式一起使用

    [v-cloak]{display:none} <div v-cloak>{{message}}</div>

    v-once:在第一次DOM时进行渲染,渲染完成后视为静态内容,跳出以后的渲染过程

    全局API

    1、Vue.directive 自定义指令

    Vue.directive(‘mr_gu’,function(el,binding,vnode){el.style=‘color’+binding.value})

    el:指令所绑定的元素,可以用来直接操作DOM

    binding:一个对象,包含指令的很多信息

    vnode:Vue编译生成的虚拟节点

    自定义指令有五个生命周期(也叫钩子函数),分别是bind,inserted,update,componentUpdated,unbind

     

    2、Vue.extend返回一个扩展实例构造器,也就是预设了部分选项的Vue实例构造器,通常服务于Vue.component用来生产组件实例,并挂载道自定义元素上

    3、Vue.set的作用就是在构造器外部操作构造器内部的数据属性或者方法。

    function(){Vue.set(outData,’count’,4)}   或者 app.count++或者 outData.count++等都可以实现改变构造器内部数据

    由于Javascript的限制,Vue不能自动检测以下变动的数组。

    *当你利用索引直接设置一个项时,vue不会为我们自动更新。

    *当你修改数组的长度时,vue不会为我们自动更新。

     

    4、Vue.component全局组件就是在构造器外部使用此方法来注册的组件

    components:{‘gu’:{template:`<p>XXXX</p>`}}局部组件只能在组件注册的作用域里进行使用其他作用域无效

     

    Vue构造器内的选项

    1、propsData Option  用于数据传递

    2、computed Option  对原数据进行改造后输出

    3、methods  Option  

     

     

    实例的方法:

    1、$mount() 用来挂载我们创建的扩展的,同时也生成一个实例

    let Mr_gu=Vue.extend({

    template:`<p>{{msg}}</p>`,

    data:function(){

    return{msg:’hello’}

    }

    })

    var vm=new Mr_gu().$mount(‘#app’)

     

    2、$destroy() 用来销毁实例 需在实例外原生调用 onclick=‘destroy()’  function destroy(){vm.$destroy()}

     

    3、$forceUpdate()更新方法 vm.$forceUpdate()

     

    4、$nextTick() 数据修改方法当Vue构造器里的data值被修改后会调用这个方法,相当于钩子函数updated

     

    实例的事件:

    1、$on在构造器外部添加事件

    app.$on(‘reduce’,function(){

    console.log(‘执行了reduce()’)

    this.num++

    })

    $on接收2个参数,第一个参数是事件的名称,第二个是一个匿名方法。如果按钮在作用域外部,可以利用$emit来执行。

    2、$off关闭事件

    function off(){

    app.$off(‘reduce’)

    }

  • 相关阅读:
    关于平衡树的一些总结
    bzoj3065 带插入区间K小值
    bzoj2560 串珠子
    bzoj3224 Tyvj 1728 普通平衡树
    bzoj1031 [JSOI2007]字符加密Cipher
    bzoj4571 [Scoi2016]美味
    集合框架—常见的Set集合
    集合框架—两种迭代机制
    集合框架—基础
    网络编程—代码—UDP数据报传输
  • 原文地址:https://www.cnblogs.com/gutianer/p/9469115.html
Copyright © 2011-2022 走看看