zoukankan      html  css  js  c++  java
  • Vue常用命令

    2. 常用指令

    指令 (Directives) 是带有“v-”前缀的特殊属性。每一个指令在vue中都有固定的作用。

    在vue中,提供了很多指令,常用的有:v-if、v-model、v-for等等。

    指令会在vm对象的data属性的数据发生变化时,会同时改变元素中的其控制的内容或属性。

    因为vue的历史版本原因,所以有一部分指令都有两种写法:

    vue1.x写法             vue2.x的写法
    v-html         ---->   {{ 普通文本 }}   # vue2.x 也支持v-html,输出html代码的内容
    v-bind:属性名   ---->   :属性
    v-on:事件名     ---->   @事件名
    

    2.1 操作属性

    格式:

    <标签名 :标签属性="data属性"></标签名>
    
    <p :title="str1">{{ str1 }}</p> <!-- 也可以使用v-html显示双标签的内容,{{  }} 是简写 -->
    <a :href="url2">淘宝</a>
    <a v-bind:href="url1">百度</a>  <!-- v-bind是vue1.x版本的写法 -->
    

    显示wifi密码效果:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
    
    <div id="index">
        <img :src="url" :alt="title"><br>
        <input :type="type" placeholder="请输入wifi密码"> <button @click="type='text'">显示密码</button>
    </div>
    
    <script>
        let vm = new Vue({
            el:"#index",
            data:{
              url:"https://www.luffycity.com/static/img/head-logo.a7cedf3.svg",
              title:"小浩学府",
              type:"password"
            }
        })
    </script>
    </body>
    </html>
    

    2.2 事件绑定

    有两种事件操作的写法,@事件名 和 v-on:事件名

    <button v-on:click="num++">按钮</button>   <!-- v-on 是vue1.x版本的写法 -->
    <button @click="num+=5">按钮2</button>
    

    总结:

    1. 使用@事件名来进行事件的绑定
       语法:
          <h1 @click="num++">{{num}}</h1>
    
    2. 绑定的事件的事件名,全部都是js的事件名:
       @submit   --->  onsubmit
       @focus    --->  onfocus
       ....
    
    

    例如:完成商城购物车中的商品增加减少数量

    步骤:

    1. 给vue对象添加操作数据的方法
    2. 在标签中使用指令调用操作数据的方法
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="box">
            <button @click="++num">+</button>
            <input type="text" v-model="num">
            <button @click="sub">-</button>
        </div>
    
        <script>
            let vm = new Vue({
                el:"#box",
                data:{
                    num:0,
                },
                methods:{
                    sub(){
                        if(this.num<=1){
                            this.num=0;
                        }else{
                            this.num--;
                        }
                    }
                }
            })
        </script>
    </body>
    </html>
    
    <!--#box>(button+input+button) tab键-->
    
    

    2.3 操作样式

    2.3.1 控制标签class类名

    格式:
       <h1 :class="值">元素</h1>  值可以是字符串、对象、对象名、数组
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/vue.js"></script>
        <style>
        .box1{
            color: red;
            border: 1px solid #000;
        }
        .box2{
            background-color: orange;
            font-size: 32px;
        }
        </style>
    </head>
    <body>
        <div id="box">
            <!--- 添加class类名,值是一个对象
            {
             class类1:布尔值变量1,
             class类2:布尔值变量2,
            }
             -->
            <p :class="{box1:myclass1}">一个段落</p>
            <p @click="myclass3=!myclass3" :class="{box1:myclass2,box2:myclass3}">一个段落</p>
        </div>
        <script>
            let vm1=new Vue({
                el:"#box",
                data:{
                    myclass1:false, // 布尔值变量如果是false,则不会添加对象的属性名作为样式
                    myclass2:true,  // 布尔值变量如果是true,则不会添加对象的属性名作为样式
                    myclass3:false,
                },
            })
        </script>
    
        <!-- 上面的代码可以:class的值保存到data里面的一个变量,然后使用该变量作为:class的值 -->
        <style>
        .box4{
            background-color: red;
        }
        .box5{
            color: green;
        }
        </style>
        <div id="app">
            <button @click="mycls.box4=!mycls.box4">改变背景</button>
            <button @click="mycls.box5=!mycls.box5">改变字体颜色</button>
            <p :class="mycls">第二个段落</p>
        </div>
        <script>
            let vm2 = new Vue({
                el:"#app",
                data:{
                    mycls:{
                        box4:false,
                        box5:true
                    },
                }
            })
        </script>
    
        <!-- 批量给元素增加多个class样式类 -->
        <style>
        .box6{
            background-color: red;
        }
        .box7{
            color: green;
        }
        .box8{
            border: 1px solid yellow;
        }
        </style>
        <div id="app2">
                <p :class="[mycls1,mycls2]">第三个段落</p>
        </div>
        <script>
            let vm3 = new Vue({
                el:"#app2",
                data:{
                    mycls1:{
                        box6:true,
                        box7:true,
                    },
                    mycls2:{
                        box8:true,
                    }
                }
            })
        </script>
    </body>
    </html>
    

    代码执行效果:

    1552036325806

    总结:

    1. 给元素绑定class类名,最常用的就是第二种。
        vue对象的data数据:
            data:{
              myObj:{
                complete:true,
                uncomplete:false,
              }
            }
    
    		html元素:    
        		<div class="box" :class="myObj">2222</div>
        最终浏览器效果:
    		    <div class="box complete">2222</div>
    

    2.3.2 控制标签style样式

    格式1:值是json对象,对象写在元素的:style属性中
    	 标签元素:
    		     <div :style="{color: activeColor, fontSize: fontSize + 'px' }"></div>
    	 data数据如下:
             data: {
                 activeColor: 'red',
                 fontSize: 30
             }
    格式2:值是对象变量名,对象在data中进行声明
       标签元素:
       			<div v-bind:style="styleObject"></div>
       data数据如下:
             data: {
                	styleObject: {
                 		color: 'red',
                 		fontSize: '13px'
    			  			}
    				 }
    
    格式3:值是数组
      标签元素:
    				<div v-bind:style="[style1, style2]"></div>
    	data数据如下:
    				data: {
                         style1:{
                           color:"red"
                         },
                         style2:{
                           background:"yellow",
                           fontSize: "21px"
                         }
    				}
    

    2.3.2 实例-vue版本选项卡

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #card{
                 500px;
                height: 350px;
            }
            .title{
                height:50px;
            }
            .title span{
                 100px;
                height: 50px;
                background-color:#ccc;
                display: inline-block;
                line-height: 50px; /* 设置行和当前元素的高度相等,就可以让文本内容上下居中 */
                text-align:center;
            }
            .content .list{
                 500px;
                height: 300px;
                background-color: yellow;
                display: none;
            }
            .content .active{
                display: block;
            }
    
            .title .current{
                background-color: yellow;
            }
        </style>
        <script src="js/vue.js"></script>
    </head>
    <body>
    
        <div id="card">
            <div class="title">
                <span @click="num=0" :class="num==0?'current':''">国内新闻</span>
                <span @click="num=1" :class="num==1?'current':''">国际新闻</span>
                <span @click="num=2" :class="num==2?'current':''">银河新闻</span>
                <!--<span>{{num}}</span>-->
            </div>
            <div class="content">
                <div class="list" :class="num==0?'active':''">国内新闻列表</div>
                <div class="list" :class="num==1?'active':''">国际新闻列表</div>
                <div class="list" :class="num==2?'active':''">银河新闻列表</div>
            </div>
        </div>
        <script>
            // 思路:
            // 当用户点击标题栏的按钮[span]时,显示对应索引下标的内容块[.list]
            // 代码实现:
            var card = new Vue({
                el:"#card",
                data:{
                    num:0,
                },
            });
        </script>
    
    </body>
    </html>
    

    代码运行效果:

    1552038219804

    2.4 条件渲染指令

    vue中提供了两个指令可以用于判断是否要显示元素,分别是v-if和v-show。

    2.4.1 v-if

      标签元素:
          <!-- vue对象最终会把条件的结果变成布尔值 -->
    			<h1 v-if="ok">Yes</h1>
      data数据:
      		data:{
          		ok:false    // true则是显示,false是隐藏
          }
    

    2.4.2 v-else

    v-else指令来表示 v-if 的“else 块”,v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。

      标签元素:
    			<h1 v-if="ok">Yes</h1>
    			<h1 v-else>No</h1>
      data数据:
      		data:{
          		ok:false    // true则是显示,false是隐藏
          }
    

    2.4.3 v-else-if

    可以出现多个v-else-if语句,但是v-else-if之前必须有一个v-if开头。后面可以跟着v-else,也可以没有。

      标签元素:
    			<h1 v-if="num==1">num的值为1</h1>
    			<h1 v-else-if="num==2">num的值为2</h1>
    		  <h1 v-else>num的值是{{num}}</h1>
      data数据:
      		data:{
          		num:2
          }
    

    2.4.4 v-show

    用法和v-if大致一样,区别在于2点:

    1. v-show后面不能v-else或者v-else-if
    2. v-show隐藏元素时,使用的是display:none来隐藏的,而v-if是直接从HTML文档中移除元素[ DOM操作中的remove ]
      标签元素:
    			<h1 v-show="ok">Hello!</h1>
      data数据:
      		data:{
          		ok:false    // true则是显示,false是隐藏
          }
    

    2.5 列表渲染指令

    在vue中,可以通过v-for指令可以将一组数据渲染到页面中,数据可以是数组或者对象。

    数据是数组:        
            <ul>
                <!--i是列表的每一个元素-->
                <li v-for="book in book_list">{{book.title}}</li>
            </ul>
    
            <ul>
                <!--i是列表的每一个元素,j是每个元素的下标-->
                <li v-for="(book, index) in book_list">第{{ index+1}}本图书:{{book.title}}</li>
            </ul>
    
    
            <script>
                var vm1 = new Vue({
                    el:"#app",
                    data:{
                        book_list:[
                            {"id":1,"title":"图书名称1","price":200},
                            {"id":2,"title":"图书名称2","price":200},
                            {"id":3,"title":"图书名称3","price":200},
                            {"id":4,"title":"图书名称4","price":200},
                        ]
                    }
                })
            </script>
    
    数据是对象:
            <ul>
                <!--i是每一个value值-->
                <li v-for="value in book">{{value}}</li>
            </ul>
            <ul>
                <!--i是每一个value值,j是每一个键名-->
                <li v-for="attr, value in book">{{attr}}:{{value}}</li>
            </ul>
            <script>
                var vm1 = new Vue({
                    el:"#app",
                    data:{
                        book: {
                            // "attr":"value"
                            "id":11,
                            "title":"图书名称1",
                            "price":200
                        },
                    },
                })
            </script>
    
    
  • 相关阅读:
    BEC listen and translation exercise 44
    中译英12
    BEC listen and translation exercise 43
    中译英11
    BEC listen and translation exercise 42
    中译英10
    BEC listen and translation exercise 41
    中译英9
    BEC listen and translation exercise 40
    中译英8
  • 原文地址:https://www.cnblogs.com/ghh520/p/12951679.html
Copyright © 2011-2022 走看看