Vue-常用系统指令v-bind、v-on、v-model、v-for和 key 属性的使用

Myth丶恋晨 2021-12-01 15:04 308阅读 0赞

##### v-bind #####

*  该指令可以给 HTML 元素或者组件动态地绑定一个或多个特性，比如：style、class。
    
        
        <input type="button" name="" v-bind:value="myType" v-bind:title="msg">
 *  `v-bind` 指令可简写为 `:` ，绑定的属性中可以写合法的 `JS` 代码。
    
        <input type="button" name="" :value="myType + 'v-bind'" :title="msg">
 *  绑定 `style`
    
        <p :style="styleA">单个行内样式</p>
        <p :style="{ fontSize: size + 'px'}">对象：可让指令与普通样式属性共存</p>
        <p :style="[styleA, styleB]">数组：绑定一个 行内样式 列表</p>
 *  绑定 `class`
    
        <p :class="classA">单个</p>
        <p :class="[classA, classB]">数组：类选择器列表</p>
        <p :class="{red: flagA}">对象：可判定是否使用选择器（貌似不能使用 data 中的）</p>
        <p :class="[{B: flagA}, classA, flagA? 'white' : '']">对象数组：可判定是否使用非 data 中的选择器（需要加引号）</p>
    
    `css:`
    
        .A { 
            border: 2px solid blue;
        }
        .B { 
            background: yellow;
        }
        .red { 
            background: red;
        }
        .white { 
            color: white;
        }
    
    `JS:`
    
        let vm = new Vue({ 
            el: "#app",
            data: { 
                myType: 'button',
                msg: 'class style',
                flagA: true,
                flagB: false,
                classA: 'A',
                classB: 'B',
                size: '30',
                styleA: { color: 'pink'},
                styleB: { textDecoration: 'line-through'}
            }
        })

##### v-on #####

*  用于绑定事件监听，用在普通的 HTML 元素上时，只能监听 原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
 *  `v-on` 指令可简写为 `@` 。
    
        <input type="button" :value="msg" @click="show">
 *  调用函数时，如果没有传参，可省略 “()” ，直接使用函数名。
    
        <input type="button" :value="msg" v-on:click="show">
    
    `JS:`
    
        new Vue({ 
            el: '#app',
            data: { 
                msg: 'button'
            },
            methods: { 
                show(arg) { 
                    alert('v-on:click')
                    console.log(arg)
                }
            }
        })
 *  常用事件：
    
    > v-on:click // 点击事件  
    > v-on:keydown // 按键按下事件  
    > v-on:keyup // 按键抬起事件  
    > v-on:mousedown // 鼠标按下时的事件  
    > v-on:mouseover // 鼠标进入事件  
    > v-on:submit // 表单提交  
    > …

##### v-model #####

*  该指令可以在表单控件或者组件上实现数据的双向绑定。
    
     *  `input`、`select`、`textarea`、`components`（Vue中的组件）。。。
    
        <input type="text" name="" v-model="msg">

##### v-for #####

*  该指令可用于遍历 数组、对象、数字
 *  未来，数据中的某一项的值发生了改变，则 `v-for` 只会更新当前项对应的这个 DOM 元素的值，而不是更新整个数据，从而提高效率。
    
     *  遍历普通数组
        
            <ul>
                
                <li v-for='item in list' v-text='item' v-cloak></li>
            </ul>
     *  遍历数组中的值和索引
        
            <ul>
                
                <li v-for='(item, i) in list' v-cloak>{
                   { item }}, {
                   { i }}</li>
            </ul>
     *  遍历对象数组
        
            
            <ul>
                
                <li v-for="(user, i) in users" v-cloak>{
                   {user.id}},{
                   {user.name}},{
                   {i}}</li>
            </ul>
     *  遍历对象中的键值对
        
            <ul>
                
                <li v-for="(value, key, i) in obj" v-cloak>{
                   { value }},{
                   { key }},{
                   { i }}</li>
            </ul>
     *  迭代数字
        
            <ul>
                
                <li v-for="count in 15" v-cloak>{
                   { count }}</li>
            </ul>
        
        `CSS:`
        
            [v-cloak] { 
                display: none;
            }
        
        `JS:`
        
            new Vue({ 
               el: '#app',
               data: { 
                   list: [1,3,5,7,9,11],
                   users: [
                       {  id: 1, name:  '苏小小'},
                       {  id: 2, name:  '苏妲己'},
                       {  id: 3, name:  '苏凌香'},
                       {  id: 4, name:  '苏宛儿'}
                   ],
                   obj: { 
                       name: '小青',
                       age: 18,
                       gender: '女',
                     hobby: '古筝、琴'
                   }
             },
               methods: { 
            
               }
            })
 *  `key`
    
     *  key 属性具有唯一性，不能重复（key 值必须具有唯一性），它能够标识数组的每一项，在使用 for 循环时最好加上 key 属性，不管用不用得到。
     *  当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “**就地复用**” 策略。如果数据项的顺序被改变，Vue将**不是移动 DOM 元素来匹配数据项的顺序**， 而是**简单复用此处每个元素**，并且确保它在特定索引下显示已被渲染过的每个元素。
     *  为了给 Vue 一个提示，**以便它能跟踪每个节点的身份，从而重用和重新排序现有元素**，需要为每项提供一个唯一 key 属性。
        
            
            <label for="id">ID:</label>
            <input type="text" id="id" v-model="uid">
            
            <label for="name">name:</label>
            <input type="text" id="name" v-model="uname">
            
            <input type="button" name="" @click="add" :value="msg">
            
            <p v-for="item in users" v-bind:key="item.id" v-cloak>
                <input type="checkbox" name="" v-cloak>{
                   { item.id }}, {
                   { item.name }}
            </p>
        
        `CSS:`
        
            [v-cloak] { 
                display: none;
            }
        
        `JS:`
        
            new Vue({ 
                el: '#app',
                data: { 
                    uid: '',
                    uname: '',
                    msg: '添加',
                    users: [
                        {  id: 1, name:  '苏小小'},
                        {  id: 2, name:  '苏妲己'},
                        {  id: 3, name:  '苏凌香'},
                        {  id: 4, name:  '苏宛儿'}
                    ]
                },
                methods: { 
                    add() { 
                        let name = this.uname
                        let id = this.uid
                        let newUser = { id, name}
                        // 添加成员
                        this.users.unshift(newUser)
                        
                        // 添加完成后，将文本框的值置空
                        this.uname = ''
                        this.uid = ''
                    }
                }
            })
    
    **注：**
    
    以下变动不会触发视图更新
    
     *  通过**索引**给数组设置新值
     *  通过 `length` 改变数组