Vue的computed，directive，mount，refs，nexttick

computed

模板内虽然也可以进行计算，但函数用多了看起来就会很麻烦，所以我们使用computed属性
computed具有缓存属性，计算属性必须是一个函数

<div id="app">
    {{msg}}
    <div v-for="i in new Array(10)"> {{msg2}}</div>
         <input type="button" value="btn" @click="btn()">
         <div v-for="i in new Array(10)">{{btn()}}</div>
</div>
     <script>
          new Vue({
              el:'#app',
              data:{
                msg:"hello"
              }  ,
              computed:{
                  //这是利用计算属性进行输出
                  msg2:function () {
                      console.log("computed")  //只会输出一次
                      return this.msg+'world'
                  }
              }  ,
              methods:{
                  //这是利用vue在模板中的逻辑进行输出
                  btn(){
                      console.log('function')    //输出10次
                       return this.msg+"btn"
                  }
              }


          })
     </script>

Directive

（自定义指令）
下面是利用这个指令来完成一个用鼠标拖拽小方块的实例

  <div id="app" >
         <div class="class" v-mystyle></div>
     </div>
     <script>
         Vue.directive('mystyle',function (el) {
              el.onmousedown = function (e) {
             
                  let disX=e.clientX-el.offsetLeft
                  let disY=e.clientY-el.offsetTop
                  console.log(disY)
                  console.log(disX)

                  el.onmousemove=function (e) {
                        let left =e.clientX - disX
                        let right =e.clientY - disY

                      el.style.left=left+'px'
                      el.style.top=right+'px'

                  }
                  el.onmouseup=function (e) {
                      document.onmousemove = "" ;
                      el.onmouseup="";

                  }

              }

         })
          new Vue({
              el:'#app',
              data:{

              }
          })
     </script>

mount

挂载DOM

 <div id="app">
            {{msg}}
         <input type="button" value="btn" onclick="btn()">
     </div>
     <script>
     let vm =   new Vue({
             
              data:{
                  msg:'hello'
              }
          })
         function btn() {
                vm.$mount("#app")
         }
     </script>

refs

可以对某个元素进行绑定

     <div id="app">
         <p v-html="msg"></p>
         <div ref="div1">div1</div>
         <div></div>
     </div>
     <script>
     let vm =   new Vue({
              el:'#app',
              data:{
             
              }  ,
           
          })
     let mydiv1=vm.$refs.div1
     mydiv1.style.color='red'
         console.log(vm.$refs.div1)
     </script>

nexttick

利用这个方法可以在msg还没有进行数据更改的时候，进行抢先一步的更改，如下，使用了nexttick方法以后，就可以和原生js的输出结果一样了

     <div id="app">
         <div ref="div1" id="div1"> {{msg}}</div>
         <input type="button" value="btn" @click="btn()">
     </div>
     <script>
     let vm =   new Vue({
               el:"#app",
              data:{
                  msg:'hello'
              }          ,
         methods:{
                   btn(){
                       this.msg='nkbh'
                       console.log(this.$refs.div1)
                       console.log(this.$refs.div1.innerText)   //输出hello而不是nkbh
                       console.log(document.getElementById('div1').innerText)    //输出hello
                        //一个方法
                       this.$nextTick(function () {
                           console.log(this.$refs.div1)
                           console.log(this.$refs.div1.innerText)   //输出nkbh
                           console.log(document.getElementById('div1').innerText)    //输出nkbh

                       })


                   }
         }
          })

     </script>