Vue基础day01总结

最新推荐文章于 2024-10-06 10:50:00 发布

爱学习的小兰同学

最新推荐文章于 2024-10-06 10:50:00 发布

阅读量161

点赞数

分类专栏： # Vue 文章标签：常用指令分支循环 MVVM

本文链接：https://blog.csdn.net/pilgrim_121/article/details/113924637

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1 指令

v-model: 表单控件上创建双向绑定

在这里插入图片描述

v-on: 绑定事件监听器

//无参数（默认带有参数：事件对象$even）
v-on:click="handle";
//一个参数
v-on:click="handle('ok')"
//一个参数，一个事件对象
v-on:click="handle('ok', $event)"

v-text: 将数据填充到标签中

//msg是data中的一个变量，保存数据
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

v-bind: 用来响应地更新 HTML 属性

<div id="app">
<a href="http://www.baidu.com">百度</a>
    <a v-bind:href="address">百度</a>
    <a :href="address">百度</a>
</div>

<script src="./vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            address: 'https://blog.csdn.net/',
        },
        methods: {
        }
    });
</script>

（1）绑定对象

<div v-bind:class="{active: isActive,bgc: isBgc}">
  测试样式
</div>
<button v-on:click='handle'>切换</button>

<style>
   .active {
       border: 1px solid red;
       width: 100px;
       height: 100px;
   }  
   .bgc {
       background-color: orange;
   }
</style>

let app = new Vue({
 el: '#app',
    data: {
        isActive: true,
        isBgc: true

    },
    methods: {
        handle: function() {
            // 控制isActive和isBgc的值在true和false之间进行切换
            this.isActive = !this.isActive;
            this.isBgc = !this.isBgc;
        }
    }
});

（2）绑定数组

<div v-bind:class="[activeClass,bgcClass]">
 测试样式
</div>
<button v-on:click='handle'>切换</button>

let app = new Vue({
   el: '#app',
    data: {
        activeClass: 'active',
        bgcClass: 'bgc'

    },
    methods: {
        handle: function() {
            this.activeClass = '';
            this.bgcClass = '';
        }
    }
});

在这里插入图片描述

绑定对象和绑定数组的区别
绑定对象的时候: 对象的属性即要渲染的类名,对象的属性值对应的是 data 中的数据
绑定数组的时候数组里面存的是data 中的数据

（3）绑定style

<div v-bind:style="{ color: activeColor, fontSize: fontSize }">
   测试样式
</div>

let app = new Vue({
   el: '#app',
    data: {
        styleObject: {
            activeColor: 'green',
            fontSize: "30px"
        }
    }
});

或者写为：

<div v-bind:style="[styleObj1, styleObj2]">
 测试样式
</div>

let app = new Vue({
    el: '#app',
     data: {
         styleObj1: {
             color: 'green'
         },
         styleObj2: {
             fontSize: "30px"
         }
     }
 });

这两种写法都是一样的效果：
在这里插入图片描述

案例：简易计算器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>

    <div id="compute" cloak>
        <div>
            <div>
                <label for="A">数值A:</label>
                <input type="text" id="A" v-model="A">
            </div>
            <div>
                <label for="B">数值B:</label>
                <input type="text" id="B" v-model="B">
            </div>
            <div>
                <button v-on:click="handle">计算</button>
                <label for="">结果:</label>
                <span v-text="sum"></span>
            </div>

        </div>
    </div>

    <script src="./vue.js"></script>
    <script>
        var v = new Vue({
            //el 指定元素 id 是 compute 的元素
            el: '#compute',
            //data 里面存储的是数据
            data: {
                A: '',
                B: '',
                sum: ''
            },
            methods: {
                handle: function() {
                    this.sum = parseInt(this.A) + parseInt(this.B);

                }
            }
        });
    </script>
</body>

</html>

2 分支

v-if
v-else-if
v-else

<div id="app">
    <div v-if='score>=90'>优秀</div>
    <div v-else-if='score<90&&score>=80'>良好</div>
    <div v-else-if='score<80&&score>60'>一般</div>
    <div v-else>不及格</div>

</div>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            score: 70,
        },
    });
</script>
<!--页面显示：一般-->

v-show

<div id="app">
    <!--flag为flase时，div的style为display:none-->
   <div v-show='flag'>测试v-show</div>
    <button v-on:click='handle'>点击</button>

</div>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
    /* v-show的原理：控制元素样式是否显示 display:none */
    var vm = new Vue({
        el: '#app',
        data: {
            flag: false
        },
        methods: {
            handle: function() {
                this.flag = !this.flag;
            }
        }
    });
</script>

在这里插入图片描述

PS:v-if与v-show

v-if:控制元素是否渲染到页面
v-show:控制元素是否显示（已经渲染到了页面）

3 循环

（1）遍历数组

<li v-for='item in list'>{{item}}</li>
<li v-for='(item,index) in list'>{{item}} + '---' +{{index}}</li>
<li :key='item.id' v-for='(item,index) in list'>{{item}} + '---' {{index}}</li>

<div id="app">
    <div>水果列表1</div>
    <ul>
        <li v-for='item in fruits'>{{item}}</li>

    </ul>

    <div>水果列表2</div>
    <ul>
        <li v-for='(item, index) in fruits'>{{item + '---' + index}}</li>
    </ul>

    <div>大学列表</div>
    <ul>
        <!-- key的作用：帮助Vue区分不同的元素，从而提高性能 -->
        <li :key='item.id' v-for='(item, index) in universities'>{{item.name + '---' + index}}</li>
    </ul>
</div>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            fruits: ['apple', 'orange', 'banana'],
            universities: [{
                id: 1,
                name: '西安大学',
                city: '西安'
            }, {
                id: 2,
                name: '北京大学',
                city: '北京'
            }, {
                id: 3,
                name: '四川大学',
                city: '四川'
            }]
        }
    });
</script>

在这里插入图片描述

（2）遍历对象

<div v-for='(value, key, index) in object'></div>

<div id="app">
  <div v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
  
  var vm = new Vue({
    el: '#app',
    data: {
      obj: {
        uname: 'zhangsan',
        age: 13,
        gender: 'female'
      }
    }
  });
</script>