01、Vue笔记-02

！毛不易

已于 2023-10-16 10:28:20 修改

阅读量46

点赞数

文章标签： vue.js 笔记前端

于 2023-09-27 02:38:49 首次发布

本文链接：https://blog.csdn.net/qq_28400607/article/details/133330115

版权

第二课：Vue中的指令、事件和生命周期

01、Vue中常见的指令

参考网站：https://v2.cn.vuejs.org/v2/api/

文本指令：
- v-html
- v-text
条件指令
- v-if
- v-else-if
- v-else
循环指令
- v-for
隐藏显示指令
- v-show
事件指令
- v-on
表单指令
- v-model
属性指令
- v-bind
插槽指令(组件的时候在来讲解)
- v-slot
杂项
- v-clocak
- v-once
- v-pre

对指令的认识？

1：插值表达式是不可能完成所有的事情 {{}}，它仅仅值是负责把响应式数据(data)取出来渲染到视图上去，可以做一些四则运算或者三目运算。
2：其实vue是通过js语言封装出来一个js组件库，他的核心思想：去dom化，去dom必须也使用不同的方式来达到和js一样功能
- 比如：如何绑定事件
- 比如：如何添加属性，如何获取属性，如何删除删除
- 比如：如何添加样式（style/id/class）
- 比如：如何获取表单的值
- 比如：如何添加子元素
- 等等。。。。。。
3：所以我们在vue中提供了一些列的指令来完成上面的工作和事情。

指令和插值表达式能混用吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用指令的学习和掌握</title>
</head>
<body>


    <div id="app">
        <h1>{{title}}</h1>
        <div v-html="title"></div>
    </div>

    <script src="js/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                title:"<strong>我是一个Vue</strong>"
            }
        })
    </script>
    
</body>
</html>

答案告诉：在指令中，是绝对不可能去使用插值表达式。

{{title}}
<span v-html="{{title}}"></span>这个错误的

指令和插值表达式和什么关？

和响应式数据有关。

不抡是指令和插值表达式，永远都在围绕这响应式数据进行处理，要么就是响应式数据取出来，要么就改变响应式数据。

01、文本指令

v-text : 不支持解析标签，支持：运算和取值
v-html: 支持解析标签，支持：运算和取值

```html

常用指令的学习和掌握

<div id="app">
    <h1>{{bbs.title}}</h1>
    <div>{{bbs.content}}</div>
    性别是：{{bbs.male==1?"男":"女"}}
    性别是：<span v-text='bbs.male==1?"男":"女"'></span>
    <div v-html="bbs.content"></div>
</div>

<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
           bbs:{
                id:1324194891442282498,
                title:"Spring Bean生命周期",
                male:1,
                content:"<p>网上把前后<strong>端分离版的</strong>若依拉下来跑</p><p><br></p>"
           }
        }
    })
</script>

```

文本指令是获取data的响应式数据，渲染到视图的文本节点上。说明未来你只要在data定义的响应式数据，想放到视图中，就可以通过此指令或者插值表达式，也就说：指令上不能够写一个在响应式数据data中不存在的属性，否则就报错。

Property or method “age” is not defined

这个错误就是告诉，在指令中你定义的某个属性或者方法找不到，vue的底层会在data中先查找以一次，如果找不到就去methods中找一次看又没有定义这个对应的方法，如果定义了也会返回这个定义这个函数的引用，如果你要执行，请加括号即可：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用指令的学习和掌握</title>
</head>
<body>


    <div id="app">
        {{age()}}
    </div>

    <script src="js/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            methods: {
                age(){
                    return 100
                }
            },
        })
    </script>
    
</body>
</html>

02、条件指令

