zoukankan      html  css  js  c++  java
  • vue常用指令

    1、v-if系列

    v-if="数据|判断"
    只要条件成立,就显示if中的元素

    v-else (注意:必须跟在v-if或者v-if-else的后面,不然失效)
    如果if条件不成立显示当前的元素

    v-else-if 要紧跟v-if
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6     <script src="../js/vue.min.js"></script>
     7     <style>
     8     .box{
     9         width:100px;
    10         height:100px;
    11         background: red;
    12     }
    13     .box2{
    14         width:100px;
    15         height:100px;
    16         background: yellow;
    17     }
    18     .box3{
    19         width:100px;
    20         height:100px;
    21         background: green;
    22     }
    23     </style>
    24 </head>
    25 <body>
    26     <div id="app">
    27         <span>隔山打牛</span>
    28         <div class="box" v-if="onOff == 'a'"></div>
    29         <div class="box2" v-else-if="onOff == 'b'"></div>
    30         <div class="box3" v-else></div>
    31     </div>
    32     <script>
    33    new Vue({
    34        el:'#app',
    35        data:{
    36             onOff:'b'
    37        }
    38    });
    39     </script>
    40 </body>
    41 </html>

    v-if中条件不成立就执行v-else-if中的yellow黄色背景,如果v-else-if也不成立,则执行v-else中的绿色背景

    2、v-show

    根据表达式之真假值,切换元素的 display CSS 属性

    v-show和v-if都是用来控制元素的渲染
    v-if——判断是否加载,可以减轻服务器的压力,在需要时加载
    v-show——调整css dispaly属性,可以使客户端操作更加流畅
     
     <div id="app">
            <div v-show="islo">你好,vue</div>
     </div>
    1 new Vue({
    2        el:'#app',
    3        data:{
    4            islo:true
    5        }
    6 })

    上面例子中如果islo为false则display属性为none 隐藏元素

    3、v-for

    该指令根据遍历数组来进行渲染

    /*
    一个参数:<div v-for="val in obj">{{val}}</div>
    两个参数:<div v-for="(val,key)" in obj>{{val}}</div>
    三个参数:<div v-for="(val,key,index)" in obj>{{val}}</div>
    */

    注意:
    当v-for 和 v-if同处于一个节点时候,v-for比v-if优先级高
    意味着v-if将运行在每个v-for中

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6     <script src="../js/vue.min.js"></script>
     7 </head>
     8 <body>
     9     <div id="app">
    10        <ul>
    11            <li v-for="val in items">{{val}}</li>
    12        </ul>
    13        <ol>
    14            <li v-for="(user,key) in itemObj">{{user.name}}</li>
    15        </ol>
    16        <div v-for="(val,key,index) in obj" >{{key}}:{{val}}</div>
    17     </div>
    18     <script>
    19     /*
    20     val:数组中的每个值,对象每个值
    21     key:数据就下标,对象key值
    22     index:下标0,1,2
    23     */
    24    new Vue({
    25        el:'#app',
    26        data:{
    27            items:['苹果','橘子','香蕉','草莓','柚子'],
    28            itemObj:[
    29                {name:'apple'},
    30                {name:'orange'},
    31                {name:'banana'},
    32                {name:'strawberry'},
    33                {name:'pomelo'},
    34             ],
    35             obj:{
    36                id:1,
    37                name:'小明',
    38                age:22,
    39                home:'太原'
    40             }
    41        }
    42       
    43    });
    44     </script>
    45 </body>
    46 </html>

    4、v-text和v-html

    v-text => 等同于innerText 文本
    v-html => 等同于innerHTML 内容(包括元素)
     
    {{msg}}这种当我们网速很慢或者js出错时,会暴露我们的{{xxx}},这时候可以使用v-text
     
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="../js/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
           <span>{{msg}}</span> 
           <p v-text="msg"></p>
           <p v-html="str"></p>
        </div>
        <script>
       new Vue({
           el:'#app',
           data:{
               msg:'你好,世界',
               str:'<h2>内容</h2>'//这里使用v-html,v-text会把<h2>标签也输出来
           }
       });
        </script>
    </body>
    </html>

    5、v-on

    v-on:事件名
    缩写:@事件名

    事件函数写在methods

    methods在根实例下,值为一个对象

    methods:{
      函数名(){
        this指向实例
        this的数据修改,直接this.数据名即可
      }
    }
    *** 改了数据,内容也会随之改变
     
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="../js/vue.min.js"></script>
        <style>
    
        </style>
    </head>
    <body>
        <div id="app">
          <button @click="add">添加</button>
          <button @click="rm">删除</button>
          <ul>
              <li v-for="(val,key) in arr">{{val}}</li>
          </ul>
        </div>
        <script>
       new Vue({
           el:'#app',
           data:{
               num:0,
               arr:[]
           },
           methods:{
               add(){
                this.arr.unshift(++this.num)
               },
               rm(){
                   if(this.num>0){
                    this.arr.shift();
                    this.num --;
                   }
               }
           }
       });
        </script>
    </body>
    </html>

    v-on修饰符

    stop

    //调用 event.stopPropagation()

    prevent

    //调用 event.preventDefault()

    self 

    //只当事件是从侦听器绑定的元素本身触发时才触发回调
    <div id="app">     
           <div id="box1" @click="b1">
           <!--stop阻止冒泡,prevent阻止默认行为-->
               <div id="box2" @click.stop.prevent="b2">
                12345
               </div>
           </div>
     </div>
     new Vue({
               el:'#app',
               methods:{
                   b1(){alert(1);},
                   b2(){ alert(2);}
               }
        });

    6、v-bind

    v-bind:属性名
    缩写:
    :class
    动态绑定数据,及时对页面的数据进行变更
    一般是用来操作属性。如class、style、src、href等等
    :class="c" 可以写数据
    :class="{red:true}" red->类名: 布尔值 ,只有为true的时候才显示这个class
    :class="[c1,c2]" c1和c2为对象 {red:true}
     
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="../js/vue.min.js"></script>
        <style>
            .classA{
                color:red;
            }
            .classB{
                color:orange;
            }
        </style>
    </head>
    <body>
        <div id="app">
          <div :class="classA">绑定class</div>
          <div :class="{classA:isok}">绑定class的判断</div>
          <div :class="{classA,classB}">绑定class中数组</div>
          <div :class="isok?classA:classB">绑定class的三元运算符</div>
          <div>
              <input type="checkbox" id="isok" v-model="isok">
          </div>
        </div>
        <script>
       new Vue({
           el:'#app',
           data:{
              classA:'classA',
              classB:'classB',
              isok:true
           },
           
       });
        </script>
    </body>
    </html>

    7、v-model

    在表单上创建双向数据绑定
     
    当在表单元素中,绑定了v-model,那么只要用户改变视图中的内容
    那么就等同于直接改变数据,当然改变数据,一样会改变视图

    在使用v-model的时候,如果放个数组,那么会自动查找表单元素中的value
    没有则出现null,如果要统计多个表单元素的信息,可以把同一个数据绑定到 v-model上
     
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="../js/vue.min.js"></script>
        <style>
        .active{
            background: red;
        }
        </style>
    </head>
    <body>
        <div id="app">
         小黄<input type="checkbox" value="小黄" v-model="arr">
         小蓝<input type="checkbox" value="小蓝" v-model="arr">
         小绿<input type="checkbox" value="小绿" v-model="arr">
         {{arr}}
        </div>
        <script>
       new Vue({
           el:'#app',
           data:{
              arr:[]
           },
           
       });
        </script>
    </body>
    </html>

    在select上绑定v-model,如果option中有value,选择的结果优先为value值

    如果没有value值,则走option的内容

    <div id="app">     
            <select name="" v-model="b">
                <option disabled value="">请选择</option>
                <option value="aa">广州</option>
                <option value="bb">杭州</option>
                <option value="cc">福州</option>
                <option value="dd">苏州</option>
                <option value="ee">徐州</option>
                <option value="ff">兖州</option>
            </select>
            <!--下面会直接出现城市名称,因为没有value值-->
                <select name="" v-model="b">
                    <option disabled value="">请选择</option>
                    <option >广州</option>
                    <option >杭州</option>
                    <option >福州</option>
                    <option >苏州</option>
                    <option >徐州</option>
                    <option >兖州</option>
                </select>
            {{b}}
        </div>

    8、v-once

    v-once关联的实例,只会渲染一次。之后的重新渲染,实例极其所有的子节点将被视为静态内容跳过,这可以用于优化更新性能
    只绑定一次,当数据再次发生变化,也不导致页面刷新
    <span v-once>change:{{msg}}</span><div v-once><h1>comment</h1>
        <p>{{msg}}</p>
    </div>
    <my-component v-once:comment="msg"></my-component><ul>
        <li v-for="i in list">{{i}}</li>
    </ul>

    上面的例子中,msg,list即使产生改变,也不会重新渲染

    9、v-pre

    主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译
    <div id="app">
      <!--第一条语句不进行编译-->
        <span v-pre>{{message}}</span>  
        <span>{{message}}</span>
    </div>

    最终仅显示第二个span的内容

    10、 v-cloak

    这个指令是用来保持在元素上直到关联实例结束时进行编译
    <div id="app" v-cloak>
        <div>
            {{message}}
        </div>
    </div>
    <script type="text/javascript">
        new Vue({
          el:'#app',
          data:{
            message:'hello world'
          }
        })
    </script>

    在页面加载时会闪烁,先显示

    <div>
        {{message}}
    </div>

    然后再显示

    <div>
        hello world!
    </div>
  • 相关阅读:
    cnblog项目--20190309
    django js引入失效问题
    Python老男孩 day16 函数(六) 匿名函数
    Python老男孩 day16 函数(五) 函数的作用域
    Python老男孩 day15 函数(四) 递归
    Python老男孩 day15 函数(三) 前向引用之'函数即变量'
    Python老男孩 day15 函数(二) 局部变量与全局变量
    Python老男孩 day14 函数(一)
    Python老男孩 day14 字符串格式化
    Python老男孩 day14 集合
  • 原文地址:https://www.cnblogs.com/theblogs/p/10340028.html
Copyright © 2011-2022 走看看