码云实时更新学习demo地址:https://gitee.com/dxl96/vuexuexi

VUE基础篇(插值操作)

1、v-bind

在标签上绑定属性值,不可以用Mustache语法,也就是{{ }},必须使用v-bind来绑定属性,v-bind的格式是 v-bind:标签属性名
或者语法糖形式 :标签属性名
代码中展示了 v-bind:srcv-bind:hrefv-bind:class
—对于 v-bind:src 、v-bind:href来说 可以绑定data中的变量,也可以绑定方法,方法返回的值就是绑定的值
—对于 v-bind:class 来说:
1)可以绑定对象,可以绑定对象的形式,{属性1:boolean,属性2:boolean …}这种形式,我们通过动态绑定这些布尔值,如果布尔值是true的话,说明就会绑定到这个对象的属性名,如果是false的话就不会绑定这个对象的属性名。
举例:比如这里,{active: isActive,line: isLine} 假设active的值(isActive)是true,那么class这个标签属性就有active这个值,也就是class=“active”;假设 active的值和line的值都为true,那么就是class=“active line”;如果其中active的值为true,line的值为false,那么class=“active”
2)还可以写成绑定数组的形式,这种形式[‘active’,‘line’]
3)还可以绑定方法,方法返回对象或者数组,也就是上两种形式的数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue动态绑定</title>
  <style>
    img {
      height: 60px;
    }

    .active {
      color: red;
    }
  </style>
</head>
<body>

<div id="app">
  <!--  ■错误写法,不能再标签上使用mustache语法,不能够识别-->
  <!--  <img src="{{imgURL}}">-->

  <!--  ■正确做法,使用v-bind指令,来进行值的动态绑定,也就是值的替换-->
  <img v-bind:src="imgURL"/>
  <a v-bind:href="aHref">百度一下</a>
  <!--  ■也可以绑定方法,方法返回一个需要的值-->
  <img v-bind:src="getImgUrl()"/>
  <a v-bind:href="getHref()">百度一下</a>

  <!--  ■v-bind指令语法糖的写法,用 : 替代 v-bind: -->
  <img :src="imgURL"/>
  <a :href="aHref">百度一下</a>

  <!------------------------------------------------------------------------------------------------------------------------------->


  <!--  ■绑定数据可以和原标签属性值共存,vue会解析合并绑定的值和原来的值,假如原标签的属性值只能是一个,比如href这种,要是绑定语法和原语法都存在,则原标签生效-->
  
  <!--  ■v-bind:class绑定可以绑定对象的形式,{属性1:boolean,属性2:boolean ...}这种形式,我们通过动态绑定这些布尔值,如果布尔值是true的话,说明就会绑定到这个对象的属性名,
          如果是false的话就不会绑定这个对象的属性名
          举例:比如这里,{active: isActive,line: isLine} 假设active的值(isActive)是true,那么class这个标签属性就有active这个值,也就是class=“active”;假设
          active的值和line的值都为true,那么就是class=“active line”;如果其中active的值为true,line的值为false,那么class=“active”
  -->
  <h2 v-bind:class="{active: isActive,line: isLine}">{{message}}</h2>

  <!--  ■将上面这种直接绑定对象的方式,还可以改成绑定方法,方法中返回这个对象即可-->
  <h2 v-bind:class="getClass()">{{message}}</h2>

  <!--  ■还可以写成绑定数组的形式,同样的,也可以像上面绑定方法,方法返回数组-->
  <!--  绑定数据和原来的属性数据可以同时使用,它会将绑定的和原来的进行解析合并,比如这里,就会是class=“title active line”-->
  <h2 class="title" v-bind:class="['active','line']">{{message}}</h2>

  <!--  ■将上面这种直接绑定数组的方式,还可以改成绑定方法,方法中返回这个数组即可-->
  <h2 class="title" v-bind:class="getClass2()">{{message}}</h2>
  
  <!--  ■监听点击事件-->
  <button v-on:click="btnClick">点击一下</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "vue app",
      imgURL: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1590919517&di=f0e49723a8334e9576244d9736cf81a5&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg",
      aHref: "http://www.baidu.com",
      isActive: true,
      isLine: true
    },
    methods: {
      btnClick: function () {
        // 当点按钮时切换isActive的值取反,也就是true和false交替赋值
        // 当该值改变时,也就意味着上面绑定了这个值的h2标签的class属性交替存在去除active这个值
        // 因为上面css已经对class含有active的标签进行设置字体颜色为红色,所以我们在点击按钮时就能够看到h2标签里的内容红色和黑色之间交替变换
        this.isActive = !this.isActive
      },
      getClass: function () {
        return {active: this.isActive, line: this.isLine};
      },
      getClass2:function(){
        return ['active','line']
      },
      getHref: function () {
        return "http://www.baidu.com"
      },
      getImgUrl: function () {
        return "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1590919517&di=f0e49723a8334e9576244d9736cf81a5&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg"
      }
    }
  });
</script>
</body>
</html>

效果
在这里插入图片描述

2、动态绑定style

v-bind:style 或者 语法糖形式 :style
可以绑定数据的方式有:
1)对象
2)数组
3)方法(方法返回对象或者数组)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>动态绑定style</title>
</head>
<body>

<div id="app">

  <!--  ■v-bind:style 绑定style ,以绑定对象的形式进行绑定 {key(属性名):value(属性值)} 属性名的形式可以是小驼峰的形式,也可以是原名称以-分割的形式-->
  <h2 :style="{fontSize:finalSize,color:color}">{{message}}</h2>
  <!--  ■如果是直接进行赋值的话,必须以单引号包裹起来,否则它会认为这是个变量去解析,然后就会找不到这个变量,就像这里的 50px 用单引号包裹表示他是一个值-->
  <h2 :style="{fontSize:'50px'}">{{message}}</h2>
  <h2 :style="{fontSize:finalNum+'px',backgroundColor:'red'}">{{message}}</h2>
  <!--  ■也可以调用方法的方式返回对象的形式进行绑定-->
  <h2 :style="getStyle()">{{message}}</h2>
  <!--  ■也可以是数组的形式来进行数据绑定-->
  <h2 :style="[backGround,fontSize]">{{message}}</h2>
  <!--  ■也可以调用方法的方式返回数组的形式进行绑定-->
  <h2 :style="getStyle2()">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "vue app",
      finalSize: "50px",
      finalNum: 50,
      color: 'red',
      backGround: {backgroundColor: "red"},
      fontSize: {fontSize: "50px"},
    },
    methods: {
      getStyle: function () {
        return {fontSize: this.finalSize}
      },
      getStyle2: function () {
        return [{backgroundColor: "red"},{fontSize: "50px"}]
      }
    }
  });
</script>
</body>
</html>

效果
在这里插入图片描述

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