自学Vue Two Day ! ! !__Vue.js__前端
发布于 3 年前 作者 banyungong 907 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

继续跟着昨天的总结往下走。内容有点多,如果感兴趣的话,建议先点赞关注后观看,以防后面找不到回家的路。

今天的学习重点是练习相关项目,只有通过做项目,才能将之前所学的知识融会贯通。

5.1、Vue通过控制类名来控制样式(重点!!!)

提前定义好一个类名的样式,然后通过Vue的动态添加或删除div里面的类名来控制这个标签的样式。

<style>
        .active{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .current{
            color: red;
        }
</style>
<body>
    <div id="app">
        <!-- :class 值可以是一个对象 键名是类名,值是布尔值  值为true是表示有这个类,为false就表示没有这个类 -->
        <div :class = "{active:bool1,current:bool2}">1</div>
        <!-- :class 值也可以是一个数组  数组中的元素就是这个标签拥有的类名,要加引号!!! -->
        <div :class = "['active','current']">2</div>
        <!-- :class 的是也可以是一个三元运算符。利用布尔值控制有没有这个类名 -->
        <div :class = "bool3?'active':''">3</div>
        <!-- :class 的值也可以是数组加三元运算符 -->
        <div :class = "[bool3?'active':'','current']">4</div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                bool1:true,
                bool2:true,
                bool3:true
            }
        })
    </script>
</body>

可以试着改一次Vue的data里面的布尔值来看一下具体效果。

5.2、Vue直接控制行内样式

直接控制行内样式的话,可以通过三元运算符来动态的控制某个样式。

<body>
    <div id="app">
        <!-- 格式 :styl="{内容,可以写多个样式,使用逗号隔开,采用小驼峰式写法}" -->
       <div :style="{fontSize:'40px',background:'pink'}">11</div>
       <!-- 也可以使用数组、三元运算符 -->
       <div :style="[{fontSize:'40px'},{color:bool1?'red':'green'}]">11</div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                bool1:false,
                bool2:true,
                bool3:true
            }
        })
    </script>
</body>

6.1、选项卡案例

我们来做一个小的案例巩固一下前面所学习的知识。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        #app{
            width: 150px;
            margin: 100px auto;
        }
        .top{
            width: 150px;
            text-align: center;
            display: flex;
        }
        .top span{
            width: 50px;
            border: 1px solid #000;
            display: block;
            text-align: center;
        }
        .top .active{
            color: red;
        }
        .botton span{
            border: 1px solid #000;
            display: none;
            width: 148px;
            height: 50px;
        }
        .botton .current{
            display: block;
        }
    </style>
</head>
<body>
</body>
    <div id="app">
        <div class="top">
            <span class=active>1</span>
            <span>2</span>
            <span>3</span>
        </div>
        <div class="botton">
            <span class=current>标题1对应的内容</span>
            <span>标题2对应的内容</span>
            <span>标题3对应的内容</span>
        </div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                
            },
        })
    </script>
</html>

我们先将页面与样式提前写出来,这样写出来是一个死的页面,没有做任何的点击效果,我们现在来加一些之前学到的知识。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        #app{
            width: 150px;
            margin: 100px auto;
        }
        .top{
            width: 150px;
            text-align: center;
            display: flex;
        }
        .top span{
            width: 50px;
            border: 1px solid #000;
            display: block;
            text-align: center;
        }
        .top .active{
            color: red;
        }
        .botton span{
            border: 1px solid #000;
            display: none;
            width: 148px;
            height: 50px;
        }
        .botton .current{
            display: block;
        }
    </style>
</head>
<body>
</body>
    <div id="app">
        <div class="top">
            <!-- 使用三元运算符来判断是否使用该类名     通过点击事件来动态修改num1的值 -->
            <span :class = "num1==1 ? 'active':''" @click="num1=1">1</span>
            <span :class = "num1==2 ? 'active':''" @click="num1=2">2</span>
            <span :class = "num1==3 ? 'active':''" @click="num1=3">3</span>
        </div>
        <div class="botton">
            <span :class = "num1==1 ? 'current':''">标题1对应的内容</span>
            <span :class = "num1==2 ? 'current':''">标题2对应的内容</span>
            <span :class = "num1==3 ? 'current':''">标题3对应的内容</span>
        </div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                num1:1
            },
        })
    </script>
