vue篇：标签渲染、事件处理...

  • style和class使用
  • 条件渲染
  • 列表渲染之购物车显示不显示
  • v-for遍历数字、数组、对象
  • key值解释和数组的检测与更新
  • 事件处理之过滤案例
  • 事件处理之事件修饰符
  • 数据的双向绑定

1 style和class使用

复制代码
  • 1
  • 2
  • 3
  • 4
# 属性指令控制style和class

# class 可以等于 ：字符串，数组（用的多），对象
# style 可以等于 ：字符串，数组，对象（用的多）

复制代码
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <style>
        .red {
            background-color: red;
            font-size: 80px;
        }

        .green {
            background-color: green;
            font-size: 40px;
        }

        .yellow-back {
            background-color: yellow;
        }

        .pink-back {
            background-color: pink;
        }

        .size-40 {
            font-size: 40px;
        }

        .size-100 {
            font-size: 100px;
        }

    </style>
</head>
<body>
<div id="app">
    <h1>class的使用</h1>
    <button @click="handleClick">点我变色</button>
    <hr>
    <div :class="class_obj">
        lqz is handsome!!!
    </div>
    <h1>style的使用</h1>

    <button @click="handleClick2">点我变色</button>
    <hr>
    <div :style="style_obj">
        lqz is handsome2222!!!
    </div>

</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            // class_str: 'yellow-back size-100',
            // class_array: ['yellow-back',],
            // class_obj: {'pink-back': true, 'size-40': false},
            // style_str:'font-size: 60px;background-color: aqua'
            // style_array: [{'font-size': '90px'}, {backgroundColor: 'aqua'}]
            style_obj: {'font-size': '90px', backgroundColor: 'aqua'}
        },
        methods: {
            handleClick() {
                // this.class_obj = 'green'
                // 点击让字体变大---数组
                // this.class_array.push('size-100')
                // 对象
                this.class_obj['size-40'] = true
            },
            handleClick2() {
                this.style_obj['backgroundColor'] = 'pink'
            }
        }
    })


</script>
</html>

2 条件渲染

复制代码
  • 1
# v-if  v-else-if  v-else

复制代码
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <style>

    </style>
</head>
<body>
<div id="app">
    您的成绩是：
    <p v-if="score>90">优秀</p>
    <p v-else-if="score>=60 && score<=90">良好</p>
    <p v-else>不及格</p>

</div>
</body>
<script>
    var vm=new Vue({
        el: '#app',
        data: {
            score:80

        },
    })


</script>
</html>

3 列表渲染之购物车显示不显示

复制代码
  • 1
# for 循环  ---》v-for='item in 数组/对象/数字'

复制代码
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>购物车</h1>
            <button @click="handleClick" class="btn btn-danger">点击模拟加载数据</button>
            <div v-if="good_list.length>0">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>商品名</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in good_list">
                        <td>{{item.name}}</td>
                        <td>{{item.price}}</td>
                        <td>{{item.count}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div v-else style="margin-top: 30px">
                购物车空空如也
            </div>
        </div>


    </div>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            good_list: []
        },
        methods: {
            handleClick() {
                this.good_list = [
                    {name: '跑车', count: 2, price: 888888},
                    {name: '面包', count: 5, price: 3},
                    {name: '钢笔', count: 7, price: 8},
                    {name: '铅笔', count: 6, price: 2}
                ]
            }
        }
    })


</script>
</html>

4 v-for遍历数字，数组，对象

复制代码
  • 1
  • 2
  • 3
  • 4
  • 5
# v-for 可以循环什么？
	数字
    字符串
    数组
    对象

复制代码
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>循环变量之数字</h1>
            <p v-for="item in number">数字：{{item}}</p>
            <h1>循环变量之字符串</h1>
            <p v-for="item in name">字符串循环：{{item}}</p>
            <h1>循环变量之数组--》注意循环时，索引是第二个变量</h1>
            <p v-for="(item,index) in good_list">数组循环：第{{index}}个是{{item}}</p>

            <h1>循环变量之对象---》循环key和value，第二个变量是key</h1>
            <p v-for="(value,key) in obj">对象循环：key值是：{{key}},value值是：{{value}}</p>

        </div>


    </div>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            // 数字
            number:10,
            // 字符串
            name:'lqz is handsome',
            //数组
            good_list: [
                    {name: '跑车', count: 2, price: 888888},
                    {name: '面包', count: 5, price: 3},
                    {name: '钢笔', count: 7, price: 8},
                    {name: '铅笔', count: 6, price: 2}
                ],
            // 对象
            obj:{name:'lqz',age:19,gender:'男'}
        },
    })


</script>
</html>

