Vue学习:基本代码、事件修饰符、class/style样式、v-for 循环、v-if/v-show/

Merbng · 简书 · · 2019-05-14 15:41

正文

插值表达式和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>

事件修饰符

使用 .stop 阻止事件冒泡

<div class="inner" @click="div1Handler">
            <input type="button" value="按钮" @click.stop="btnHandler">
</div>

使用 .prevent 阻止默认事件

<div class="inner" @click="div1Handler">
            <a href="http://www.baidu.com" @click.stop.prevent="linkClick">打开百度</a>
</div>

使用 .capture 实现捕获触发事件的机制，就是谁有该事件修饰符，就先触发谁

<div class="inner" @click.capture="div1Handler">
            <input type="button" value="戳他" @click="btnHandler">
</div>

.self 实现只有点击当前元素的时候，才会触发事件处理函数

<div class="inner" @click.self="div1Handler">
            <input type="button" value="戳他" @click="btnHandler">
</div>

.once 只触发一次事件处理函数

<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

v-bind 只能实现数据的单向绑定，从M自动绑定到V，无法实现数据的双向绑定
使用 v-model 可以实现表单元素和Mode中数据的双向数据绑定
注意： v-model 只能运用在表单元素中
input( radio,text,address,email) select checkbox textarea

<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']">这是内容啊</h1>
在数组中使用三元表达式
<h1 :class="['thin','italic',flag?'active':'']">测试内容测试内容测试内容测试内容</h1>
在数组中使用对象代替三元表达式，提高代码可读性

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

在class使用v-bind 绑定对象的时候，对象的属性是类名

 <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 循环

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>

v-for循环对象数组

<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>

v-for循环对象

<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>

v-for迭代数字

    <p v-for="i in 5">第{{i}}次</p>
</div>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            msg: '这是内容啊',
        },
        methods: {}
    })
</script>

v-for中key属性的使用

<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-if 和 v-show 的使用

Vue学习:基本代码、事件修饰符、class/style样式、v-for 循环、v-if/v-show/

正文

插值表达式和v-text

事件修饰符

v-model

class样式的使用

style样式的使用

请到「今天看啥」查看全文