H5^Study

Vue学习:基本代码、事件修饰符、class/style样式、v

2019-05-14  本文已影响0人  Merbng

插值表达式和v-text

v-cloak 解决闪烁问题
v-html 可以识别标签
v-bind 属性绑定机制,可以简写为 :
v-on 事件绑定机制,可以简写为@

<div id="app">
    <!--    使用v-cloak 能够解决 插值表达式闪烁的问题-->
    <p v-cloak>------------------{{msg}}========================</p>
    <h4 v-text="msg">===========</h4>
    <!--默认v-text是没有闪烁问题的,但是会覆盖原本的内容,-->
    <!--插值表达式只会替换自己的这个占位符,不会把整个元素的内容清空-->
    <div>{{msg2}}</div>
    <div v-text="msg2"></div>
    <!--v-html 可以识别标签,也是会覆盖原本的内容-->
    <div v-html="msg2">66666666666</div>
    <!--    <input type="button" value="点击啊" @click="show">-->
    <!--    <input type="button" v-bind:title="mytitle+'6666666'" value="点击啊" v-on:click="alert('哇')">-->
    <!--v-bind: 属性绑定机制,可以简写为冒号-->
    <!--Vue 中提供了v-on:事件绑定机制,可以简写为@-->
    <input type="button" :title="mytitle+'6666666'" value="点击啊" @mouseenter="show">
    <input type="button" :title="mytitle+'6666666'" value="点击啊" @click="show">
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "这是msg的内容",
            msg2: "<h1>这是一个h1</h1>",
            mytitle: "瓦解爱家居"
        },
        methods: {
            show: function () {
                alert("点了啊");
            }
        }
    });
</script>

案例:跑马灯效果

<div class="app">
    <input type="button" value="开始" @click="start"><input type="button" value="结束" @click="stop">
    <h1>{{msg}}</h1>

</div>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            msg: "联播”再上热搜 总台锐评“谈,大门敞开;打,奉陪到底”被网友大赞霸气",
            timeId: null
        },
        methods: {
            start() {
                if (this.timeId != null) return
                this.timeId = setInterval(() => {
                    this.msg = this.msg.substring(1) + this.msg.substring(0, 1)
                }, 100)
            }, stop() {
                clearInterval(this.timeId);
                this.timeId = null
            }
        }
    })
</script>

事件修饰符

<div class="inner" @click="div1Handler">
            <input type="button" value="按钮" @click.stop="btnHandler">
</div>
<div class="inner" @click="div1Handler">
            <a href="http://www.baidu.com" @click.stop.prevent="linkClick">打开百度</a>
</div>
<div class="inner" @click.capture="div1Handler">
            <input type="button" value="戳他" @click="btnHandler">
</div>
<div class="inner" @click.self="div1Handler">
            <input type="button" value="戳他" @click="btnHandler">
</div>
<div class="inner" @click.self="div1Handler">
            <a href="http://www.baidu.com" @click.once.prevent="linkClick">打开百度</a>
</div>

.stop.self 的区别:
.self只会阻止自己身上的冒泡行为的触发,并不会真正阻止冒泡行为

<div class="outer" @click="div2Handler">
        <div class="inner" @click.self="div1Handler">
            <input type="button" value="按钮" @click="btnHandler">
        </div>
    </div>
<script>
    var vm = new Vue({
        el: '#app',
        methods: {
            div1Handler() {
                console.log("这是 div1 的点击事件");
            },
            div2Handler() {
                console.log("这是 div2 的点击事件");
            },
            btnHandler() {
                console.log("这是 按钮 的点击事件");
            },
            linkClick() {
                console.log("这是 链接 的点击事件");
            }
        }
    })
</script>

v-model

<div class="app">
    <h2>{{msg}}</h2>

    <input type="text" style="width:100%" :value="msg" id="" v-model="msg">
</div>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            msg: '这是内容啊'
        },
        methods: {}
    })
</script>

案例:简易计算器

