vue学习（常用指令）

业界资讯 2025-04-12 22:50
0 阅读

前言

本篇博客，学会使用vue 的常用指令

使用软件：vscode

正文

v-for

了解 v-for

作用：列表渲染，遍历容器的元素或对象的属性

语法：v-for ="（item,index) in item"

参数说明：

  • items 为遍历的数组
  • item   为遍历出来的元素
  • index  索引、下标 从0开始

注意 ：如果是从 0开始 可以省略index ,可以表示为：v-for ="item in item"

demo(案例）

目的：遍历articleList 数组，写道表格中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <table border="1 solid" colspa="0" cellspacing="0">
            <tr>
                <th>文章标题</th>
                <th>分类</th>
                <th>发表时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr v-for="article in articleList">
                <!-- <tr v-for="(article,index) in articleList"> -->
                <td>{
   
   {article.title}}</td>
                <td>{
   
   {article.category}}</td>
                <td>{
   
   {article.time}}</td>
                <td>{
   
   {article.state}}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
        </table>
    </div>

    <script type="module">
        //导入vue模块
        import { createApp } from
            'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //创建应用实例
        createApp({
            data() {
                return {
                    //数据
                    articleList: [
                        {
                            title: "医疗反腐绝非砍医护收入",
                            category: "时事",
                            time: "2023-09-5",
                            state: "已发布"
                        },
                        {
                            title: "中国男篮缘何一败涂地？",
                            category: "篮球",
                            time: "2023-09-5",
                            state: "草稿"
                        },
                        {
                            title: "华山景区已受大风影响阵风达7-8级，未来24小时将持续",
                            category: "旅游",
                            time: "2023-09-5",
                            state: "已发布"
                        }
                    ]
                }
            }
        }).mount("#app")//控制页面元素
    </script>
</body>

</html>

注意：遍历的数组必须在data中定义，要想那个标签循环使用多次，就放在按一个标签上使用 v-for指定

浏览器运行截图

v-bind

了解 v-bind 

作用：动态为html 标签绑定属性值，如设置 href,src style样式等

语法：v-bind : 属性名=“属性值”

简化： ：属性名=“属性值”

注意 v-bind 所绑定的数据，必须在打他中定义，否则无效

demo(案例）

目的：通过使用v-bind 指定 超链接 <a> 标签 href 属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- <a  v-bind:href="url">黑马官网</a> -->
        <a  :href="url">黑马官网</a>
    </div>

    <script type="module">
        //引入vue模块
        import { createApp} from 
                'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //创建vue应用实例
        createApp({
            data() {
                return {
                    url:'https://www.itheima.com'
                }
            }
        }).mount("#app")//控制html元素
    </script>
</body>
</html>

浏览器运行截图

v-if / v-show

了解 v-if / v-show

作用：这两类指令，都是用来控制元素的显示与隐藏的

使用背景：在现实生活中，我们使用软件购买商品，但会发现明明是同一款商品，但呈现在我们面前的价格，却不相同。原因：大体是软件会根据买家的消费金额进行等级划分，会看到不同价格的同一个商品。
v-if
语法:v-if="表达式"，表达式值为true，显示;false，隐藏
其它:可以配合v-else-if/v-else进行链式调用条件判断
原理：基于条件判断，来控制创建或移除元素节点（条件渲染）
场景：要么显示，要么不显示，不频繁切换的场景

v-show
语法：V-show="表达式"，表达式值为true，显示;false，隐藏
原理：基于CSS样式display来控制显示与隐藏
场景：频繁切换显示隐藏的场景

demo(案例）

目的：使用v-if / v-show 模拟不同消费等级的用户，可以看到不同的价格

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">

        手链价格为:  
        <span v-if ="customer.level >=0 && customer.level <=1" >9.9</span>  
        <span v-else-if = "customer.level >= 2 &&customer.level <=3" >19.9</span>
         <span v-else >29.9</span>
        <br>
        手链价格为:  
        <span v-show ="customer.level >=0 && customer.level <=1" >9.9</span>  
        <span v-show = "customer.level >= 2 &&customer.level <=3" >19.9</span>
         <span v-show="customer.level >= 4" >29.9</span>
        <br>
    </div>

    <script type="module">
        //导入vue模块
        import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        //创建vue应用实例
        createApp({
            data() {
                return {
                    //定义数据 customer对象
                    customer: {
                        name: '张三',
                        level: 0
                    }
                }
            }
        }).mount("#app")//控制html元素
    </script>
</body>

</html>

浏览器运行截图

细节：

通过浏览器检查，看到源代码

使用v-if 指令，发现 不符合条件的span 标签统统不见了

使用 v-show指令，发现即使不符合条件，span 标签依然存在，但style 样式处理为 display:none 隐藏该元素

总结

1. v-if 与 v-show的区别?
v-if是根据条件判断是创建还是移除元素节点（条件渲染）。
小结
●V-show是根据css样式display来控制元素的显示与隐藏。
2. v-if 与 v-show的适用场景?
v-if适用于显示与隐藏切换不频繁的场景。
V-show适用于显示与隐藏切换频繁的场景。

v-on

了解 v-on

作用：为html标签绑定事件
语法:
v-on:事件名="函数名"
简写为
@事件名="函数名'

demo(案例）

目的：使用v-on 指令模拟 点击事件，当点击时，出现对应弹框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button v-on:click="money">点我有惊喜</button>
        <button @click="love">再点更惊喜</button>
    </div>

    <script type="module">
        //导入vue模块
        import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        //创建vue应用实例
        createApp({
            data() {
                return {
                    //定义数据
                }
            },
            methods: {
                money:function(){
                    alert("恭喜你获得10000元");
                    },
                    love : function(){
                        alert("恭喜你获得一份爱情");
                    }
            }
        }).mount("#app");//控制html元素

    </script>
</body>
</html>

浏览器运行截图

v-model

了解 v-model

作用：在表单元素使用，双向数据绑定。可以方便的获取或设置表单项数据

demo(案例）

目的:视图【使用了v-model指令的输入框】和提供数据之间的，体现双向数据绑定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">

        文章分类: <input type="text" v-model="searchConditions.category" /><span>{
   
   {searchConditions.category}}</span>

        发布状态: <input type="text" v-model="searchConditions.state" /><span>{
   
   {searchConditions.state}}</span>

        <button>搜索</button>
        <button v-on:click="clear">重置</button>

        <br />
        <br />
        <table border="1 solid" colspa="0" cellspacing="0">
            <tr>
                <th>文章标题</th>
                <th>分类</th>
                <th>发表时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr v-for="(article in articleList" :key="article.id">
                <td>{
   
   {article.title}}</td>
                <td>{
   
   {article.category}}</td>
                <td>{
   
   {article.time}}</td>
                <td>{
   
   {article.state}}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
        </table>
    </div>
    <script type="module">
        //导入vue模块
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //创建vue应用实例
        createApp({
            data() {

                return {
                    searchConditions: {
                        category: "",
                        state: ""
                    },
                    //定义数据
                    articleList: [{
                        title: "医疗反腐绝非砍医护收入",
                        category: "时事",
                        time: "2023-09-5",
                        state: "已发布"
                    },
                    {
                        title: "中国男篮缘何一败涂地？",
                        category: "篮球",
                        time: "2023-09-5",
                        state: "草稿"
                    },
                    {
                        title: "华山景区已受大风影响阵风达7-8级，未来24小时将持续",
                        category: "旅游",
                        time: "2023-09-5",
                        state: "已发布"
                    }]
                }
            }
                    ,
                    methods:{
                        clear:function(){
                            //清空搜索条件
                            this.searchConditions.category="";
                            this.searchConditions.state="";
                        }
                    }
        }).mount("#app")//控制html元素
    </script>
</body>

</html>

浏览器运行截图

通过修改视图【使用了v-model指令的输入框】，影响提供的数据

通过重置按钮，将提供的数据清空，来影响视图【使用了v-model指令的输入框】

猜你喜欢

目录

热门文章