• vue


    每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如,实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ,然后在数据变化时更新 DOM 。在这个过程中,实例也会调用一些 生命周期钩子 ,这就给我们提供了执行自定义逻辑的机会。例如,created 这个钩子在实例被创建之后被调用:

    var app2 = new Vue({
    el:"#app2",
    data:{
    a:1
    },
    created:function(){
    console.log('a is:'+this.a);
    console.log(this)
    }
    })

    其中的this就是指创建的app2实例

    实例生命周期的不同阶段调用,如 mountedupdated, and destroyed 。钩子的 this 指向调用它的 Vue 实例

    vue指令:

    v-once,一次性的进行插值,但是当数据改变时,插值处就不会再进行更新了,在v-once后不需要写其他的

    v-html ,通过大括号绑定的数据会默认为纯文本,不是HTML,如果想要输出html,就需要使用这个指令,那些被绑定的数据都会默认为html,数据绑定反而会被忽视

    在数据绑定中,vue.js提供了完全的js支持:

    {{ number + 1 }}
     
    {{ ok ? 'YES' : 'NO' }}
     
    {{ message.split('').reverse().join('') }}
     
    <div v-bind:id="'list-' + id"></div>注:仅限表达式,而且是单个表达式
    在一些指令中,可以接受一些参数,但是需要在指令后面进行:注明   eg:<a v-bind:href="url"></a>
     
    过滤器:
    <div v-bind:id="rawId | formatId"></div>
     
    在vue2.0中,过滤器就已经只能在 mustache 绑定和 v-bind 表达式(从 2.1.0 开始支持)中使用,因为过滤器设计目的就是用于文本转换
    过滤函数总是接收表达式的值作为第一个参数
    而且多个过滤器可串联,
    过滤器是个函数,所以可以接受参数{{ message | filterA('arg1', arg2) }}
    使用过滤器的时候传进的参数分别作为第二,第三个参数传入,因为表达式的值已经作为第一个参数传入了
     
    class和style绑定的不同就是,在style绑定的是一个js对象,对data中的数据进行绑定
     
    条件渲染

    2.1.0 新增

    v-else-if,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用

    <div v-if="type === 'A'">
    A
    </div>
    <div v-else-if="type === 'B'">
    B
    </div>
    <div v-else-if="type === 'C'">
    C
    </div>
    <div v-else>
    Not A/B/C
    </div>

    如果需要频繁切换使用 v-show 较好,如果在运行时条件不大可能改变则使用 v-if 较好。

    事件的修饰符

    <!-- 阻止单击事件冒泡 -->
    <a v-on:click.stop="doThis"></a>
     
    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>
     
    <!-- 修饰符可以串联 -->
    <a v-on:click.stop.prevent="doThat"></a>
     
    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>
     
    <!-- 添加事件侦听器时使用事件捕获模式 -->
    <div v-on:click.capture="doThis">...</div>
     
    <!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
    <div v-on:click.self="doThat">...</div>
  • 相关阅读:
    lamp----6 实现虚拟主机ssl安全
    lamp-----5 apache虚拟主机实现,发布多个独立站点
    lamp----4 虚拟目录
    lamp----3 访问控制
    Apache配置反向代理、负载均衡和集群(mod_proxy方式)
    lamp-------3 userdir发布用户站点
    lamp------2 发布站点
    [转]KDE/QT与GNOME/GTK比较
    为什么会有文字聊天
    [转]gdb结合coredump定位崩溃进程
  • 原文地址:https://www.cnblogs.com/0828-li/p/6747308.html
Copyright © 2020-2023  润新知