<div class="app">
    <input type="text" v-model="n1">
    <select v-model="operator">
        <option>+</option>
        <option>-</option>
        <option>*</option>
        <option>/</option>
    </select>
    <input type="text" v-model="n2">
    <input type="button" value="=" @click="calt">
    <input type="text" v-model="result">
</div>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            msg: '这是内容啊',
            n1: 0,
            operator: '+',
            n2: 0,
            result: 0
        },
        methods: {
            calt() {
                // switch (this.operator) {
                //     case "+":
                //         this.result = parseInt(this.n1) + parseInt(this.n2);
                //         break;
                //     case "-":
                //         this.result = parseInt(this.n1) - parseInt(this.n2);
                //         break;
                //     case "*":
                //         this.result = parseInt(this.n1) * parseInt(this.n2);
                //         break;
                //     case "/":
                //         this.result = parseInt(this.n1) / parseInt(this.n2);
                //         break;
                // }
                //第二种方法
                this.result = eval("parseInt(this.n1) " + this.operator + " parseInt(this.n2)")
            }
        }
    })
</script>

class样式的使用

<h1 :class="['thin','italic',{'active':flag}]">么么么么么么么木木木木木木木木木</h1>

 <h1 :class="classObj">啦啦啦啦啦啦啦啦绿绿绿绿绿绿绿绿绿绿</h1>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            msg: '这是内容啊',
            flag: true,
            classObj: {
                red: true,
                thin: true,
                italic: true,
                active: true
            }
        },
        methods: {}
    })
</script>

style样式的使用

<div class="app">
    <h1 :style="styleObj1">内容内容内容内容内容内容内容内容内容内容</h1>
    <h1 :style=[styleObj1,styleObj2]>内容内容内容内容内容内容内容内容内容内容</h1>
</div>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            msg: '这是内容啊',
            styleObj1: {color: 'red', 'font-weight': 800},
            styleObj2: {'font-style': 'italic'}
        },
        methods: {}
    })
</script>

v-for 循环

<div class="app">
    <p v-for="(item,index) in list">{{index}}==========={{item}}</p>
</div>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            msg: '这是内容啊',
            list: [1, 2, 3, 4, 5, 9, 6]
        },
        methods: {}
    })
</script>

<div class="app">
    <p v-for="(item,index) in list">=====角标index===={{index}}=====id======{{item.id}}===name===={{item.name}}</p>
</div>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            msg: '这是内容啊',
            list: [{id: 1, name: '消息'}, {id: 2, name: '嗯嗯'}, {id: 3, name: '仍然'}, {id: 4, name: '好好'}]
        },
        methods: {}
    })
</script>

<div class="app">
    <p v-for="(value,key,index) in user">{{value}}===={{key}}======={{index}}</p>
</div>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            msg: '这是内容啊',
            user: {
                id: 1, name: '我就安静', sex: '男', age: 20
            }
        },
        methods: {}
    })
</script>
    <p v-for="i in 5">第{{i}}次</p>
</div>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            msg: '这是内容啊',
        },
        methods: {}
    })
</script>
<div class="app">
    <label for="">ID
        <input type="text" v-model="id">
    </label>
    <label for="">Name
        <input type="text" v-model="name">
    </label>
    <input type="button" value="添加" @click="add">
    <p v-for="item in list" :key="item.id">
        <input type="radio">{{item.id}}======{{item.name}}
    </p>
</div>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            id: 0,
            name: '',
            msg: '这是内容啊',
            list: [{id: 1, name: '消息'}, {id: 2, name: '方法'}, {id: 3, name: '嗯嗯'}, {id: 4, name: '请求'}, {
                id: 5,
                name: '好好'
            },]
        },
        methods: {
            add() {
                // this.list.push({id: this.id, name: this.name})
                this.list.unshift({id: this.id, name: this.name})
            }
        }
    })
</script>

v-ifv-show的使用

如果元素涉及频繁的切换,最好不要用v-if
如果元素可能永远也不会被显示出来被用户看到,则推荐v-show

上一篇 下一篇

猜你喜欢

热点阅读