Vue学习笔记（三）

【书接上文】Vue学习笔记（一）
【书接上文】Vue学习笔记（二）

目录

• Vue的监听器
  • 简单类型的监听
  • 深度监听
• $set和set
• vue-resource
• Vue的自定义指令
• $nextTick

Vue的监听器

监听器 watch 会监听data中数据的变化 ，当data中的数据变化时，执行对应的逻辑。

监听的数据名在这里作为函数名，函数拥有两个参数，一个newVal（新值），一个oldVal（旧值）。

异步操作和无事件操作（比如输入框输入时搜索）时较多使用监听，能使用计算属性的时候尽量使用计算属性。

简单类型的监听

<div id="app">
      姓:<input type="text" v-model="firstN">
      名:<input type="text" v-model="lastN">
      <h1>全名:{{ fullName }}</h1>
</div>
 <script>
     var vm = new Vue({
         el:"#app",
         data:{
             firstN:"",
             lastN:"",
             fullName:""
         },
         watch: {
             firstN(newVal,oldVal) {
                 console.log(newVal,oldVal);
                 this.fullName = newVal + this.lastN;
             },
               //异步操作实例
             lastN(newVal,oldVal) {
                 setTimeout(()=>{
                    this.fullName = this.firstN + newVal;
                 },1000)   
             }
         }
     })
</script>

深度监听

监听复杂数据类型时,不能使用普通的数据类型的监听方式，需要使用深度监听。

<div id="root">
      <input type="text" v-model="user.name">
</div>

<script>
     var vm = new Vue({
        el:"#root",
        data:{
           user:{name:"xxx",age:19}
        },
        watch: {
           user:{
              handler(newVal){
                 console.log(newVal);
              },
              //当前值立刻监听
              immediate:true,
              //开启深度监听
              deep:true
           }
        },
     })
</script>

$set和set

作用：向data中的list等添加属性（如：list:{name:zzz,age:18}，向list中添加sex属性）

$set是在newVue里写的，set是全局的。

vue-resource

vue-resourse它依赖于vue 必须在引入vue之后引入

<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

<div id="root"></div>
<script>
    new Vue({
        el:"#root",
        data:{},
        mounted() {
            this.$http.get("http://www.liulongbin.top:3005/api/getprodlist").then(function (res) {  
                console.log(res.body.message);//返回是数组
            })
        },
    })
</script>

Vue的自定义指令

创建格式：Vue.directive(指令名称,指令相关的配置函数)
focus:指令名称 名称可以自己定义 见名知意 使用时加前缀v-

放个例子感受一下：

<div id="root">
   <input type="text" v-foucs>
   <!-- 这里是个字符串 -->
   <p v-color="'green'">xxxxxxxx</p>
   <!-- 这里是data里面的值 -->
   <p v-color="red">xxxxxxxx</p>
</div>
<script>
    //这里就是自定义指令
    Vue.directive("foucs", {
        bind: function (el) {
        console.log("bind");
        console.log(el);
        //dom操作不可用
            el.focus();
        },
        //inserted：被绑定元素插入父节点时调用    
        inserted: function (el) {
            console.log("inserted");

            //此处el表示原生dom对象 可进行原生js操作
            // console.log(el);
            // el.focus();
        },
        update: function (el) {
            console.log("update");
        },
    })
  
    Vue.directive("color",{
        inserted(el,binding){
            console.log(binding);
            el.style.color = binding.value;
        }
    })
   
    new Vue({
        el:"#root",
        data:{
            red:"red"
        }
    })
</script>

$nextTick

当页面上某些数据更新时，执行某些代码

<div id="root">
    <p v-text="str" id="thep"></p>
        
    <button @click="btnClick">更新数据</button>
</div>

<script>
    new Vue({
        el: "#root",
        data: {
            str: "孙俪"
        },
        methods: {
            btnClick() {
                //data中的数据更新 不会马上更新页面 更新页面是异步的
                //需求:DOM更新之后 想做某些事情
                //当页面上的数据更新时,执行某些代码
                var op = document.getElementById("thep");
                console.log(op.innerHTML);//孙俪

                //当页面上数据更新时 执行某些代码
                this.$nextTick(function () {  
                    console.log(op.innerHTML);
                })
            }
        },
    })
</script>