首页 > 其他分享> 文章详细

Vuejs第二篇（Vue基础语法）

2021-09-19 17:03:58 阅读：171 来源： 互联网

标签：Vue Vuejs bind app 绑定语法 message 第二篇

一、内容概述：

插值操作
绑定属性
计算属性
事件监听
条件判断
循环遍历
阶段案例
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>

在这里插入图片描述
待更新。。。

标签：Vue,Vuejs,bind,app,绑定,语法,message,第二篇
来源： https://blog.csdn.net/m0_57249797/article/details/120380822

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vuejs第二篇（Vue基础语法）

一、内容概述：

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

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

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

v-bind基础

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

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