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

    指令

    文本指令
    <div id="app">
        <!-- 插值表达式就是 v-text -->
        <p>{{ msg1 }}</p>
        <p v-text="msg2"></p>
        
        <!-- 可以解析html标签 -->
        <p v-html="msg3"></p>
        
        <!-- 必须赋初值,渲染的结果永远不会发生改变 -->
        <p v-once="msg3"  v-on:mouseover="action">{{ msg3 }}</p>
    </div>
    
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg1: '**msg1**',
                msg2: '<b>**msg2**</b>',
                msg3: '<b>**msg3**</b>',
            },
            methods: {
                action: function () {
                    // var msg = this.$data.msg4;
                    this.msg3 = '<i>**new msg3**</i>'
                }
            }
        })
    </script>
    
    事件指令
    <div id="app">
        <!-- v-on:事件名="函数名"  可以简写为 @事件名="函数名"  (v-on: => @)-->
        <p v-on:click="action1">{{ msgs[0] }}</p>
        <p @click="action2">{{ msgs[1] }}</p>
    
        <!-- 事件的传参 -->
        <ul>
            <li @click="liAction(100)">列表项1</li>
            <li @click="liAction(200)">列表项2</li>
            <li @click="liAction(300)">列表项3</li>
        </ul>
    
        <!-- 鼠标事件的对象:直接写函数名,默认将鼠标事件对象传入 -->
        <div @click="func1">func1</div>
        <!-- 鼠标事件的对象:一旦添加(),就必须手动传参,$event就代表鼠标事件对象 -->
        <div @click="func2($event, 'abc')">func2</div>
    </div>
    
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msgs: ['11111', '22222']
            },
            methods: {
                action1: function () {
                    alert(this.msgs[0])
                },
                action2: function () {
                    alert(this.msgs[1])
                },
                liAction: function (num, msg) {
                    console.log(num, msg)
                },
                func1: function (ev) {
                    console.log(ev)
                },
                func2: function (ev, msg) {
                    console.log(ev);
                    console.log(msg)
                }
            }
        })
    </script>
    
    属性指令
    <div id="app">
        <!-- 属性指令:用vue绑定属性,将属性内容交给vue处理 -->
        <!-- 语法:v-bind:属性名="变量"  (v-bind: 可以简写为 :) -->
        <p class="" style="" v-bind:owen="oo" :jason="jj"></p>
    
    
        <!-- class 属性 -->
        <p :class="c1" @click="action1"></p>
        <!-- 多类名 -->
        <p :class="[c1, c2]"></p>
        <!-- 'br' 固定写死的数据,不再是变量 -->
        <p :class="[c1, 'br']"></p>
    
        <!-- style 属性 -->
        <!-- 一个变量:该变量值为{},{}内部完成一个个属性的设置 -->
        <p class="gDiv" :style="s1">12345</p>
        <!-- 一个{}:{}内一个个属性有一个个变量单独控制 -->
        <p class="gDiv" :style="{fontSize: fs, color: c}">67890</p>
    
    </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                oo: 'Owen',
                jj: 'Jason',
                c1: 'rDiv',
                c2: 'br',
                s1: {
                    // 'font-size': '30px'
                    fontSize: '30px',
                    color: 'pink'
                },
                fs: '20px',
                c: 'orange'
            },
            methods: {
                action1: function () {
                    if (this.c1 == 'rDiv') {
                        this.c1 = 'gDiv'
                    } else {
                        this.c1 = 'rDiv'
                    }
                }
            }
        })
    </script>
    
    条件指令
    <meta charset="UTF-8">
    <style>
        .div {
             100px;
            height: 100px;
            background-color: greenyellow;
            border-radius: 50%;
        }
    </style>
    <div id="app">
        <!-- 条件指令 v-show | v-if-->
        <!-- v-show:消失是以 display: none渲染 -->
        <div class="div" v-show="s1"></div>
        <div class="div" v-show="s1"></div>
        <!-- v-if:消失时不会被渲染渲染,所以建议建立缓存, 用key属性 -->
        <div class="div" v-if="s2" key="div1"></div>
        <div class="div" v-if="s2" key="div2"></div>
    </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                s1: false,
                // s2: false  没写默认为false
            }
        })
    </script>
    
    <meta charset="utf-8">
    <style>
        ul li {
            border: 1px solid black;
             60px;
            float: left;
        }
        ul {
            list-style: none;
        }
        ul:after {
            content: "";
            display: block;
            clear: both;
        }
        .wrap {
             500px;
            height: 200px;
        }
        .red { background-color: red; }
        .blue { background-color: blue; }
        .green { background-color: green; }
    </style>
    <div id="app">
        <!-- v-if v-else-if v-else 案例 -->
        <ul>
            <li @click="changeWrap(0)">red</li>
            <li @click="changeWrap(1)">green</li>
            <li @click="changeWrap(2)">blue</li>
        </ul>
        <!-- red页面逻辑结构 -->
        <div class="wrap red" v-if="tag == 0" key="aaa"></div>
        <!-- green页面逻辑结构 -->
        <div class="wrap green" v-else-if="tag == 1" key="bbb"></div>
        <!-- blue页面逻辑结构 -->
        <div class="wrap blue" v-else key="ccc"></div>
        <!-- v-if相关分支操作,在未显示情况下,是不会被渲染到页面中 -->
        <!-- 通过key全局属性操作后,渲染过的分支会建立key对应的缓存,提高下一次渲染速度 -->
    </div>
    <script src="js/vue.js"></script>
    <script type="text/javascript">
    	new Vue({
    		el: "#app",
    		data: {
    			tag: 0,
    		},
    		methods: {
    			changeWrap (num) {
    				this.tag = num;
    			}
    		}
    	})
    </script>
    
    表单指令
    <div id="app">
        <!-- 表单指令:v-model="变量" -->
        <form action="">
            <p>
                <input type="text" v-model="val" name="user">
            </p>
            <p>
                <input type="text" v-model="val">
            </p>
    
            <!-- 单选框 v-model绑定的变量是单选框中某一个input的value -->
            <p>
                男: <input v-model="r_val" value="male" type="radio" name="sex">
                女: <input v-model="r_val" value="female" type="radio" name="sex">
            </p>
    
            <!-- 复选框 v-model绑定的变量是一个列表,列表存存放0到任一个复选框的value  -->
            <p>
                男: <input v-model="c_val" value="m" type="checkbox" name="h">
                女: <input v-model="c_val" value="f" type="checkbox" name="h">
                哇塞: <input v-model="c_val" value="mf" type="checkbox" name="h">
            </p>
    
            <button type="submit">提交</button>
        </form>
    </div>
    
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                val: '',
                r_val: 'female',
                c_val: []
            }
        })
    </script>
    </html>
    
    循环指令
    <div id="app">
        <p>{{ nums[2] }}</p>
        <ul>
            <!-- 只遍历值 -->
            <li v-for="num in nums">{{ num }}</li>
        </ul>
    
        <ul>
            <!-- 值与索引 -->
            <li v-for="(num, index) in nums">{{ num }} {{ index }}</li>
        </ul>
    
        <ul>
            <!-- 值,键,索引 -->
            <li v-for="(v, k, i) in people">{{ v }} {{ k }} {{ i }}</li>
        </ul>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                nums: [5, 3, 2, 1, 4],
                people: {
                    'name': 'Owen',
                    'age': 17.5,
                    'gender': 'others'
                }
            }
        })
    </script>
    
    评论案例
    <style>
        span {
            margin-left: 100px;
            cursor: pointer;
            color: green;
        }
        span:hover {
            color: red;
        }
    </style>
    
    <div id="app">
        <p>
            <input type="text" v-model="val">
            <button @click="add">评论</button>
        </p>
        <ul>
            <li v-for="(info, i) in infos">
                {{ info }}
                <span @click="del(i)">x</span>
            </li>
        </ul>
    </div>
    
    <script src="js/vue.js"></script>
    
    <script>
        new Vue({
            el: '#app',
            data: {
                infos: [],  // 管理所有留言
                val: ''  // 管理当前留言
            },
            methods: {
                del: function (i) {
                    // splice: 从哪个索引开始  操作的位数  操作成的结果(可变长)
                    this.infos.splice(i, 1)  // 删除留言
                },
                add: function () {
                    let val = this.val;
                    if (val) {
                        this.infos.splice(0, 0, val);  // 留言
                        this.val = ''  // 输入框置空
                    }
                }
            }
        })
    </script>
    
    解决插值表达式符号冲突
    <div id="app">
        ${ msg }
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: '12345'
            },
            delimiters: ['${', '}']
        })
    </script>
    

    总结

    指令:

    文本:{{ }} v-text v-html v-once

    属性:v-bind:href | :href :class=’c1’ :class=’[c1,c2]’ :style=’s1’ (s1=cloor: “red”)

    事件:v-on:click | @click @click=“action” @click=“action(msg)” @click=“action($event)”

    表单:v-model

    条件:v-show v-if v-else-if v-else

    循环:v-for=“(value,index) in list” v-for=“(value,key,index) in dict”

    成员

    el:挂载点

    data:数据

    methods:方法

    conputed:计算 -– 监听方法内所有的变量,返回值给绑定的变量,该变量无需再data中声明

    watch:监听 -– 监听绑定的变量,绑定的变量必须在data中声明

  • 相关阅读:
    js中的函数节流
    使用React写的一个小小的登录验证密码组件
    React如何进行事件传参
    微信小程序实现文字跑马灯
    正则表达式验证邮箱和手机号
    小程序事件传参
    漏覆盖专区
    jmetr _MD5加密_获取签名
    JMeter 中_time 函数的使用(时间戳、当前时间)
    获取响应数据___JSON Extractor 后置处理器
  • 原文地址:https://www.cnblogs.com/majingjie/p/11090744.html
Copyright © 2011-2022 走看看