Vue指令2

v-for指令的四种使用方式：

<div id="app">
     // 1. 循环数组
     // <p v-for="item in list">{{item}}</p>
     // 也可以用遍历索引值的方式来写
     // <p v-for="{item,i} in list">{{item}}</p>
    
    //2. 循环对象数组
    // <p v-for="user in list">{{user.id}}----{{user.name}}</p>
    
    // 3.循环遍历对象
    // 在遍历对象身上的键值对的时候  除了有val key ,在第三个位置还有一个索引
    <p v-for="(val,key,i) in user">值是：{{val }}----键是：{{key}}---索引：{{i}}</p>
    
    // 4.迭代数字
    // in后面我们放过 普通数组，对象数组，对象，还可以放数字
    // 注意： 如果使用 v-for 迭代数字的话，前面的count值从1开始
    <p v-for="count in 10">
        这是第 * 次循环
    </p>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            // 1.普通数组
         //  list:[1,2,3,4,5,6]  
           // 2. 对象数组、
            //  list:{
            //     {id:1,name:'zs1'},
            //     {id:2,name:'zs2'},
            //    {id:3,name:'zs3'},
            //     {id:4,name:'zs4'},
            // }
            user:{
                id:1,
                name:'托尼',
                gender:'男'
            }
        },
        mothods:{
            
        }
    })
</script>

v-for指令的使用和注意事项

注意： v-for循环的时候，key属性只能使用 number获取string

​ key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值

​ 在组件中，使用v-for循环的时候，或者在一些特殊的情况中，如果v-for有问题，

​ 必须在使用v-for的同时，指定唯一的字符串/数字 类型 ：key 值

<div id="app">
    <div>
        <lable>Name:
            <input type="text" v-model="name">
        </lable>
        
        <input type="button" value="添加" @click="add">
    </div>   
    // v-for循环的时候，key属性只能使用number获取string 
    // 注意 ： key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值 
    // key可以保证插入数据的唯一性
    <p v-for="item in list" :key="item.id">
         <input type="checkbox">{{item.id}} --- {{item.name}}
    </p>
</div>

var vm = new Vue({
    el:'#app',
    data:{
        id:'',
        name:'',
        list[
                 {id:1,name:'嬴政'},
                 {id:2,name:'李斯'},
                 {id:3,name:'曹操'},
                 {id:4,name:'刘备'},
                 {id:5,name:'孙权'},
                 {id:6,name:'刘邦'},
        ]
    },
    methods:{
         add(){
              //this.list.push({id:this.id,name:this.name})
              this.list.unshift({id:this.id,name:this.name})
         }   
    }
                 
})

vue的自定义指令：

注意：Vue中所有的指令，在调用的时候都要加 -v

// 使用  Vue.directive()定义曲剧的指令   v-focus
//  其中：参数1 ：指令的名称，注意，在定义的时候，指令的名称前面，不需要加  v- 前缀，
//  但是： 在调用的时候，必须在指令名称前  加上v-前缀来进行调用
//  参数2：是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行特定的逻辑
Var .directive('focus',{
    bind:function(el){  //每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
     // 注意： 在这个函数中，第一个参数，永远是el，表示被绑定了指令的那个元素，这个el参数，是一个原生的JS对象
        //在元素刚绑定了指令的时候，还没有插入到DOM中去，这时候，调用focus方法没有作用
        //因为一个元素，只有插入DOM之后，才能获取焦点
        el.focus()
    },
    inserted:function(){  // inserted表示元素，插入到DOM中的时候，会执行inserted函数【触发一次】
        el.focus()
        //和JS行为有关的操作最好在inserted中去执行，防止JS行为不生效
        
    },
    updated:function(){  // 当vNode更新的时候，会执行updated，可能会触发多次
        
    }
})

// 总结： 通过Vue.directive可以定义一个全局的指令，第一个参数是指令名称，定义的时候不带前缀v-,  调用的时候需要加上前缀-v  例如：v-focus
// 第二个参数是一个对象  三个比较主要的方法，bind, inserted,updated 他们的第一个参数是被绑定的DOM元素 ，他们的不同之处在于执行的时期不同，bind在当指令绑定到元素上的时候，就会立即执行
// inserted 是在插入到DOM执行之后才会执行
// updated是 只有当dom节点在更新之后才会执行

Vue.directive('color',{
    bind:function(el，bindding){
        // 通过banding参数获取自定义属性的值
        //样式只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联样式，将来元素坑定会显示到页面中去，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素
        el.style.color = 'red'
        //和样式相关的操作，一般都可以在bind中执行
        el.style.color =binding.value
    }
})