VUE指令（二）

vue会根据不同的指令，针对不同的标签实现不同的功能。指令是带有 v- 前缀的特殊标签属性。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

        8、v-for：基于数据循环，多次渲染整个元素（数组、对象、数字等），v-for = "(item--每一项, index--下标) in 数组"   key = "唯一标识" ，若不需要下标，可使用 v-for = "item in 数组"，key是给列表添加的唯一标识，只能是唯一的字符串或数字，便于vue进行列表项的正确排序及复用；

<ul>
    <li v-for="(item, index) in list" :key="index">
        {{ item }} - {{ index }}
    </li>
</ul>

data: {
    list: ['西瓜', '苹果', '鸭梨', '榴莲']
}

        9、v-model：给表单元素使用， 实现双向数据绑定，可以快速获取或设置表单元素内容，v-model = '变量；

账户：<input type="text" v-model="username"> <br><br>
密码：<input type="password" v-model="password"> <br><br>
<button @click="login">登录</button>

data: {
    username: '',
    password: ''
},

methods: {
    login () {
        console.log(this.username, this.password)
    },
}

• .lazy- 监听 change 事件而不是 input
• .number- 将输入的合法字符串转为数字
• .trim- 移除输入内容两端空格

         10、v-slot：声明具名插槽或是期望接收 props 的作用域插槽；

         11、v-pre：跳过该元素及其所有子元素的编译；        

         12、v-once：仅渲染元素和组件一次，并跳过之后的更新；