zoukankan      html  css  js  c++  java

  • Vue 之指令篇

    文件指令

    <body>
        <div id="app">
            <!-- 1) 插值表达式 -->
            <p>{{ msg }}</p>
            <p>{{ 1 + 2 * 3 + '条' + msg }}</p>
            <!-- 2) v-text -->
            <p v-text="msg"></p>
            <p v-text="'msg'"></p>
            <!-- 3) v-html：能解析html代码语法 -->
            <p v-text="html_msg"></p>
            <p v-html="html_msg"></p>
            <!-- 4) v-once：结合插值表达式来使用，变量值一旦被初始化赋值后就不会再改变 -->
            <input type="text" v-model="val">
            <p>{{ val }}</p>
            <p v-text="val"></p>
            <p v-html="val"></p>
            <p v-once>{{ val }}</p>
        </div>
    </body>
    <script src="js/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: '你是p',
                html_msg: '<b>html语法代码是否解析</b>',
                val: '000'
            }
        })
    </script>

     

    属性指令

    # 1.v-bind:属性名="变量"
    # 2.简写=>  :属性名="变量"
    # 3.:class="变量" | :class="{类名:is_able}" | :class="[类1变量, ..., 类n变量,]"

     

    <head>
        <meta charset="UTF-8">
        <title>属性指令</title>
        <style>
            .cls_a {
                 200px;
                height: 200px;
                background-color: yellowgreen;
            }
            .cls_b {
                text-align: center;
                line-height: 200px;
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
        <!-- 属性指令：v-bind -->
        <div id="app">
            <!-- 1) 自定义属性绑定变量 -->
            <p v-bind:abc="a"></p>
    ​
            <!-- 2) title属性 -->
            <p title="鼠标悬浮的文本提示">这是一个p段落</p>
            <p v-bind:title="my_title">这是一个p段落</p>
    ​
            <!-- 3) class属性 -->
            <!-- 重点：v-bind: 可以简写为 : -->
            <!-- my_class可以被任意赋值 -->
            <p :class="my_class">这是一个p段落</p>
    ​
            <!--{类名:类是否起作用, ...}  类是否起作用 写的是变量，变量的值为true或false-->
            <!--应用场景：通过一个变量真假控制一个类名是否起作用-->
            <p :class="{x:1, y:0, z:is_able}">这是一个p段落</p>
    ​
            <!--[类名1, ..., 类名n]: 多类名，每一个类名既可以是字符串常量也可以是变量-->
            <p :class="[o, p, q, 'oqp']">这是一个p段落</p>
    ​
            <!--多类名综合使用-->
            <p :class="[o, p, q, 'oqp', {k: true}, {h: false}]">这是一个p段落</p>
    ​
    ​
            <!-- 4) style属性 -->
            <p :style="my_style">这是一个p段落</p>
            <p :style="{color: 'red', backgroundColor: yellow}">这是一个p段落</p>
            
        </div>
    </body>
    <script src="js/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                a: 'A',
                my_title: '鼠标悬浮的文本提示',
                my_class: 'cls_a cls_b',
                is_able: true,
                o: 'O',
                p: 'P',
                q: 'Q',
                my_style: {
                    color: 'red',
                    // 'font-size': '30px'
                    fontSize: '30px'
                },
                yellow: 'greenyellow'
            }
        })
    </script>

     

    事件指令

    # 指令：v-on:事件名="方法变量"
    # 简写：@事件名="方法变量"
    # 简写：@事件名="方法变量()"  => 不是方法的调用，而是用于传参
    # 简写：@事件名="方法变量('普通参数', $event)"  => $event是事件参数，可以通过它得到鼠标点击的相关信息
    <body>
        <!-- 指令：v-on:事件名="变量" -->
        <!-- 简写：@事件名="变量" -->
        <div id="app">
            <p v-on:click="fn1" :style="{color: m_c}">{{ msg }}</p>
            <p @mouseover="fn2" @mouseleave="fn3" @mousedown="fn4" @mouseup="fn5">{{ msg }}</p>
    ​
    ​
            <!--事件需要参数时-->
            <!-- 注意：事件绑定 方法名() 等价 方法名，不能调用方法，而是作为传参的标志 -->
            <p @click="func('abc')">{{ msg }}</p>
    ​
            <!--类别django传参的应用场景，可以标识具体点击的是哪个li-->
            <!--{% for %}-->
            <!--<li @click="func({{forloop.index}})"></li>-->
            <!--{% end for%}-->
    ​
    ​
            <!--传入事件对象-->
            <p @click="func1($event)">{{ msg }}</p>
        </div>
    </body>
    <script src="js/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: '你是p',
                m_c: 'red'
            },
            methods: {
                func1: function (ev) {
                    console.log(ev);
                    // 数据点击页面的点击点
                    console.log(ev.clientX);
                    console.log(ev.clientY);
                },
                func: function (txt) {
                    this.msg = txt
                },
                fn1: function () {
                    if (this.m_c == 'red') {
                        this.m_c = 'blue'
                    } else {
                        this.m_c = 'red'
                    }
                },
                fn2: function () {
                    this.msg = '鼠标悬浮了'
                },
                fn3: function () {
                    this.msg = '鼠标离开了'
                },
                fn4: function () {
                    this.msg = '鼠标按下了'
                },
                fn5: function () {
                    this.msg = '鼠标抬起了'
                }
            }
        })
    </script>

     

    表单事件

    <body>
        <div id="app">
            <!-- 指令：v-model="变量" -->
            <form action="" method="get">
                <!-- 1) 数据的双向绑定 -->
                <input type="text" v-model="msg" name="usr">
                <input type="password" v-model="msg" name="pwd">
                <!-- 2) 单选框: value必须设置初值，v-model变量值要与单选框的value值统一 -->
                <p>
                    男:<input type="radio" name="sex" value="male" v-model="sex_val">
                    女:<input type="radio" name="sex" value="female" v-model="sex_val">
                </p>
                <!--3)单一复选框-->
                <p>
                    <!-- v-model绑定的变量值与true-value|false-value统一 -->
                    <!-- true-value|false-value默认值为 true | false -->
                    是否同意条款:<input type="checkbox" name="agree" v-model="agree_val"
                                  true-value="同意" false-value="不同意">
                </p>
                <!-- 4) 多复选框 -->
                <!-- v-model绑定的变量是存放多复选框value的数组(列表) -->
                <p>
                    爱好:
                    <input type="checkbox" value="喜好男的" name="cless" v-model='more_val' />
                    <input type="checkbox" value="喜好女的" name="cless" v-model='more_val' />
                    <input type="checkbox" value="不挑" name="cless" v-model='more_val' />
                </p>
    ​
                <button type="submit">提交</button>
            </form>
        </div>
    </body>
    <script src="js/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: '',
                sex_val: 'female',  // 默认value="female"的单选框被选中
                agree_val: '不同意',
                more_val: ['喜好男的', '喜好女的']
            }
        })
    </script>

     

    条件指令

    <head>
        <meta charset="UTF-8">
        <title>文本指令</title>
        <style>
            .box {
                 200px;
                height: 100px;
                background-color: darkgray;
            }
            .pg1 { background-color: red; }
            .pg2 { background-color: yellow; }
            .pg3 { background-color: blue; }
        </style>
    </head>
    <body>
        <div id="app">
            <!-- v-if与v-show的变量值都是bool，控制着显隐 -->
            <!-- v-if隐藏时标签不被渲染，v-show隐藏时标签渲染，用display:none来隐藏 -->
            <!-- 特殊属性key是vue在内存中建立缓存的标志, 来优化渲染的效率 -->
            <p v-if="is_if" key="my_if">v-if的显示与隐藏</p>
            <p v-show="is_show" key="my_show">v-show的显示与隐藏</p>
    ​
    ​
            <p>
                <button @click="btn_click('pg1')">红</button>
                <button @click="btn_click('pg2')">黄</button>
                <button @click="btn_click('pg3')">蓝</button>
                <div class="box pg1" v-if="pg == 'pg1'" key="pg1"></div>
                <div class="box pg2" v-else-if="pg == 'pg2'" key="pg2"></div>
                <div class="box pg3" v-else key="pg3"></div>
            </p>
        </div>
    </body>
    <script src="js/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                is_if: true,
                is_show: true,
                pg: 'pg1'
            },
            methods: {
                btn_click: function (pg_num) {
                    this.pg = pg_num
                }
            }
        })
    </script>

     

    循环指令

    <head>
        <meta charset="UTF-8">
        <title>文本指令</title>
        <style>
            p {
                padding-left: 30px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <p>{{ array[1] }}</p>
            <p>{{ person['age'] }}</p>
            <div>循环array</div>
            <p v-for="v in array">{{ v }}</p>
    ​
            <div>带索引循环array</div>
            <p v-for="(v, i) in array">{{ v }}索引是{{ i }}</p>
    ​
            <div>循环dict</div>
            <p v-for="v in person">{{ v }}</p>
    ​
            <div>带key循环dict</div>
            <p v-for="(v, k) in person">{{ v }}键是{{ k }}</p>
    ​
            <div>带key带索引循环dict</div>
            <p v-for="(v, k, i) in person">{{ v }}键是{{ k }}索引是{{ i }}</p>
    ​
            <ul v-for="person in persons">
                <!--{{ person }}-->
                <li v-for="(v, k) in person">{{ k }}: {{ v }}</li>
            </ul>
    ​
        </div>
    </body>
    <script src="js/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                array: ['iso', 'android', 'winPhone'],
                person: {'name': 'Jobs', 'age': 88, 'gender': '男'},
                persons: [
                    {'name': 'Jason', 'age': 58},
                    {'name': 'Jerry', 'age': 68},
                    {'name': 'Owen', 'age': 17},
                ]
            }
        })
    </script>

     

    前端array的操作

    <script>
        arr = [1, 2, 3, 4, 5];
        console.log(arr);
        // 从index开始往后操作length长度，替换为args
        // arr.splice(index, length, args);
        // arr.splice(2, 3, 9, 9);  // [1, 2, 9, 9]  替换
        // arr.splice(2, 3);  // [1, 2]  删除
        arr.splice(2, 0, 8);  // [1, 2, 8, 3, 4, 5]  插入
        console.log(arr);
    </script>

     

    留言案例

    <body>
        <div id="app">
            <input type="text" v-model="txt">
            <button @click="send_msg">留言</button>
            <ul>
                <li v-for="(msg, i) in msg_arr" @click="delete_msg(i)">{{ msg }}</li>
            </ul>
        </div>
    </body>
    <script src="js/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                txt: '',
                // msg_arr: ['初始留言1', '初始留言2']
                msg_arr: []
            },
            methods: {
                send_msg: function () {
                    // this.txt
                    // this.msg_arr
                    if (this.txt) {
                        this.msg_arr.push(this.txt);
                        this.txt = ''
                    }
                },
                delete_msg: function (index) {
                    this.msg_arr.splice(index, 1)
                }
            }
        })
    </script>

     

     
  • 相关阅读:
    JSON.parse()和JSON.stringify()（转载）
    Bootstrap 栅格系统(转载)
    基于Java的WebSocket推送【转载】
    VirtualBox中的虚拟机要如何设置，才能够上网
    String类和StringBuffer类的区别
    split命令参数及用法详解
    linux du小练习
    内部类（innerclasses）、匿名对象
    构造器、方法的重载、方法的重写
    继承、封装、多态、抽象、接口
  • 原文地址：https://www.cnblogs.com/tangda/p/10862133.html
Copyright © 2011-2022 走看看