5 key值解释和数组的检测与更新

5.1 v-for 循环，key值的解释

复制代码
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
# 别人写v-for循环，在标签内部会有一个key属性：
	-element-ui：饿了么团队开源的vue的ui组件库  
    -<el-carousel-item v-for="item in 4" :key="item">
    vue中使用的是虚拟DOM，会和原生的DOM进行比较，然后进行数据的更新，提高数据的刷新速度（虚拟DOM用了diff算法）
    在v-for循环数组、对象时，建议在控件/组件/标签写1个key属性，【属性值唯一】
    页面更新之后，会加速DOM的替换（渲染）
    :key="变量"
# 提高页面刷新速度

# 如果要加key属性，一定要设置成唯一的
# 要么干脆不加

5.2 数组的检测与更新

复制代码
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
#  有时候，我们用一些数组，对象的方法更新数组或对象时，发现页面没有变化
#使用如下方式更新即可
    
    
handleClick5() {
                // vm.$set(vm.obj,'xx','uu')   这个可以
                Vue.set(vm.obj, 'gender', '未知')
                alert('ss')
            }

代码

复制代码
    复制代码
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    var vm2 = new Vue({
    el: '#app02',
    data: {
        score:75,
        student_array:[],
        obj:{name:'matao',age:15}

    },
    methods: {
        point1(){
            this.student_array= [
            {name: '跑车', count: 2, price: 888888},
            {name: '面包', count: 5, price: 3},
            {name: '钢笔', count: 7, price: 8},
            {name: '铅笔', count: 6, price: 2}
        ]
        },
        point2(){
            this.student_array.push({name:'水杯',count:5,price:874})
        },
        point3(){this.student_array.pop()},
        point4(){
            res = this.student_array.concat([
                {name:'纸巾',count:5,price:874},
                {name:'口罩',count:5,price:874}
            ])
            this.student_array = res
        },
        point5(){
            this.obj["name"] = 'jason'
        },
        point6(){
            Vue.set(vm2.obj,'age',100)
        }
    }
})

    复制代码

      6 事件处理之过滤案例

      复制代码
      • 1
      • 2
      • 3
      • 4
      # input 标签的事件
	-change  ：只要内容发生变化，就会触发
    -blur   ：失去焦点，会触发
    -input  ：只要输入内容，就触发

      复制代码
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39
      • 40
      • 41
      • 42
      • 43
      • 44
      • 45
      • 46
      • 47
      • 48
      • 49
      • 50
      • 51
      • 52
      • 53
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>v-model</h1>
            用户名1--input事件：<input type="text" v-model="name1" @input="handleInput"> --->{{name1}}
            <br>
            用户名2--change事件：<input type="text" v-model="name2" @change="handleChange"> --->{{name2}}
            <br>
            用户名3--blur事件：<input type="text" v-model="name3" @blur="handleBlur"> --->{{name3}}

        </div>


    </div>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name1: '',
            name2: '',
            name3: ''
        },
        methods:{
            handleInput(){
                console.log(this.name1)
            },
            handleChange(){
                console.log(this.name2)
            },
            handleBlur(){
                console.log(this.name3)
            }


        }
    })


</script>
</html>

      复制代码
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39
      • 40
      • 41
      • 42
      • 43
      • 44
      • 45
      • 46
      • 47
      • 48
      • 49
      • 50
      • 51
      • 52
      • 53
      • 54
      • 55
      • 56
      • 57
      • 58
      • 59
      • 60
      • 61
      • 62
      • 63
      • 64
      • 65
      • 66
      • 67
      • 68
      • 69
      • 70
      • 71
      • 72
      • 73
      • 74
      • 75
      • 76
      • 77
      • 78
      • 79
      • 80
      • 81
      • 82
      • 83
      • 84
      • 85
      • 86
      • 87
      • 88
      • 89
      • 90
      • 91
      • 92
      • 93
      • 94
      • 95
      • 96
      • 97
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>过滤案例</h1>
            <input type="text" v-model="myText" @input="handleInput">
            <hr>
            <p v-for="item in newList">{{item}}</p>

        </div>


    </div>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            myText: '',
            dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
            newList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],

        },
        methods: {
            handleInput() {

                this.newList = this.dataList.filter(item=> {
                    // 只要myText在数组中某个字符串中有，就留着，没有就不留
                    // if (item.indexOf(this.myText) >= 0) {
                    //     return true
                    // } else {
                    //     return false
                    // }
                    return item.indexOf(this.myText) >= 0

                })

            },


        }
    })


    // 补充1：数组的过滤方法
    // var l =['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
    // var ll=l.filter(function (item){
    //
    //     return false
    // })
    // console.log(ll)


    // 补充2：判断子字符串是否在字符串中    大于等于0，表示子字符串在字符串中
    // var name='qq'
    // var s='lqz is nb'
    // var res=s.indexOf(name)
    // console.log(res)


    // 补充3 ，es6的箭头函数
    // var l = ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
    // var ll = l.filter(item => {
    //     return false
    // })
    // console.log(ll)

    // var obj = {
    //     'f': function (item) {
    //         console.log(item)
    //     }
    // }

    // var obj = {
    //     'f': item => 99
    //
    // }
    // obj['f']('999')
    //
    //
    // var f = function (item, key) {
    // }
    // var f1 = (item, key) => {
    // }
