Vue介绍

  • Vue 是一套构建用户界面的渐进式前端框架。
  • 渐进式框架：渐进式框架，就是用你想用或者能用的功能特性，你不想用的部分功能可以先不用。
  • 只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。
  • 通过尽可能简单的 API 来实现响应数据的绑定和组合的视图组件。
  • 特点：
    • 易用：在有 HTML CSS JavaScript 的基础上，快速上手。
    • 灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
    • 性能：20kb min+gzip 运行大小、超快虚拟 DOM、最省心的优化。

使用步骤

  1. 引入vue,js文件

  2. 编写脚本

    1. 创建Vue对象

      let vue = new Vue({
    //选项列表
});

    2. 编写选项列表

      • el选项：用于指定此选项所在的Vue对象，解析的模板区域。
      • data选项：用于保存当前Vue对象中的数据，在视图中声明的变量需要在此处赋值。
      • methods 选项：用于定义方法。方法可以直接通过对象名调用，this 代表当前 Vue 对象。

    3. 渲染视图

      • 在视图部分获取脚本部分的数据

        格式：{{变量名}}

  3. 代码示例

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="div">
        {{msg}}
    </div>
</body>
<!-- 引入vue.js -->
<script src="vuejs/vue.js"></script>
<script>
    //创建vue对象
    new Vue({
        //指定此vue对象解析的模板区域
        el: "#div",
        //定义属性
        data: {
            msg: "呵呵呵"
        },
        //定义函数
        methods: {
            //展示一下函数编写的格式
            func: function () {
                alert("来玩啊");
            }
        }
    });

</script>

</html>

Vue常用指令

操作文本

  • v-html：将指定的的属性展示到标签中，并且会解析html标签。

    代码示例

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="div">
        <!-- vue普通文本插值表达式 -->
        <div>{{msg}}</div>
        <!-- 绑定v-html执行 -->
        <div v-html="msg"></div>
    </div>
</body>
<script src="vuejs/vue.js"></script>
<script>
    //创建vue对象
    new Vue({
        //指定此vue管理的模本区域
        el: "#div",
        //定义属性
        data: {
            msg: "<b>鲁班七号</b>"
        }
    });
</script>

</html>
操作属性

  • v-bind：为HTML标签的属性设置属性值。

    代码示例：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<div id="div">
    <!-- 创建一个百度a链接 -->
    <!-- 普通写法 -->
    <a v-bind:href="url">百度</a>
    <!-- 简写 -->
    <a :href="url">百度</a>
</div>

<body>
</body>
<script src="vuejs/vue.js"></script>
<script>
    //创建vue对象
    new Vue({
        //指定此vue对象解析的模板区域
        el: "#div",
        //定义属性
        data: {
            url: "https://www.baidu.com"
        }
    });
</script>

</html>
条件渲染

  • v-if、v-else-if、v-else、v-show

    根据给定的条件渲染元素，条件值为true就渲染元素，false就不渲染。

  • v-if、v-else-if、v-else与v-show的区别

    v-if、v-else-if、v-else是当条件为false直接不加载元素，而v-show是当条件为false的时候，会加载元素，但是会修改元素的css样式中的display属性，将元素隐藏

  • 代码示例

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 根据对3取余来判断，如果余数为0显示div1，如果余数为1显示div2，如果余数为2显示div3 -->
<div id="div">
    <div v-if="num % 3 == 0">div1</div>
    <div v-else-if="num % 3 == 1">div2</div>
    <div v-else="num % 3 == 2">div3</div>

    <div v-show="bl">show条件渲染</div>
</div>

<body>
</body>
<script src="vuejs/vue.js"></script>
<script>
    //创建vue对象
    new Vue({
        //执行此vue解析的模板区域
        el: "#div",
        //定于属性
        data: {
            num: 1,
            bl: false
        }
    });
</script>

</html>
列表渲染

  • v-for：遍历容器的元素或对象的属性，跟增强for循环差不多用法

  • 代码示例

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<div id="div">
    <!-- 遍历数组 -->
    <ul>
        <!-- 使用v-for指令，指定要遍历的属性，遍历出来的每个元素取名为element -->
        <li v-for="element of arr">
            <!-- 使用插值表达式，将元素渲染到页面 -->
            {{element}}
        </li>
    </ul>
    <hr>
    <!-- 遍历对象 -->
    <ul>
        <li v-for="value of student">
            {{value}}
        </li>
    </ul>
</div>


<body>
</body>
<script src="vuejs/vue.js"></script>
<script>
    //创建vue对象
    new Vue({
        //指定此vue对象解析的模板区域
        el: "#div",
        //定义属性
        data: {
            //数组
            arr: ["不知火舞", "上官婉儿", "娜可露露"],
            //对象
            student: {
                name: "韩信",
                age: 21
            }
        }
    });
</script>

</html>
事件绑定

  • v-on：为HTML标签绑定事件

    简写方式：@

  • 代码示例

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="div">
        <!--方法名加不加括号都可以-->
        <!--普通方式-->
        <button v-on:click="func">按钮1</button>  
        <!--简写方法-->
        <button @click="func()">按钮1</button>
    </div>
</body>
<script src="vuejs/vue.js"></script>
<script>
    //创建vue对象
    new Vue({
        //指定此vue对象解析的模板区域
        el: "#div",
        //定义函数
        methods: {
            func: function (obj) {
                alert("hehehe");
            }
        }
    });
</script>

</html>
表单双向绑定

  • 双向数据绑定

    更新 data 数据，页面中的数据也会更新。

    更新页面数据，data 数据也会更新。

  • v-model

  • 代码示例

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="div">
        <form action="">
            <!-- 
                使用v-model指令，将表单元素与vue中定义的属性进行绑定。
                当表单元素中的数据发生变化，data中的属性也会变化，反之亦然 
            -->
            姓名：<input type="text" v-model="username">
            年龄：<input type="text" v-model="age">
        </form>
    </div>

</body>
<script src="vuejs/vue.js"></script>
<script>
    //创建vue对象
    new Vue({
        //指定此vue对象解析的模板区域
        el: "#div",
        //定义属性
        data: {
            username: "橘右京",
            age: 36
        }
    });
</script>

</html>
# html
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue