文档章节

四、vue语法补充

o
 osc_vg6s3gcq
发布于 2018/07/17 16:47
字数 722
阅读 0
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

1.自定义过滤器

  格式:

{{ msg | filters}}

2.computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <!--过滤器-->
    <h1>{{ msg | capitalize }}</h1>

    <!--computed的getter和setter-->
    {{site}}
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {//数据项
            msg: "hello",
            name: "百度",
            url: "https://www.baidu.com/"
        },
        filters: {//对输入的字符串第一个字母转为大写
            capitalize: function (value) {
                if (!value) return ''
                value = value.toString()
                return value.charAt(0).toUpperCase() + value.slice(1)
            }
        },
        computed: {//computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter :
            site: {
                // getter
                get: function () {
                    return this.name + ' ' + this.url
                },
                // setter
                set: function (newValue) {
                    var names = newValue.split(' ')
                    this.name = names[0]
                    this.url = names[names.length - 1]
                }
            }
        }
    });
    // 调用 setter, vm.name 和 vm.url 也会被对应更新
    vm.site = '菜鸟教程 http://www.runoob.com';
    document.write('name: ' + vm.name);
    document.write('<br>');
    document.write('url: ' + vm.url);
</script>

</body>
</html>

3.Vue.js 事件处理器

http://www.runoob.com/vue2/vue-events.html

事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation()。

Vue.js通过由点(.)表示的指令后缀来调用修饰符。

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

4.Vue.js 表单

http://www.runoob.com/vue2/vue-forms.html

修饰符

.lazy

在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步:

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

.number

如果想自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值:

<input v-model.number="age" type="number">

这通常很有用,因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。

.trim

如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入:

<input v-model.trim="msg">

5.组件补充

1.插槽

详情:插槽

和 HTML 元素一样,我们经常需要向一个组件传递内容,像这样:

<alert-box>
  Something bad happened.
</alert-box>

Vue 自定义的 <slot> 元素,让Something bad happened.正常显示

Vue.component('alert-box', {
  template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `
})

2.解析 DOM 模板时的注意事项

有些 HTML 元素,诸如 <ul><ol><table> 和 <select>,对于哪些元素可以出现在其内部是有严格限制的。而有些元素,诸如 <li><tr> 和 <option>,只能出现在其它某些特定的元素内部。

使用is特性

<table>
  <blog-post-row></blog-post-row>
</table>
<table>
  <tr is="blog-post-row"></tr>
</table>

需要注意的是如果我们从以下来源使用模板的话,这条限制是不存在的:

    
  
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
基于 Web 的 IDE--ICEcoder

ICEcoder 是一个开源的基于 Web 的 IDE ,使用 PHP 构建。支持文件拖放编辑、语法着色、缺失标签补足、HTML 结构显示。提供强大的 JavaScript API 可轻松进行交互,支持多种编程语言,包括:...

匿名
2013/06/06
1.2W
2
Android传感器API之:磁场Magnetic Field源码与示例

Android的磁场传感器,Magnetic Field。。读取磁场的变化,通过该传感器可开发出指南针、罗盘等磁场应用。该传感器读取的数据是空间坐标系三个方向的磁场值,其数据单位为uT,即微特斯拉。 ...

DSALK
2011/11/30
2.8K
2
价值100W的经验分享: 基于JSPatch的iOS应用线上Bug的即时修复方案,附源码.

限于iOS AppStore的审核机制,一些新的功能的添加或者bug的修复,想做些节日专属的活动等,几乎都是不太可能的.从已有的经验来看,也是有了一些比较常用的解决方案.本文先是会简单说明对比大部分...

ios122
2015/12/07
2K
1
AppleWatch开发入门四——Table视图的应用

AppleWatch开发入门四——Table视图的应用 一、Watch上的Table WatchOS中的TableView和iOS中的TableView还是有很大的区别,在开发之前,首先我们应该明白WatchOS中的Table有哪些局限性和特点...

珲少
2015/10/15
1.4K
1
C++11 lambda 表达式

C++11 lambda表达式 在C++ 03标准中,并没有lambda这个概念,对于C++来说,boost库提供了lambda的接口。在C++11中,引进了lambda表达式,这也可能是面向对象语言中,比较晚引进这个概念的语...

刘大神
2015/05/25
745
2

没有更多内容

加载失败,请刷新页面

加载更多

算法与数据结构体系课

算法与数据结构体系课【超清原画】 下载地址:百度云盘 从0到工作5年,面试、进大厂、搭建知识体系、拓展技术上限 你不再需要其它算法与数据结构课程了 为什么学算法已经是一个不应该问的问题...

1930133570
今天
21
0
如何停止跟踪并忽略对Git中文件的更改? - How to stop tracking and ignore changes to a file in Git?

问题: I have cloned a project that includes some .csproj files. 我已经克隆了一个包含一些.csproj文件的项目。 I don't need/like my local csproj files being tracked by Git (or bei......

富含淀粉
今天
25
0
Redis阻塞

可能存在问题 内在原因:API或数据结构使用不合理、CPU饱和、持久化阻塞等 外在原因:CPU竞争、内存交换、网络问题等 问题处理: API或数据结构使用不合理,可能存在慢查询或者大对象: 发现...

游泳鸟
今天
17
0
OSChina 周五乱弹 —— 来人,上幼儿园老师跳舞的图!

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 小小编辑:《奇跡の海》- 坂本真綾 《奇跡の海》- 坂本真綾 手机党少年们想听歌,请使劲儿戳(这里) 巴蜀(@巴拉迪维)最近有点闹心了, @巴...

小小编辑
今天
64
1
IO plan命令备忘

本文为基于ICCII的IO plan的备忘录 创建bump array 使用命令create_bump_array IO ring + corner cell 其实,直接用create cell然后手工挪过去也不费事,反正也就一次。后面通过读def的方式读...

白山头
今天
25
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部