Vue 基础

最新推荐文章于 2023-03-29 15:42:01 发布

小王的进阶之路

最新推荐文章于 2023-03-29 15:42:01 发布

阅读量103

点赞数

分类专栏：前端 Vue 文章标签： vue vue.js

本文链接：https://blog.csdn.net/qq_43712409/article/details/112239829

版权

前端同时被 2 个专栏收录

56 篇文章 0 订阅

订阅专栏

Vue

13 篇文章 0 订阅

订阅专栏

1. Vue 官方文档

Vue 官方文档链接

2. Vue 简介

JavaScript框架
简化 DOM 操作
响应式数据驱动

2. 第一个 Vue 程序

导入开发版本的 Vue.js
创建 Vue 实例对象，设置 el 属性和 data 属性
使用简介的模板语法把数据渲染到页面上

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

</html>

3. el 挂载点

el 是用来设置 Vue 实例挂载（管理）的元素。

Vue 会管理 el 选项命中的元素及其内部的后代元素。
可以使用其他选择器，例如类选择器、标签选择器等，但是建议使用ID选择器。
可以使用其他双标签，但是不能使用 HTML 和 body

4. data 数据对象

Vue 中用到的数据定义在 data 中
data 中可以写复杂类型的数据
渲染复杂类型数据时，遵守 js 的语法即可

<!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">
        {{ message }}
        <h2>{{ subject.name }} {{ subject.version }}</h2>
        <ul>
            <li>
                {{ basics[0] }}
            </li>
            <li>
                {{ basics[1] }}
            </li>
            <li>
                {{ basics[2] }}
            </li>
        </ul>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: 'Hello Vue!',
                subject: {
                    name: "Vue",
                    version: "2"
                },
                basics: ["HTML", "CSS", "JavaScript"]
            }
        })
    </script>
</body>

</html>

小王的进阶之路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 基础

1. Vue 官方文档Vue 官方文档链接2. 第一个 Vue 程序导入开发版本的 Vue.js创建 Vue 实例对象，设置 el 属性和 data 属性使用简介的模板语法把数据渲染到页面上<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini
复制链接

扫一扫

专栏目录