vue入门——其他

表单输入绑定

  前边已经讲了 v-bind 用于绑定 HTML 属性的值，v-on 用于绑定事件；Vue 针对表单元素，提供了 v-model 的语法糖，在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。之前也已经见过了：

<input v-model="message">

  v-model 和 :vlaue 有什么区别呢？

  :value 也可以绑定表单元素的值，但是如果我们通过表单元素，比如输入框，修改了对应的值，Vue 将不能监听到，因此不能实现表单的双向绑定；v-model 只是一个语法糖，本质上相当于，对表单元素增加了一个监听器，监听其 value 值的变化。

<input v-bind:value="something" v-on:input="something=$event.target.value">

• .lazy

  v-model 默认监听输入框 input 事件，即输入就会同步；可以添加 .lazy 修改符，修改为监听 change 事件

  <!-- 在“change”时而非“input”时更新 -->
  <input v-model.lazy="msg" >
  

• .number 自动转换为数字类型

• .trim 自动过滤首尾空白字符

过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)

过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理

<div id="app">
    <h2>过滤器的使用-添加前缀</h2>
    <p>{{352.11 | toRMB}}</p>
    <p>{{657 | toRMB}}</p>
    <p>{{657.22 | toFixed }}</p>
</div>
<script>
    // 全局过滤器
    Vue.filter('toRMB', value => {
        return '￥'+value
    })
    // vm  实例
    const vm = new Vue({
        el : '#app', // element
        data : { // model

        },
        // 局部过滤器
        filters: {
          toFixed(money) {
              return money.toFixed(1)
          }
        },
        methods: {

        }
    })
</script>

另外，过滤器还能够接受其他的参数，不过管道符 | 前边的元素会被作为第一个参数提交。

自定义指令

  前边介绍了 Vue 的常用指令：v-bind, v-on, v-if, v-show, v-for 等，除了这些默认的指令之外，Vue 允许我们自定义指令，基本语法：

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

  上边的 inserted 是 Vue 指令的钩子函数，表示绑定的元素插入到 DOM 中才起作用，还有其他的钩子函数，请参考官方文档。

  例子，定义一个绑定的值转换为大写的指令：

<div id="app">
    <p v-upper-text="message"></p>
</div>
<script>
    Vue.directive('upper-text', {
        bind: function (el, binding) {
            el.innerHTML = binding.value.toUpperCase()
        }
    })
    // vm  实例
    const vm = new Vue({
        el : '#app', // element
        data : { // model
            message: 'hello world'
        },
        methods: {

        }
    })
</script>