语法

Vue模板语法、事件和表单使用

Vue模板语法使用、渲染、Vue交互、双向绑定、事件和表单使用

2018-07-03侠课岛    初级拔高       

前端/前端必修/Vue快速入门 32     0     4726

模板语法

    文本
        {{ message }}

    HTML(慎用!防止XSS攻击)
        v-html="message"

    绑定: v-bind:
        v-bind:id  =>  :id
        v-bind:disabled  =>  :disabled
        v-bind:href  =>  :href
        v-on:click  => @click

    JS表达式(计算、拼接、只能是单个表达式)
        {{ number + 1 }}

计算属性(缓存机制)

    computed() {
        json: {
            get: function() {
                return this.json;
            },
            set: function(newVal) {
                this.key1 = newVal;
            }
        }
    }

条件渲染

    v-if
    v-else-if
    v-else

    if else if else

    v-if会复用元素(不想复用需要添加key)

    v-show

事件处理

    v-on:click  @click

    v-on:click.stop
    v-on:submit.prevent
    v-on:click.stop.prevent(串联)
    v-on:submit.prevent

    v-on:keyup
    v-on:keyup.enter
              .tab
              .delete
              .esc
              .space
              .up
              .down
              .left
              .right

双向数据绑定(表单处理)

    v-model
           value
           checked
           selected
    输入框
    复选框
    单选框
    下拉框

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

32

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?