2 Vue.js进阶

生命周期_钩子函数（重点）

生命周期函数：在某一时刻, 自动执行的函数。到什么时候做什么事，自动！！

生命：拟人化

v3.cn.vuejs.org/api/options…

在这里插入图片描述

// 与el data 平级
created() {
    console.log("this.$data: ", this.$data, "this.$el: ", this.$el);
},

beforeCreate, created,beforeMount, mounted

beforeCreate: 在实例生成之前会自动执行的函数

created: 在实例生成之后会自动执行的函数

beforeMount: 在组件内容被渲染到页面之前自动执行的函数

mounted: 在组件内容被渲染到页面之后自动执行的函数

此四个函数在页面加载结束后，会以此执行。

beforeUpdate,updated

beforeUpdate: 当数据发生变化时会立即自动执行的函数

updated: 当数据发生变化，页面重新渲染后，会自动执行的函数

在控制台使用vm.$data可以修改数据

beforeDestroy destroyed

beforeDestroy 组件销毁前要执行的方法

destroyed 销毁之后要执行的方法

keep-live

自定义属性

我们可以定义一个属性, 它既不在 data 里面, 也不再 methods 里面, 它和 data, methods 等等属性是同级的, 通过this.$options来访问

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title></title>
  </head>
  <body>
      <div id="app">
          {{ $options.msg }}
      </div>
      <script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
      <script type="text/javascript">
          let app = new Vue({
              el: '#app',
              data() {
                  return {
                      msg: '定义在msg'
                  }
              },
              msg:"定义在外部", // 自定义属性
              methods: {
                  showMsg() {
                      console.log(this.$options.msg);
                  }
              },
          })
      </script>
  </body>
</html>

自定义指令

假设我们有如下代码, 一个 input 框, 加载页面后自动聚焦, 我们可以这么写


<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8" />
      <title></title>
      <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
      <!-- 自定义指令
          v-on
          v-model
          v-bind
       -->
      <div id="app">
          <button type="button" @click="fun"></button>
          <input type="text" v-model="input" v-focus v-height />
      </div>
  <script type="text/javascript">
      let app = new Vue({
          el: '#app',
          data() {
              return {
                  msg: value
              }
          },
          directives: {
              focus: {
                  inserted(el) {
                      el.focus(); //实现被绑定该指令的文本框自动获得焦点
                  }
              },
             // 修改style
              height: {
                  inserted(el) {
                      el.style.height = '200px'
                  }
              }
          }
      })
  </script>


自定义指令-钩子函数

life: {
                        bind() { //常用
                            alert('指令第一次绑定到元素上时调用，只调用一次，可以执行初始化操作');
                        },
                        inserted() {
                            alert('指令所绑定的元素插入到DOM中时调用');
                        },
                        update() {
                            alert('被绑定元素所在模板更新时调用');
                        },
                        componentUpdated() {
                            alert('被绑定元素所在模板完成一次更新周期时调用');
                        },
                        // v-if
                        unbind() {
                            alert('指令与元素解绑时调用，只执行一次');
                        }
                    }

自定义指令-参数

 bind(el,binding){
     console.log('bind函数的参数el',el);    //el是当前指令所绑定的元素，DOM对象
     el.style.backgroundColor='red';    //对el进行操作
     console.log('bind函数的参数binding',binding);    //一个对象，包含很多property
     console.log('指令名(不带v-)',binding.name);        //指令名(不带v-)
     console.log('指令名(带有v-)',binding.rawName);    //指令名(带有v-)
     console.log('指令的绑定值',binding.value);                //指令的绑定值
     console.log('指令的绑定值字符串形式',binding.expression);    //绑定值的字符串形式
     console.log('指令的参数',binding.arg);                    //传给指令的参数
     console.log('指令的包含修饰符的对象',binding.modifiers);    //一个包含修饰符的对象
 }
v-change:top='100' 自定义指令的参数
bing name rawName 
value 指令的绑定值
arg 自定义的参数
expression

v-change="100" 传值, binding.value接收并使用

我们也可以把 top 的参数值写成 data

<div class="box" style="width: 100px; height: 100px; background-color: aqua;" v-change:top="400">
</div>
change:{
 bind(el,binding) { //常用
     el.style.width = binding.value + 'px';
     console.log(binding);
 },
}

接下来, 我们想要这样的效果v-pos:left="200"代表距离左边 200px, v-pos:top="400"代表距离顶部 400px, 那我们的自定义指令应该怎么写呢?


<div class="box" style=" position: absolute; width: 100px; height: 100px; background-color: aqua;" v-change:top="400" v-change:left="120">