自学Vue Two Day ! ! !

最新推荐文章于 2022-05-17 21:54:38 发布

Jason_HeSL

最新推荐文章于 2022-05-17 21:54:38 发布

阅读量113

点赞数 1

分类专栏：小白自学Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_49105225/article/details/117672209

版权

小白自学Vue 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

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

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

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_HeSL

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
自学Vue Two Day ! ! !

继续跟着昨天的总结往下走。内容有点多，如果感兴趣的话，建议先点赞关注后观看，以防后面找不到回家的路。5.1、Vue通过控制类名来控制样式（重点！！！）提前定义好一个类名的样式，然后通过Vue的动态添加或删除div里面的类名来控制这个标签的样式。<style> .active{ width: 100px; height: 100px; background-color: pink; ...
复制链接

扫一扫