前端系列-Vue01

AIains

已于 2023-10-18 17:03:57 修改

阅读量37

点赞数

分类专栏：前端文章标签：前端

于 2023-10-17 08:49:21 首次发布

本文链接：https://blog.csdn.net/aiains/article/details/133747214

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

官网：介绍 — Vue.js

一、Vue介绍

引入方式：

在body标签中引入<script src="路径"></script>

先引入Vue文件，然后在下面添加<script></script>书写Vue代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识Vue</title>
</head>
<body>
    <div id="app">
        <!-- 在数据进行展示的时候，将key值放在双层大括号中，对应的value值会被解析出来 -->
        {{ message }}
    </div>
    <!-- 引入Vue框架文件 -->
    <script src="./Vue/vue.js"></script>
    <script>
        // 创建一个Vue实例对象
        var app = new Vue({
            // el是监听的标签对象
            el: '#app',
            // data是存放的数据，采用key-value的方式进行数据保存
            data: {
                message: 'Hello Vue!',
            }
        })
    </script>
</body>
</html>


上述代码运行结果如下：
Hello Vue!

二、Vue语法

1、监听标签对象的两种方式

方式1：采用el方式

<body>
    <div id="app">
        {{a}}
    </div>
    <!-- 引入Vue框架文件 -->
    <script src="./Vue/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                a: 18
            }
        })
    </script>
</body>

方式2：采用$mount

<body>
    <div id="app">
        {{a}}
    </div>
    <!-- 引入Vue框架文件 -->
    <script src="./Vue/vue.js"></script>
    <script>
        var app = new Vue({
            data: {
                a: 18
            }
        }).$mount('#app')
    </script>
</body>

2、数据绑定（标签中的内容）

双花括号是js语法环境的代码，里面可以写一些简单的js代码，不支持switch、for循环、while循环、if else判断语句等复杂的js代码。

双花括号可以根据data里面的key值，解析出对应的value值。

方法1：插值表达式

<body>
    <div id="app">
        {{ message }}   <br>
        {{ name }}  <br>
        {{a}}-----{{b}} <br>
        {{a+b}}
        <p>
            a={{a}}
        </p>
        <!-- 在双大括号中写简单的js代码 -->
        <p> a > b 是真的吗？{{a > b ? '真' : '假' }}</p>
        <p> a > b 是真的吗？{{a > b ? p1 : p2 }}</p>
    </div>

    <script src="./Vue/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                name: '李四',
                a: 18,
                b:12,
                p1:'真',
                p2:'假'
            }
        })
    </script>
</body>




代码运行结果如下：
Hello Vue!
李四
18-----12
30
a=18
a > b 是真的吗？真
a > b 是真的吗？真

方法2：采用V-的形式

v-html = "key值"：可以识别里面的标签

v-text = "key值"：识别不了里面的标签

说明：V指令等号后面的引号中具有js环境

<body>
    <div id="app">
        <div v-html = "message"></div>
        <div v-html = "'标签<strong>你好</strong>'"></div>
        <div v-text = "message"></div>
        <div v-text = "'标签<strong>你好</strong>'"></div>
        <div>{{message}}</div>
    </div>

    <script src="./Vue/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: '这是一个strong标签<strong>你好</strong>',
            }
        })
    </script>
</body>


上述代码运行结果如下：
这是一个strong标签你好
标签你好
这是一个strong标签<strong>你好</strong>
标签<strong>你好</strong>
这是一个strong标签<strong>你好</strong>

3、属性绑定

1、属性src                v-bind:可简写为 :

        v-bind:src="js语法环境"

        :src="js语法环境"

<body>
    <div id="app">
      <!-- 原本写法 -->
        <img src="./imgs/002.jpg" alt="">
      <!-- 通过获取data中的变量 -->
        <img v-bind:src="pic" alt="">
      <!-- 通过字符串 -->
        <img v-bind:src="'./imgs/002.jpg'" alt="">
      <!-- 简写形式 -->
        <img :src="pic" alt="">
    </div>

    <script src="./Vue/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                pic:'./imgs/002.jpg'
            }
        })
    </script>
</body>

2、属性sytle

<body>
    <div id="app">
        <!-- 最初形式 -->
        <p style="width: 100px; height: 100px; background-color: pink;"></p>
        <!-- 形式2：通过字符串 -->
        <p :style="'width: 100px; height: 100px; background-color: pink;'"></p>
        <!-- 形式3：通过data中的值 -->
        <p :style="sty1"></p>
        <!-- 形式4：通过添加对象（大括号表示对象） -->
        <p :style="{width: '100px', height: '100px', backgroundColor: 'pink'}"></p>
        <!-- 形式5：通过添加对象（大括号表示对象） -->
        <p :style="sty2"></p>
    </div>

    <script src="./Vue/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                // 字符串的形式
                sty1:'width: 100px; height: 100px; background-color: pink;',
                // 对象的形式
                sty2:{width: '100px', height: '100px', backgroundColor: 'pink'}
            }
        })
    </script>
</body>

3、属性class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性绑定</title>
    <style>
        .cl2{
            width: 100px;
            height: 100px;
            background-color: rgb(197, 121, 121);
        }
    </style>
</head>
<body>
    <div id="app">
        <p class="cl2"></p>
        <!-- 方式1：变量形式 -->
        <p :class="cl"></p>
        <!-- 方式2：字符串形式 -->
        <p :class="'cl2'"></p>
        <!-- 使用{}对象，如果冒号后面为true则cl2赋值给class;否则cl2不赋值给class -->
        <p :class="{cl2:true}">用cl2</p>
        <!-- 将cl3赋值给class -->
        <p :class="{cl2:false,cl3:true}">不用cl2</p>

        <p :class="{cl2:bl,cl3:bl}">用cl2</p>
        
        <p :class="aa">用对象</p>
    </div>

    <script src="./Vue/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                cl: 'cl2',
                aa: {cl2:true},
                bl: true
            }
        })
    </script>
</body>
</html>