</html>

先在data里面定义一个num1为1的值,默认我们展示第一个标题的内容。任何通过三元运算符来控制是否使用该类名,通过点击事件来动态修改num1的值。

6.2、以对象形式完成选项卡

通过控制num1的值是否等于后面的值,来获得一个布尔值,如果为true,那么这个类名将会被使用;如果为false,那么就不使用。以对象的形式来书写的话会显得页面更加整洁,可读性高。

<div id="app">
        <div class="top">
            <span :class = "{active:num1==1}" @click="num1=1">1</span>
            <span :class = "{active:num1==2}" @click="num1=2">2</span>
            <span :class = "{active:num1==3}" @click="num1=3">3</span>
        </div>
        <div class="botton">
            <span :class = "{current:num1==1}">标题1对应的内容</span>
            <span :class = "{current:num1==2}">标题2对应的内容</span>
            <span :class = "{current:num1==3}">标题3对应的内容</span>
        </div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                num1:1
            },
        })
    </script>

7、v-if和v-show指令(重点!!!)

v-if 和v-show都是来控制标签是否显示,但是也有区别,v-show是对样式层面的控制,v-if是对dom节点的控制。

<div id="app">
        <!-- v-if指令的作用: 控制标签是否展示,不展示则删除,如果为false,在页面的F12中是看不到这个标签-->
        <!--<div v-if="bool1">1111111</div>-->
    	<!-- display:none 只是在样式上进行不展示,在页面的F12中也还是可以看到这个标签 -->
        <!--<div style="display:none">2222222</div>-->

        <!--bool1的值为true 第一个盒子被保留,删除第二个盒子,
        为false的话,第2个盒子保留,删除第1个盒子-->
        <!--<div v-if="bool1">11111</div>-->
    	<!-- v-else要与v-if搭配并连接使用,两个标签中间不能加任何元素进行阻断 -->
        <!--<div v-else>222222</div>-->
		
    	<!-- v-else-if也是同样需要与v-if搭配使用,中间不能有别的元素 -->
        <!--<div v-if="type=='a'">11111</div>-->
        <!--<div v-else-if="type=='b'">2222</div>-->
        <!--<div v-else-if="type=='c'">3333</div>-->
        <!--<div v-else>4444</div>-->

        <!--不会删除标签,根据bool1是true还是false决定盒子是显示还是隐藏(在控制display属性的值)-->
        <div v-show="bool1">v-show的用法</div>


    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                bool1: false,
                type: "z"
            }
        })
    </script>

8、v-for循环指令(重点!!!)

<body>
    <div id="app">
        <ul>
            <!-- list是一个数组 ,item是数组中的每个元素,key是每个元素的索引值(下标) -->
            <li v-for="item,key in list">{{key}}、{{item}}</li>
        </ul>
        <ul>
            <!-- obj是一个对象,item是对象里面键值对的键,index是对应的键值对的值 -->
            <li v-for="item,index in obj"><a href="#">{{index}}:{{item}}</a></li>
        </ul>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                list:['html','css','javascript','node','Vue'],
                obj:{
                    name:'Jason',
                    age:21
                }
            }
        })
    </script>
</body>

9、表单数据绑定(双向数据绑定)(重点)

v-model的值是,vue接收表单元素的值的变量名, 即val的值就是用户填写的内容。

(甚至可以在data中设置v1的值,从而设置表单元素的默认值)

<div id="app">
        <!-- v-model 是配合表单元素使用 -->
        <!-- 将input输入框与p便签双向绑定,在页面中,在输入框里面输入什么,p标签就相对应的显示什么 -->
        <input type="text" v-model="val">
        <p>{{val}}</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                val:''
            }
        })
    </script>
v-model的实现原理:

​ 1、v-bind:绑定响应式数据;

​ 2、触发oninput 事件并传递数据;

