vue 过滤器和自定义指令、组件

最新推荐文章于 2023-01-02 17:20:26 发布

杨小仙

最新推荐文章于 2023-01-02 17:20:26 发布

阅读量986

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_39451059/article/details/78840937

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.过滤器filter

作用：
用于一些常见的文本格式化，用在哪里就在哪里过滤
用处：双花括号插值 {{ message | capitalize }}
v-bind 表达式 <div v-bind:id="rawId | formatId"></div>
定义：
全局：

    Vue.filter('capitalize', function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    })

局部：

    filters: {
     capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
     }
  }

过滤器可以串联 {{ message | filterA | filterB }}
message经过A过滤后将结果传给B再次过滤
过滤器是Javascript函数,所以可以接收参数

{{ message | filterA('arg1', arg2) }}

filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数

2.自定义指令v-自定义

作用：可以自己定义一个想要的指令方法，实现某些功能
用法： <input v-focus>
定义：
全局：

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

局部：

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

钩子函数
指令定义对象提供的内部函数
bind : 只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）。
钩子函数的参数
el：指令所绑定的元素，可以用来直接操作 DOM
binging：一个对象包含（只读）
name 指令名（不带v-前缀）
value 指令的绑定值
vnode：（只读）
Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：（只读）
上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

3.计算属性#computed

计算属性缓存VSmathods方法
计算属性可以缓存,只要值不发生改变就不需要重新计算
mathodes方法是每次都需要重新计算的
所以,计算属性性能更高
用法：

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

4.跨域

jsonp
cors
vue-resource
vue与后台Api进行交互通常是利用vue-resource（其中的一种方法）来实现的，本质上vue-resource是通过http来完成Ajax请求响应的

5.定义组件

定义组件的方式有两种
1.先定义模板，再注册组件

var 模板名=Vue.extend（｛template： 定义的模板｝）
    Vue.component( '组件名',定义的模板名 )

2.在定义模板的同时注册组件

    Vue.component（’组件名’，｛template：定义的模板｝）

定义模板的方式有三种

template: "<p>222222222222</p> "

放在body的内部，作用域的外部，使用template标签，

    template:"#p3"
    <template id="p3">
        <div>
            <p>333333333</p>
        </div>
    </template>

放在 body的内部，作用域的外部，使用script标签

template:"#p4"
    <script type="x-template" id="p4">
        <div>
           <p>4444444444</p>
        </div>
    </script>

定义模板的时候，每一种方式都必须要有一个根节点
定义好的组件要使用，必须写在vue作用域中，否则不会解析显示
定义组件名的时候，使用驼峰命名

6.使用组件

1.子组件只能在父组件的模板作用域中使用
2.组件跟组件之间的作用域是相互独立的
3.组件跟组件之间所有的属性都是独立的，都是基于组件本身的作用域的
4.使用组件的标签名将驼峰拆分为-
5.构造 Vue 实例时传入的各种选项大多数都可以在组件里使用。只有一个例外：data必须是函数

7.组件之间相互传递值

父组件给子组件传值（props）
组件实例的作用域是孤立的，这意味着不能（也不应该）在子组件的模板内直接引用父组件的数据，父组件的数据需要通过props 才能下发到子组件中

    <head>
         <script src="../vue.js"></script>
    </head>
    <body>
          <div id="app">
            <child :msg="message"></child>
          </div>
      <script>
            Vue.component('child',{
              props:['msg'],
              template:'<h1>{{ msg }}</h1>'
            })
            new Vue({
              el:'#app',
              data:{
                message:'222'
               }
            })
      </script>
  </body>

杨小仙

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue 过滤器和自定义指令、组件

1.过滤器filter作用：用于一些常见的文本格式化，用在哪里就在哪里过滤用处：双花括号插值 {{ message | capitalize }} v-bind 表达式 <div v-bind:id="rawId | formatId"></div> 定义：全局： Vue.filter('capitalize', function (value) { if (
复制链接

扫一扫