关于Vue的入门

最新推荐文章于 2023-05-17 19:46:30 发布

Nkrr

最新推荐文章于 2023-05-17 19:46:30 发布

阅读量152

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_47610249/article/details/108234590

版权

Vue的入门

首先学习Vue，看官网是最简单明了的入门方式，官网地址：https://cn.vuejs.org/
在学习Vue之前呢，需要咱们已了解关于 HTML、CSS 和 JavaScript 的知识，这是最基础的。

第一步，在官网上下载并安装Vue.js

在这里插入图片描述
注意：要安装开发版本的，因为开发版本含有命令行警告，生产版本就是压缩后的js库。

第二步，创建一个.html的文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门</title>
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 2.html结构 -->
    {{ mesage }}
    <div id="app">
        {{ message }}
        <br/>
        <span>{{ message }}</span>
    </div>

    <script>
        //3.创建Vue示例
        var app = new Vue({
            el:"#app",
            data:{
                message:"Hello Vue"
            }
        })
    </script>

</body>
</html>

显示效果

在这里插入图片描述

解释：
1）el 挂载点：el是用来设置Vue实例挂载的元素、Vue会管理el选项命中的元素及其内部的后代元素
2）data数据对象：Vue中用到的数据定义在data中

关于 data 的复杂类型的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>data:复杂数据类型</title>
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 2.html结构 -->
    <div id="app">
        <h2>地址：{{ addr.name }} 电话：{{ addr.mobile }}</h2>
        <ul>
            <li>{{ index[0] }}</li>
            <li>{{ index[2] }}</li>
            <li>{{ index[4] }}</li>
        </ul>
    </div>

    <script>
        //3.创建Vue示例
        var app = new Vue({
            el:"#app",
            data:{
                message:"Hello Vue",
                addr:{
                    name:"江苏",
                    mobile:"400-8888888"
                },
                index:["南京","苏州","无锡","徐州","宿迁"]
            }
        })
    </script>

</body>
</html>

显示效果

在这里插入图片描述

data 中可以写复杂类型的数据，渲染服装类型数据时，遵守js的语法就可以了。

Nkrr

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于Vue的入门

关于Vue的常用指令首先学习Vue，看官网是最简单明了的入门方式，官网地址：https://cn.vuejs.org/在学习Vue之前呢，需要咱们已了解关于 HTML、CSS 和 JavaScript 的知识，这是最基础的。
复制链接

扫一扫