vue基础知识（三）

一、vue过滤器

1、局部过滤器

 //局部过滤器
      filters: {
        timeFormater(value, str = 'YYYY年MM月DD日 HH:mm:ss') {
          return dayjs(value).format(str)
        },
        myslice(value) {
          return value.slice(0, 4)
        }
      }

2、全局过滤器

//全局过滤器
Vue.filters('myslice', function (value) {
      return value.slice(0, 4)
    })

二、vue指令

1.内置指令

1.v-text指令

向其所在的节点中渲染文本内容，会替换掉文本中的内容，插值表达式不会

<div id="app">
    <div>{{name}}</div>
    <div v-text="name"></div>
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        name: 'hhh'
      },
      methods: {
      }
    })
  </script>

2.v-html指令

渲染出html标签，v-html有一定的安全性问题

<div id="app">
    <div v-html="str"></div>
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        str: '<a href=javascript:alert(11)>hhhh</a>'
      },
      methods: {
      }
    })
  </script>

3.v-cloak指令

当网速过于慢时，页面不会展示出来{{xx}}的功能

<style>
  [v-clock]{
    display: none;
  }
</style>

4.v-once指令

初次动态渲染被视为静态内容

 <div id="app">
     <h2 v-once>初始化的n的值为：{{n}}</h2>
    <h2>当前的n的值为：{{n}}</h2>
    <button @click="n++">点击我n++</button>
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
       n:1
      },
      methods: {
      }
    })
  </script>

5.v-pre指令

跳过其所在节点的编译过程

<div id="app">
    <h2 v-pre>hello world</h2>
    <h2>当前的x的值为：{{x}}</h2>
    <button @click="x++">点击我x++</button>
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
       x:1
      },
      methods: {
      }
    })
  </script>

2.自定义指令

1.函数式

指令与元素成功绑定时

<div id="app">
    <h2>当前y值是：<span v-text="y"></span></h2>
    <h2>放大后10倍的y值为：<span v-big="y"></span></h2>
    <button @click="y++">点击我放大倍速</button>
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        y: 3
      },
      directives: {
        big(element, binding) {
          element.innerText = binding.value * 10
        }
      }
    })
  </script>

2.对象式

<div id="app">
    <h2>当前y值是：<span v-text="y"></span></h2>
    <h2>放大后10倍的y值为：<span v-big="y"></span></h2>
    <button @click="y++">点击我放大倍速</button>
    <hr>
    <input type="text" v-fbind:value="y">
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        y: 3
      },
      directives: {
        big(element, binding) {
          element.innerText = binding.value * 10
        },
        fbind: {
          //指令与函数成功绑定时（一上来）
          bind(element, binding) {
            element.value = binding.value
          },
          //指令所在元素被插入页面时
          inserted(element, binding) {
            element.focus()
          },
          //指令所在的模板被重新解析时
          update(element, binding) {
            element.value = binding.value
            element.focus()
          }
        }
      }
    })
  </script>

如果在指令中出现-，则加上引号作为字符串；指令中出现的this的指向为window，指令都属于局部指令

全局为

Vue.directive('fbind',{
      //指令与函数成功绑定时（一上来）
      bind(element, binding) {
            element.value = binding.value
          },
          //指令所在元素被插入页面时
          inserted(element, binding) {
            element.focus()
          },
          //指令所在的模板被重新解析时
          update(element, binding) {
            element.value = binding.value
            element.focus()
          }
    })

三、Vue生命周期

beforeCreate:无法通过vm访问到data中的数据，methods中的方法

created：可以通过vm访问到data中的数据，methods中的方法

beforeMount：未经Vue编译的dom结构，所有dom操作不奏效

mounted：经过Vue编译的dom结构，dom操作都奏效，一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作

beforeUpdate：数据是新的，但页面是旧的，数据与页面不同步

updated：数据是新的，页面也是新的，数据与页面同步

beforeDestroy：vm中的所有data、methods指令等，都处于可用状态，马上要执行销毁过程，一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾操作

destroyed：彻底销毁