<input v-model="sth" />
<!-- 等同于-->
<input :value="sth" @input="sth = $event.target.value" />
<!--自html5开始,input每次输入都会触发oninput事件,所以输入时input的内容会绑定到sth中,于是sth的值就被改变-->
<!--$event 指代当前触发的事件对象;-->
<!--$event.target 指代当前触发的事件对象的dom;-->
<!--$event.target.value 就是当前dom的value值;-->
<!--在@input方法中,value => sth;-->
<!--在:value中,sth => value;-->

10、聊天框案例

聊天框的模板:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style type="text/css">
        .talk_con{
            width:600px;
            height:500px;
            border:1px solid #666;
            margin:50px auto 0;
            background:#f9f9f9;
        }
        .talk_show{
            width:580px;
            height:420px;
            border:1px solid #666;
            background:#fff;
            margin:10px auto 0;
            overflow:auto;
        }
        .talk_input{
            width:580px;
            margin:10px auto 0;
        }
        .whotalk{
            width:80px;
            height:30px;
            float:left;
            outline:none;
        }
        .talk_word{
            width:420px;
            height:26px;
            padding:0px;
            float:left;
            margin-left:10px;
            outline:none;
            text-indent:10px;
        }        
        .talk_sub{
            width:56px;
            height:30px;
            float:left;
            margin-left:10px;
        }
        .atalk{
           margin:10px; 
        }
        .atalk span{
            display:inline-block;
            background:green;
            border-radius:10px;
            color:#fff;
            padding:5px 10px;
        }
        .btalk{
            margin:10px;
            text-align:right;
        }
        .btalk span{
            display:inline-block;
            background:blue;
            border-radius:10px;
            color:#fff;
            padding:5px 10px;
        }
    </style>
</head>
<body>
    <div class="talk_con">
        <div class="talk_show" id="words">
            <div class="atalk"><span>A说:吃饭了吗?</span></div>
            <div class="btalk"><span>B说:还没呢,你呢?</span></div>
        </div>
        <div class="talk_input">
            <select class="whotalk" id="who">
                <option value="0">A说:</option>
                <option value="1">B说:</option>
            </select>
            <input type="text" class="talk_word" id="talkwords">
            <input type="button" value="发送" class="talk_sub" id="talksub">
        </div>
    </div>
</body>
</html>

添加数据绑定:

<div class="talk_con">
        <div class="talk_show" id="words">
            <!-- 通过三元运算符判断 分类名,从而区分样式,添加v-for在下方script里面的data里面添加一个list数组,遍历数组里面的对象 -->
            <div :class="item.who=='A'?'atalk':'btalk'" v-for="item in list"><span>{{item.who}}说:{{item.words}}</span></div>
            <!-- <div class="atalk"><span>A说:吃饭了吗?</span></div>
            <div class="btalk"><span>B说:还没呢,你呢?</span></div> -->
        </div>
        <div class="talk_input">
            <!-- 增加v-model来获取他到底value值,并在data里面增加一个salVal的值 -->
            <select class="whotalk" id="who" v-model="selVal">
                <option value="0">A说:</option>
                <option value="1">B说:</option>
            </select>
            <!-- 增加v-model获取输入框输入的值,在data里面增加一个txtVal的值 -->
            <input type="text" class="talk_word" id="talkwords" v-model="txtVal">
            <!-- 增加一个点击事件,封装一个函数send并使用 -->
            <input type="button" value="发送" class="talk_sub" id="talksub" @click="send()">
        </div>
    </div>
    <script>
        new Vue({
            el:'.talk_con',
            data:{
                list:[{who:'A',words:'吃饭了吗?'},{who:'B',words:'吃了'}],
                txtVal:'',
                selVal:'0'
            },
            methods: {
                send:function(){
                    // .push是在list数组后面追加内容,who使用一个三元运算符,通过获取selVal的值来判断是谁来发送,通过						txtVal的值来获取用户输入的内容
                    this.list.push({who:this.selVal=='0'?"A":"B",words:this.txtVal});
                    // 做一个发送完毕后清空输入框的操作,增加用户体验
                    this.txtVal='';
                }
            }
        })
    </script>

这样就作出了一个具有交互的聊天对话框啦。可以将这个案例多敲两遍。

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: Jason_hsl 原文链接:https://juejin.im/post/6971008618326196238

回到顶部