Vue学习之指令篇（二）

何为Vue指令？

带有【v-】这一前缀的特殊【属性】，不同属性【对应】不同的功能

常用Vue指令

1.v-for

作用：多次渲染整个元素，可以是数组，对象，数字.....

语法

v-for="(item,index) in 数组"

注意：item是每一项，index是下标

案例

<div id="app">
    <table>
        <tr v-for="(item,index) in list" :key="index">
            <td>{{ item.name }}</td>
            <td>{{ item.age }}</td>
        </tr>
    </table>
</div>

<script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
    createApp({
        data(){
            return{
                list:[
                    {id: 1,name: 'jack',age: 20},
                    {id: 2,name: 'mack',age: 24},
                    {id: 3,name: 'ariel',age: 25},
                    {id: 4,name: 'joker',age: 12},
                    {id: 5,name: 'rose',age: 29}
                ]
            }
        }
    }).mount("#app")
</script>

效果展示

2.v-bind

用途：【动态】为html中的标签属性绑定属性值，如src，href，title...

语法

完整写法：
	v-bind:属性名="表达式"
简写：✔
	:属性名="表达式"

案例

<div id="app">
    <a :href="url1">哔哩哔哩</a>
</div>

<script type="module">
    import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
        data(){
            return{
                url1: 'https://www.bilibili.com'
            }
        }
    }).mount("#app")
</script>

效果展示

3.v-show

语法：v-show = "表达式"      表达式值 true表示显示，false表示隐藏

作用：控制元素显示隐藏

底层原理

切换 css 的 display: none 来控制显示隐藏

应用场景：频繁进行切换显示隐藏的地方

案例

<div id="app">
    <div v-show="msg">v-show盒子</div>
</div>

<script type="module">
    import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
        data(){
            return{
                msg: true
            }
        }
    }).mount("#app")
</script>

结果展示

<div id="app">
    <div v-show="msg">v-show盒子</div>
</div>

<script type="module">
    import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
        data(){
            return{
                msg: false
            }
        }
    }).mount("#app")
</script>

结果展示

4.v-if

语法：v-if = "表达式"      表达式值 true表示存在，false表示不存在

作用：控制元素存在与否

底层原理

根据 判断条件 控制元素的 创建(存在) 和 移除(不存在) 元素节点

应用场景：不频繁进行切换的场景，即：要么存在，要么不存在

案例

<div id="app">
    <div v-if="msg">v-if盒子</div>
</div>

<script type="module">
    import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
        data(){
            return{
                msg: true
            }
        }
    }).mount("#app")
</script>

结果展示

<div id="app">
    <div v-if="msg">v-if盒子</div>
</div>

<script type="module">
    import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
        data(){
            return{
                msg: false
            }
        }
    }).mount("#app")
</script>

5.v-if也经常与v-else-if和v-else进行配合使用

案例

<div id="app">
    <div v-if="msg >= 90">优秀</div>
    <div v-else-if="msg >= 70">良好</div>
    <div v-else-if="msg >= 60">及格</div>
    <div v-else>不及格</div>
</div>

<script type="module">
    import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
        data(){
            return{
                msg: 71
            }
        }
    }).mount("#app")
</script>

结果展示

6.v-on

用途：事件绑定

语法

完整写法：
	1.v-on:事件名="内联语法"
	2.v-on:事件名="methods中的函数名"
简写：✔
	1.@事件名="内联语法"
	2.@事件名="methods中的函数名"

说明

1.事件名：
	点击：click
	鼠标经过：mouseenter
	获得焦点：focus
	...

2.this：指的是当前案例

案例

<div id="app">
    <button @click="money">我有钱</button>
    <br>
    <button @click="friends">我想与你交朋友</button>
</div>

<script type="module">
    import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
        data(){
            return{
            }
        },
        methods: {
            money: function(){
                alert("我有钱")
            },
            friends: function(){
                alert("我想与你交朋友")
            }
        }
    }).mount("#app")
</script>

结果展示

7.v-model

语法：v-model="变量"

作用：可以让数据和视图进行双向数据绑定

何为双向数据绑定？
（1）数据改变，视图自动更新
（2）视图改变，数据自动更新

目的：可以快速【获取】和【设置】表单元素的内容

案例

<div id="app">
    <input type="text" placeholder="姓名" v-model="list.name"><span>{{list.name}}</span>
    <br>
    <input type="text" placeholder="年龄" v-model="list.age"><span>{{list.age}}</span>
</div>

<script type="module">
    import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
        data(){
            return{
                list: {name: '', age:''}
                
            }
        }
    }).mount("#app")
</script>

效果展示