四、vue语法补充

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>

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

字符串 (例如：template: '...')
单文件组件 (.vue)
<script type="text/x-template">