zoukankan      html  css  js  c++  java
  • Vue指令系统

    vuev-text

    <!DOCTYPE html>
    <html lang="en">
    <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>Document</title>
        <style>
            [v-cloak]{
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div v-text="msg"></div>
            <div v-text="1+1"></div>
            <div v-text="msg.slice(1)"></div>
            <div v-text="arr[0]"></div>
            <div v-text="1>2?'假':'真'"></div>
            <div v-text="arr.length"></div>
    
            <hr>
            
            <div v-cloak>{{msg}}</div>
            <div v-cloak>{{1+1}}</div>
            <div v-cloak>{{msg.slice(1)}}</div>
            <div v-cloak>{{arr[0]}}</div>
            <div v-cloak>{{1>2?'假':'真'}}</div>
            <div v-cloak>{{arr.length}}</div>
            <div v-cloak>{{h2}}</div>
        </div>
    </body>
    </html>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:'1905',
                arr:[10,20,30,40],
                h2:"<h2>abc</h2>"
            }
        })
    
        /*
            v-text:
                作用:
                    1、解析data种的数据
                    2、可以书写任何JS的表达式
    
            注意:指令必须作用的元素身上  
    
            简写:{{}}
    
            底层原理:innerText
        */
    
    </script>

    vuev-html

    <!DOCTYPE html>
    <html lang="en">
    <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>Document</title>
    </head>
    <body>
        <div id="app">
            <div v-html="h2"></div>
        </div>
    </body>
    </html>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                h2:"<h2>abc</h2>"
            }
        })
    
        /*
        
            v-html:
                作用:
                  解析html的数据
    
            注意:指令必须作用的元素身上  
    
            底层原理:innerHTML
        */
    
    </script>

    vuev-ifv-show

    <!DOCTYPE html>
    <html lang="en">
    <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>Document</title>
    </head>
    <body>
        <div id="app">
            <h2 v-show="flag">你们是最胖的</h2>
            <hr>
            <h2 v-if="casen == 1">周一</h2>
            <h2 v-else-if="casen == 2">周二</h2>
            <h2 v-else>周三</h2>
        
        </div>
    </body>
    </html>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
               flag:true,
               casen:10
            }
        })
    
        /*
            v-show:
                作用:控制元素的显示隐藏
    
                如果值为true则显示  值为false则隐藏
    
                底层原理:操作元素的display属性
    
    
           v-if:
                作用:控制元素的显示隐藏,但是可以做逻辑判断
    
                如果值为true则显示  值为false则隐藏
    
                底层原理:操作元素的移除和添加
    
    
            v-else-if
            v-else
    
            注意:当使用v-else-if  v-else的时候必须在之前使用v-if
    
    
    
            v-if以及v-show的区别?以及使用的场景
            
            相同点:都是控制元素的显示隐藏
    
            不同点:
                v-show 是操作元素的display属性
                v-if是操作元素的移除和添加 另外v-if还可以配合v-else-if v-else使用
    
            使用的场景
                1、v-show:当业务逻辑需要当前的模块在页面进行隐藏而不是移除的时候用(选项卡,导航)v-show
                2、v-if  当业务逻辑需要当前的模块在页面进行移除的时候并且在控制台查找不到的时候用v-if (权限)
    
                vip8  普通用户
    
                后台管理系统的权限校验的时候如果是vip8的显示相对应得页面  
                单页面开发的时候
        */
    
    </script>

    vuev-for

    <!DOCTYPE html>
    <html lang="en">
    <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>Document</title>
    </head>
    <body>
        <div id="app">
            <div v-for="(item,index) in goods">
                <p>{{item.goodsId}}</p>
                <p>{{item.goodsName}}</p>
            </div>
            <div v-for="(item,index) in arr"> 
                <p>{{item}}----{{index}}</p>
            </div>
            <hr>
            <p v-for="(item,index) in obj">{{item}}----{{index}}</p>
            <p v-for="(item,index) in 'qianfeng'">{{item}}</p>
        </div>
    </body>
    </html>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
               goods:[
                   {
                       goodsId:1,
                       goodsName:"三只松鼠"
                   },
                   {
                       goodsId:2,
                       goodsName:"四只松鼠"
                   },
                   {
                       goodsId:3,
                       goodsName:"五只松鼠"
                   },
                   {
                       goodsId:4,
                       goodsName:"两只老虎"
                   },
    
               ],
               arr:[10,20,30,40],
               obj:{
                   username:"zhangsan",
                   age:19
               }
            }
        })
    
        /*
            v-for:
                作用:遍历数据
        */
    
    </script>

    vuev-bind

    <!DOCTYPE html>
    <html lang="en">
    <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>Document</title>
    </head>
    <body>
        <div id="app">
           <div v-bind:class="myclass"></div>
           <div v-bind:class="classArr"></div>
           <div v-bind:class="classObj"></div>
           <hr>
           <div :style="myStyle" :title="title"></div>
           <hr>
           <img :src="mySrc">
           <a :href="myhref">百度</a>
        </div>
    </body>
    </html>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
              myclass:"box",
              classArr:['box1','box2','box3'],
              classObj:{
                  "box1":true,
                  "box2":false,
                  "box3":true
              },
              myStyle:{
                  "200px",
                  height:"200px",
                  backgroundColor:"red"
              },
              title:"盒子",
              mySrc:"https://cn.vuejs.org/images/logo.png",
              myhref:"http://www.baidu.com"
            }
        })
    
        /*
        
          v-bind
            作用:用来绑定属性
    
    
    
        简写:  冒号  :
            常见的属性:
                class
                id
                style
                title
                src
                href
    
    
        */
    
    </script>

    vuev-on

    <!DOCTYPE html>
    <html lang="en">
    <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>Document</title>
        <style>
            .content{
                 300px;
                height: 300px;
                background: red;
            }
            .child{
                 150px;
                height: 150px;
                background: yellow;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <button v-on:click="handleClick(123,$event)">点击</button>
            <div class="content" @click="handleContent()" @contextMenu.prevent="handleMenu()">
                <div class="child" @click.stop="handleChild()"></div>
            </div>
            <input type="text" @keydown.13="handleInput()">
        </div>
    </body>
    </html>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                h2:"<h2>abc</h2>"
            },
            //当前vue所拥有的一些方法
            methods:{
                handleClick(val,e){
                    console.log(val,e)
                },
                handleChild(){
                    alert("child")
                },
                handleContent(){
                    alert("content")
                },
                handleMenu(){
                   console.log("右键菜单")
                },
                handleInput(){
                    console.log("回车")
                }
                
            }
        })
    
        /*
        
           v-on:
                事件绑定
            语法: v-on:事件类型
    
            如果需要在函数种使用事件对象 必须要在函数种传递一个形参$event
    
            简写:  @事件名称
    
    
            修饰符:在指令后面加的一些属性叫做修饰符
                stop:阻止冒泡
                prevent:  组织默认行为
                enter: 回车
                code值
        */
    
    </script>

    vuev-model

    <!DOCTYPE html>
    <html lang="en">
    
    <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>Document</title>
    </head>
    
    <body>
        <div id="app">
            <input type="text" v-model="msg">
            <h2>{{msg}}</h2>
            <hr />
            <label>
                男:<input type="radio" value="男" v-model="radioVal">
            </label>
            <label>
                女:<input type="radio" value="女" v-model="radioVal">
            </label>
            <p>您选择的性别是:{{radioVal}}</p>
            <hr>
            <label>
                抽烟:<input type="checkbox" value="抽烟" v-model="checkVal">
            </label>
            <label>
                喝酒:<input type="checkbox" value="喝酒" v-model="checkVal">
            </label>
            <label>
                烫头:<input type="checkbox" value="烫头" v-model="checkVal">
            </label>
            <label>
                大保健:<input type="checkbox" value="大保健" v-model="checkVal">
            </label>
            <p v-for="item in checkVal">{{item}}</p>
            <hr>
    
            <select v-model="selectVal">
                <option value="1992">1992</option>
                <option value="1993">1993</option>
                <option value="1994">1994</option>
                <option value="1995">1995</option>
                <option value="1996">1996</option>
                <option value="1997">1997</option>
            </select>
            <p>您的出身日期是:{{selectVal}}</p>
        </div>
    </body>
    
    </html>
    <script src="./vue.js"></script>
    
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                msg: "1905",
                radioVal: "男",
                checkVal:[],
                selectVal:"1997"
            },
            methods: {
    
            }
        })
    
        console.log(vm);
    
    
        /*
            v-model
                作用:双向绑定
    
                注意:v-model只能作用在form表单上
    
    
                底层的原理:
                    Object.defineProperty:
    
                    3.0  new Proxy:
    
    
                    凡是在data里面的数据身上都会有2个方法 一个是getter方法  一个是setter方法
    
    
    
        */
    </script>

    其他不常用的指令

    <!DOCTYPE html>
    <html lang="en">
    <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>Document</title>
    </head>
    <body>
        <div id="app">
           <!-- <p v-pre>在vue中{{msg}}用来解析data中的数据</p> -->
           <h2  v-once>{{msg}}</h2>
           <button @click="handleModify()">点击</button>
        </div>
    </body>
    </html>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
               msg:"1905"
            },
            methods:{
                handleModify(){
                    this.msg = "1902";
                }
            }
        })
    
        /*
        
            v-pre:  不解析{{}}中的数据
            v-cloak :防止初次加载的时候{{}}显示
            v-once  :数据只解析一次
    
    
    
            如果需要在methods中访问data中的数据的时候 只需要this.属性即可
        */
    
    </script>
  • 相关阅读:
    第三天 moyax
    mkfs.ext3 option
    write file to stroage trigger kernel warning
    download fomat install rootfs script
    custom usb-seriel udev relus for compatible usb-seriel devices using kermit
    Wifi Troughput Test using iperf
    learning uboot switch to standby system using button
    learning uboot support web http function in qca4531 cpu
    learngin uboot design parameter recovery mechanism
    learning uboot auto switch to stanbdy system in qca4531 cpu
  • 原文地址:https://www.cnblogs.com/r-mp/p/11224096.html
Copyright © 2011-2022 走看看