Vue的指令

<div id="app">
    <input type="text" v-bind:placeholder="tips">
</div>
<script src="./lib/vue-2.6.12-js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data:{
            tips:'请输入用户名'
        }
    })
</script>

v-bind: 被简写为 :

在vue提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持Javascript 表达式的运算

2.3 事件绑定指令

v-on

vue提供了v-on事件绑定指令，用来辅助程序员为DOM元素绑定事件监听。语法格式如下:

<div id="app">
    <p>count 的值是：{{ count }}</p>
    <button v-on:click="add(1)">+1</button>
    <button v-on:click="sub">-1</button>
</div>
<script src="./lib/vue-2.6.12-js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data:{
            count: 0
        },
        methods:{
            add(n) {
                this.count += n
            },
            sub {
                this.count -= 1
            }   
        }
    })
</script>

v-on: 被简写为 @

注意∶原生DOM对象有onclick、oninput、 onkeyup等原生事件，替换为vue的事件绑定形式后，分别为：v-on:click、 v-on:input、v-on:keyup，简化后：@click、@input、@keyup

事件修饰符

在事件处理函数中调用event.preventDefault()或 event.stopPropagation()是非常常见的需求。因此，vue提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。常用的5个事件修饰符如下：

事件修饰符	说明
.prevent	阻止默认行为（例如：阻止a链接的跳转、阻止表单的提交等)
.stop	阻止事件冒泡
.capture	以捕获模式触发当前的事件处理函数
.once	绑定的事件只触发1次
.self	只有在event.target是当前元素自身时触发事件处理函数

按键修饰符

@keyup.键名="函数名"

在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符，例如:

<div id="app">
    <!-- 设置 用户按下 esc键 触发清除输入框的操作 -->
    <input @keyup.esc="clearInput">
    <!-- 设置 用户按下 enter键 触发submit方法 -->
    <input @keyup.enter="submit">
</div>
<script src="./lib/vue-2.6.12-js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data:{
            count: 0
        },
        methods:{
            clearInput(e){
                console.log('触发了cleanInput方法')
                e.target.value = ''
            },
            submit(){
                console.log('触发了submit方法')
            }
        }
    })
</script>

2.4 双向绑定指令

v-model

vue提供了v-model双向数据绑定指令，用来辅助开发者在不操作DOM的前提下，快速获取表单的数据。

<div id="app">
    <!-- data里变量username的内容被渲染到p标签中 -->
    <p>您的名字：{{ username }}</p>
    <!-- 设置 v-model="usename"后，用户只要操纵文本框，就会被v-model感知到，v-model会把文本框中最新的内容更新到data数据源里，data数据源里的内容又会被渲染到页面中，实现了双向绑定的效果 -->
    <input type="text" v-model="usename">
    <!-- select也可以使用v-model -->
    <select v-model="city">
        <option value="">请选择城市</option>
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">广州</option>
    </select>
</div>
<script src="./lib/vue-2.6.12-js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data:{
            usename: 'zhangsan',
            city: ''
        }
    })
</script>

注：v-model指令只能用在表单元素中，例如：input输入框、textarea、select等。

v-model指令的修饰符

为了方便对用户输入的内容进行处理，vue 为v-model指令提供了3个修饰符，分别是：

修饰符	作用	示例
.number	自动将用户的输入值转为数值类型	<input v-model.number="age" />
.trim	自动过滤用户输入的首尾空白字符	<input v-model.trim="msg" />
.lazy	在“change”时而非“input”时更新	<input v-model.lazy="msg" />

2.5条件渲染指令

v-if、v-show

条件渲染指令用来辅助开发者按需控制DOM的显示与隐藏。条件渲染指令有如下两个，分别是：v-if、v-show

原理区别：

v-if：动态创建或移除元素，实现元素的显示与隐藏
v-show：动态为元素添加和移除 display: none 样式，实现元素的显示与隐藏

性能区别：

如果要频繁的显示和隐藏，v-show的性能更好，因为动态创建和移除元素浏览器会出现重绘等机制，所以会消耗更多的性能。
如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时v-if性能更好。

注：在实际开发中，大多数情况不用考虑性能问题，直接使用v-if。

`v-else`

v-if可以单独使用，或配合v-else指令一起使用。

注意：v-else指令必须配合v-if指令一起使用，否则它将不会被识别！

`v-else-if`

v-else-if指令，顾名思义，充当v-if的“else-if 块”，可以连续使用。

注意: v-else-if指令必须配合v-if指令一起使用，否则它将不会被识别！

<div v-if="type === 'A'">优秀</div>
<div v-else-if="type === 'B'">良好</div>
<div v-else-if="type === 'C'">一般</div>
<div v-else>差</div>

2.6 列表渲染指令

v-for

vue 提供了v-for列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使用item in items形式的特殊语法，其中：

items是待循环的数组
item是被循环的每一项

v-for指令还支持一个可选的第二个参数，即当前项的索引。语法格式为(item, index) in items，示例代码如下：

<script>
    data: {
        list: [ // 列表数据
            { id: 1, name: 'zs' },
            { id: 2, name: 'ls'}
        ]
    }
</script>
// -----------分割线------------
<table>
    <thead>
		<th>索引</th>
        <th>Id</th>
        <th>姓名</th>
    </thead>
    <tbody>
        <!--  :title="item.name + index" 说明tr自身也可以访问到item和index属性 -->
        <tr v-for="(item, index)
        in list" :title="item.name + index">
            <td>{{ index }}</td>
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
         </tr>
    </tbody>
</table>

注意：v-for指令中的 item项和index索引都是形参，可以根据需要进行重命名。例如 (role, i) in rolelist

key

key的注意事项：

key的值只能是字符串或数字类型
key的值必须具有唯一性（即：key的值不能重复），否则报错
建议把数据项id属性的值作为key的值（因为id属性的值具有唯一性)
使用index的值当作key的值没有任何意义（因为index的值不具有唯一性)
建议使用v-for指令时一定要指定key的值（既提升性能、又防止列表状态紊乱)

<script>
    data: {
        list: [ // 列表数据
            { id: 1, name: 'zs' },
            { id: 2, name: 'ls' }
        ]
    }
</script>
// -----------分割线------------
<table>
    <thead>
        <th>索引</th>
        <th>Id</th>
        <th>姓名</th>
    </thead>
    <tbody>
        <tr v-for="(item, index)
        in list" :key="list.id">
            <td>{{ index }}</td>
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
         </tr>
    </tbody>
</table>