</script>
</html>

      7 事件处理之事件修饰符

      复制代码
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      
#  修饰事件
.stop	只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡）
.self	只处理自己的事件，子控件冒泡的事件不处理
.prevent	阻止a链接的跳转
.once	事件只会触发一次（适用于抽奖页面）

      复制代码
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39
      • 40
      • 41
      • 42
      • 43
      • 44
      • 45
      • 46
      • 47
      • 48
      • 49
      • 50
      • 51
      • 52
      • 53
      • 54
      • 55
      • 56
      • 57
      • 58
      • 59
      • 60
      • 61
      • 62
      • 63
      • 64
      • 65
      • 66
      • 67
      • 68
      • 69
      • 70
      • 71
      • 72
      • 73
      • 74
      • 75
      • 76
      • 77
      • 78
      • 79
      • 80
      • 81
      • 82
      • 83
      • 84
      • 85
      • 86
      • 87
      • 88
      • 89
      • 90
      • 91
      • 92
      • 93
      • 94
      • 95
      • 96
      • 97
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>事件修饰符</h1>
            <ul @click.self="handleUl">
                <li @click="handelLi">第一行</li>
                <li>第二行</li>
            </ul>

            <hr>
            <a href="http://www.baidu.com" @click.prevent="handlePrevent">点我看美女</a>
            <hr>
            <button @click.once="handleOnce">秒杀</button>

        </div>


    </div>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            handelLi() {
                alert('li被点了')
            },
            handleUl() {
                alert('ul被点了')
            },
            handlePrevent(){
                console.log('a标签被点了，不跳转')
                // 跳转
                location.href='http://www.cnblogs.com'
            },
            handleOnce(){
                console.log('秒到了')
            }

        }
    })


    // 补充1：数组的过滤方法
    // var l =['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
    // var ll=l.filter(function (item){
    //
    //     return false
    // })
    // console.log(ll)


    // 补充2：判断子字符串是否在字符串中    大于等于0，表示子字符串在字符串中
    // var name='qq'
    // var s='lqz is nb'
    // var res=s.indexOf(name)
    // console.log(res)


    // 补充3 ，es6的箭头函数
    // var l = ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
    // var ll = l.filter(item => {
    //     return false
    // })
    // console.log(ll)

    // var obj = {
    //     'f': function (item) {
    //         console.log(item)
    //     }
    // }

    // var obj = {
    //     'f': item => 99
    //
    // }
    // obj['f']('999')
    //
    //
    // var f = function (item, key) {
    // }
    // var f1 = (item, key) => {
    // }
</script>
</html>

      8 数据的双向绑定

      复制代码
      • 1
      # input 标签的内容发生变化，js变量就发生变化，js变量变化，内容就变

      复制代码
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>v-model</h1>
            用户名：<input type="text" v-model="name"> --->{{name}}

        </div>


    </div>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: ''
        },
    })


</script>
</html>
      posted @   马氵寿  阅读(405)  评论(0)  编辑  收藏  举报
      相关博文：
      ·  vue篇：按键修饰符、checkbox与radio、购物车、v-model进阶、vue生命周期、vue前后端交互
      ·  vue篇：mvvm、插值、文本、事件、属性指令
      ·  vue---style和class使用，条件渲染，列表渲染之购物车显示不显示，v-for遍历数字，数组，对象，key值解释和数组的检测与更新，事件处理之过滤案例和事件修饰符
      ·  style和class使用,条件渲染,列表渲染之购物车显示不显示,v-for遍历数字，数组，对象,key值解释和数组的检测与更新,事件处理之过滤案例,事件处理之事件修饰符,数据的双向绑定
      ·  vue day02
      阅读排行：
      · 震惊！C++程序真的从main开始吗？99%的程序员都答错了
      · 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
      · 单元测试从入门到精通
      · 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
      · 上周热点回顾（3.3-3.9）
      点击右上角即可分享
      微信分享提示
      AI IDE Trae
      评论
      收藏
      关注
      推荐
      深色
      回顶
      展开