要么改变世界,要么适应世界

Vue框架

2020-03-21 10:24:00
116
目录

前言

Vue 是一套用于构建用户界面的渐进式框架 ,利用Vue可以方面地经行中小型项目的快速构建, 它的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。 这里是它的官网链接

最简单的例子

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        {{ message}}
    </div>
    <!-- 导包 -->
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "hello world",
            }
        });
    </script>
</body>

</html>

一定要导包,可以下载到本地使用,也可以直接通过远程导入的方法导入,对于制作项目,推荐下载到本地,如果只是学习,直接远程导入即可,但是前提是要有网络

el挂载点

  • 作用域:el指定的标签范围,即在这个范围之下

        <div id="app">
            {{ message}}
        </div>
    
  • 选择器的类型:不限于id选择器,下面的三个都是可以的

    <body>
        <div class="app">
            {{ message}}
        </div>
        <!-- 导包 -->
        <!-- 开发环境版本,包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                // 注意看这里
                el: ".app",
                data: {
                    message: "你好",
                }
            });
        </script>
    </body>
    
    <body>
        <div>
            {{ message}}
        </div>
        <!-- 导包 -->
        <!-- 开发环境版本,包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                // 注意看这里
                el: "div",
                data: {
                    message: "你好",
                }
            });
        </script>
    </body>
    
    <body>
        <!-- 注意看这里 -->
        <p id="app">
            {{ message}}
        </p>
        <!-- 导包 -->
        <!-- 开发环境版本,包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                // 注意看这里
                el: "#app",
                data: {
                    message: "你好",
                }
            });
        </script>
    </body>
    

    值得注意的是,el不能够挂载到单标签和body标签中,建议使用id选择器和挂载到div中。

date数据对象

  • Vue中用到的数据定义在data中

  • data中的数据类型不限于字符串,还可以是复杂的数据类型,如对象,数组

  • 渲染复杂类型数据时,遵守js的语法即可,如

    data: {
        message: "你好",
        student: {
            name: "YaleXin",
            age: 20,
            address: "earth",
        },
        test_array: [1, 2, 3, 4, 5, 6],
    }
    

    引用时加上双大括号即可

    <div id="app">
        {{ message }}
        {{student.name}}
        <ol>
            <li>{{test_array[0]}}</li>
            <li>{{test_array[2]}}</li>
        </ol>
    </div>
    

历史评论
开始评论