Vuejs第二篇（Vue基础语法）

2024-01-23 14:27:34

一、内容概述：

插值操作
绑定属性
计算属性
事件监听
条件判断
循环遍历
阶段案例
v-model

二、插值操作-mustache语法（掌握）

如何将data中的文本数据，插入到HTML中呢？

我们已经学习过了，可以通过Mustache（{{}}）语法（也就是双大括号）
Mustache：胡子/胡须

mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{message}}</h2>
    <h2>{{message}},welcome you</h2>
    <!--mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式-->
    <h2>{{firstName + lastName}}</h2>
    <h2>{{firstName + '   ' + lastName}}</h2>
    <h2>{{firstName}} {{lastName}}</h2>
    <h2>{{counter * 2}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const vue = new Vue({
    el: '#app',
    data: {
      message: 'hello Vue!',
      firstName: '你好',
      lastName: 'Vue',
      counter: 100
    }
  });
</script>

</body>
</html>

结果：

三、插值操作-其他指令使用（掌握）

v-once //值只能使用一次

v-html //解析带有标签的字符串

结果：

v-text //展示文本不解析标签，且会覆盖标签中原有的文本

结果：

v-pre //原封不动的显示文本（不解析）

结果：

v-cloak //未解析的情况不会显示（解决闪烁问题）

了解即可

四、v-bind的基本使用（掌握）

前面我们学习的指令主要作用是将值插入到我们模板的内容当中
但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定

比如动态绑定a元素的href属性
比如动态绑定img元素的src属性

这个时候，我们可以使用v-bind指令：
作用：动态绑定属性
缩写：：
预期：any（with argument）| Object（without argument）
参数：attrOrProp（optional）

下面，我们就来具体学习v-bind的使用

v-bind基础

v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值（这个学到组件时再介绍）
在开发中，有哪些属性需要动态进行绑定呢？

还是有很多的，比如图片的链接src、网站的链接href、动态绑定一些类、样式等等

比如通过Vue实例中的data绑定元素的src和href，代码如下：

语法糖简写：（用：代替）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--错误的做法：这里不可以使用mustache语法-->
    <!--<img src="{{imgURL}}" alt="">-->
    <!--正确的做法:使用v-bind指令-->
    <img :src="imgURL" alt="">
    <a :href="aHref">百度一下</a>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      imgURL:'https://img2.baidu.com/it/u=2464877933,1986620259&fm=26&fmt=auto',
      aHref:'http://www.baidu.com'
    }
  });
</script>   
</body>
</html>

结果：

五、v-bind动态绑定class【对象语法】（掌握）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
    <style>
        .active{
            color:red;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--<h2 :class="active">{{message}}</h2>-->
        <!--<h2 :class="{类名1:true,类名2:boolean}">{{message}}</h2>-->
        <h2 :class="{active:isActive,line:isLine}">{{message}}</h2>
        <button v-on:click="btnClick">按钮</button>//按钮来控制类是否绑定
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好啊',
          isActive:true,
          isLine:false
        },
        methods:{
          btnClick:function () {
            this.isActive=!this.isActive
          }
        }
      });
    </script>
</body>
</html>

不需要通过vue动态改变的class可以直接写出来：

<h2 class="title" :class="{active:isActive,line:isLine}">{{message}}</h2>//不需要通过vue动态改变的class可以直接写出来

改进：

总结：

六、v-bind绑定class【数组语法】（掌握）

通过上述案例，我们知道绑定class有两种方式：

对象语法
数组语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
    <style>
        .active{
            color:red;
        }
    </style>
</head>
<body>
<div id="app">
    <h2 class="title" :class="['active','line']">{{message}}</h2>
    <h2 class="title" :class="[active,line]">{{message}}</h2>
    <h2 class="title" :class="getClasses()">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      active:'aa',
      line:'bb'
    },
    methods:{
      getClasses:function () {
        return [this.active,this.line]
      }
    }
  });
</script>
</body>
</html>

待更新。。。

码农公寓