Vue2简介

最新推荐文章于 2024-09-19 17:06:04 发布

iLuis12138

最新推荐文章于 2024-09-19 17:06:04 发布

阅读量495

点赞数

分类专栏：前端学习文章标签：前端 javascript vue

本文链接：https://blog.csdn.net/iLuis/article/details/128465031

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

特点

是一个Js框架，有简化Dom操作，响应式的数据驱动，页面会根据数据自动生成

DOM

浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。所以，DOM可以理解成网页的编程接口。DOM有自己的国际标准，目前的通用版本是DOM 3，DOM 4。JS最常见的作用就是操作DOM，同时也是最常见的DOM操作语言。DOM可以理解为节点，也可以理解为API。

起步导包

开发版本（完整版本，有提示）

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

生产版本（压缩简化版本）

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

声明式渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello, Vue</title>
</head>
<body>
    <p id="app">
        <!-- 大括号是差值表达式，作用是数据和页面结构关联起来 -->
        <!-- 使用两个大括号的部分会被data中同名数据替换，被Vue实例命中的元素的子元素也会同样可以被渲染 -->
        {{ message }}
        <span>
            {{ school.name }}
            {{ school.mobile }}
        </span>
        {{campus[0]}}
        {{campus[1]}}
        {{campus[2]}}
    </p>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>


    <script>
        // new了一个Vue实例，挂载id选择器为app的元素 
        var app = new Vue({
            // el挂载点,定位#ID选择器，也可以使用.类选择器和标签选择器，一般开发只会使用id选择器。
            // 只能命中双标签元素，且不能命中body/head等元素
            el:"#app",
            // data内包含的是实例中使用到的数据
            data:{
                // 文本类型文件
                message: " Hello 这是小黑！ ",
                // 测试复杂类型
                school:{
                    name:"刘",
                    mobile:"123456",
                },
                campus:["选择1","选择2","选择3"],
            }
        })


    </script>
</body>
</html>