VUE初步学习打卡（1）

初学VUE，VUE数据绑定和一些简单操作

　　1、v-on 绑定事件 v-on:click()绑定点击事件 缩写为@click()

　　     插值表达式{{}}：{{1+1}}计算，{{‘a’}}字符，{{99}}数字，{{[1,2]}}数组，{{ {a:1} }}键值对，里面的括号外面要加空格

             v-bind:绑定属性的值，简写为:，若要绑定多个class的话 里面的参数可以为数组

            date.$el:获取挂载的元素

            date.$nextTick():当异步操作完之后执行

            v-if ,v-if-else,v-else:这三个可以连在一起用相当于if,if else,else 这是让元素隐藏的，操作dom元素，直接移除和添加dom元素

            v-show:这个也是控制元素的显示与隐藏的，这个值操作dom元素的style根据css让元素显示与隐藏，若我们经常需要显示和隐藏的话推荐用v-show，因为v-if操作dom很伤资源。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <!-- 导入包 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   
    <style>
        .red {
            background-color: red;
        }

        .yellow {
            background-color: yellow;
        }
          .blue {
            background-color: blue;
        }
        .width {
        width:100px;
        height:100px;
        }
       
    </style>
</head>
    
<body>
    <div id="dates">
       <!-- 
          v-On绑定事件 可以简写为@
            -->
        <input type="button" @click="GetColor()" value="初始学" />

        <!-- 插值表达式  若class有多个的话 我们可以用数组来表示-->
        <!--v-bind绑定属性的时候 可以简写为 ：  -->
        <h1 v-bind:title="value" :class="vueclass[classsindex]">{{value}} </h1>
    
        <!--  v-if 就是判断是否显示当前元素 这个是直接操作dao元素 移除 -->
        <div class="width red" v-if="isShow==0" ></div>
        <!-- v-else-if -->
         <div class="width yellow" v-else-if="isShow==1"></div>
        <!-- v-else -->
         <div class="width blue" v-else></div>
        <!-- v-show也是控制元素的显示隐藏 这里是控制dom元素style的显示隐藏 -->
        <div  class="width cyan"></div>
    </div>
</body>
     <script>
         var date = new Vue({
             el: "#dates",
             data: {
                 value: "初学VUE",
                 vueclass:['yellow','red'],
                 classsindex:0,
                 getcount:0,
                 showValue:'显示',
                 isShow:0
             },
             methods:{
                 GetColor(){
                 //当方法写在methods里面的时候，this获取的是当前的VUE对象，若不是的话，卸载VUE里面的话获取的是当前window对象
                this.classsindex=++this.getcount%2;
         console.log( this.classsindex);
         //date.$el获取当前挂载的对象也就是获取#dates
         console.log(date.$el);
         //由于vue数据绑定是异步的，所以当我们直接获取挂载对象的时候可能获取到的是数据改变之前的值
         //  date.$nextTick相当于当数据全部更新后调用
         date.$nextTick(console.log(date.$el));
         }
         }
         })
    </script>
</html>
posted @ 2020-01-06 21:13  落幕无痕  阅读(337)  评论(1)  编辑  收藏  举报