v-if
v-else-if
v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用指令的学习和掌握</title>
</head>
<body>


    <div id="app">
        <p>id是:{{user.id}}</p>
        <p>名字是:{{user.username}}</p>
        
        <fieldset>
        <p>性别是:{{user.male==1?"男":"女"}}</p>
        <hr>
        <p>性别是：
            <span v-if="user.male==1">男</span>
            <span v-if="user.male==0">女</span>
        </p>
        <hr>
        <p>性别是：
            <span v-if="user.male==1">男</span>
            <span v-else>女</span>
        </p>
        </fieldset>

        <fieldset>
            <p>性别是:{{user.male==1?"男":(user.male==1?"女":"保密")}}</p>
            <p>性别是：
                <span v-if="user.male==1">男</span>
                <span v-if="user.male==0">女</span>
                <span v-if="user.male==2">保密</span>
            </p>
            <hr>
            <p>性别是：
                <span v-if="user.male==1">男</span>
                <span v-else-if="user.male==0">女</span>
                <span v-else>保密</span>
            </p>
        </fieldset>
        
    </div>

    <script src="js/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                user:{
                    id:1,
                    male:0,/*1男 0女 2保密*/
                    username:"飞哥"
                }
            }
        })
    </script>
    
</body>
</html>

条件指令：其实在开发中，响应式数据中可能存在一些数据的逻辑判断和处理的。所以如果你想要对响应式数据的中一些数据进行判断和改造就使用条件指令，比如上面的性别是数字，但是展示是：文字，你就可以使用：条件指令。
条件指令，如果是使用v-if/v-else-if/v-else连续使用，不允许插入元素，否则就出现断层，可以插入文本，插入文本会自动删除。
如果未来一段代码不先想要，也不想在源码中体现出来。确实你可以使用v-if=“false”

v-if 控制的元素，只有true才会显示在源码中，为false自动删除。

03、循环指令

v-for : 循环数组，循环对象
- 下表
- 元素
- key

04、隐藏显示指令

v-show 是控制css样式的display:none/block的切换。
没有v-hidden指令。只能通过v-show=“true/false”来达到隐藏和显示

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用指令的学习和掌握</title>
    <style>
        .commentbox{margin: 20px;}
        .comment-item{box-shadow: 0 0 1em #ccc;margin-bottom: 20px;padding:10px}
        .comment-item.odd{background:#000;color:#fff}
        .comment-item.even{background:red;color:#fff}
    </style>
</head>

<body>


    <div id="app">
        <div class="commentbox">
            <div v-show="false">隐藏起来了</div>
            <div v-show="true">显示了</div>
        </div>
    </div>

    <script src="js/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                
            },
            methods:{

               
            }
        })
    </script>

</body>

</html>

v-if和v-show

v-if 满足条件节点在源码中显示，不满足不显示
v-show: 都会显示，只不过false的情况，是隐藏起来起来。
v-show是绝对不可能去替代v-if。 v-show做不到v-if/v-else的功能

表单指令

v-model
给响应式数据赋值的指令。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用指令的学习和掌握</title>
    <style>
        .commentbox{margin: 20px;}
        .comment-item{box-shadow: 0 0 1em #ccc;margin-bottom: 20px;padding:10px}
        .comment-item.odd{background:#000;color:#fff}
        .comment-item.even{background:red;color:#fff}
    </style>
</head>

<body>


    <div id="app">
        <form action="">
            {{form}}
            <p>账号: <input type="text" v-model="form.username"></p>
            <p>密码: <input type="password" v-model="form.password"></p>
            <p>手机: <input type="text" v-model="form.phone"></p>
            <p>邮箱: <input type="text" v-model="form.email"></p>
            <p>性别: 
                <input type="radio" v-model="form.male" name="male" value="0">女 
                <input type="radio" v-model="form.male" name="male" value="1">男
            </p>
            <p>兴趣爱好: 
                <input type="checkbox" v-model="form.hobbys" name="hobbys" value="1">旅游 
                <input type="checkbox" v-model="form.hobbys" name="hobbys" value="2">看书
                <input type="checkbox" v-model="form.hobbys" name="hobbys" value="3">打游戏
            </p>
            <p><button @click.prevent="handleLogin">登录</button></p>
        </form>
    </div>

    <script src="js/vue.js"></script>
    <script>
        var app = new Vue({//现任
            el: "#app",
            data: {

                queryParams:{
                    pageNo:1,
                    pageSize:10,
                    total:0
                },

                form:{}
            },
            methods:{
                handleLogin(){
                    var username = this.username;
                    var password = this.password;

                    // 重置
                    this.reset();
                },
                reset(){
                    this.form = {
                        username:"",
                        password:"",
                        phone:"",
                        email:"",
                        male:1,
                        hobbys:[]
                    };
                }
            }
        })
    </script>

</body>

</html>