vue学习-1-入门案例

最新推荐文章于 2024-06-01 14:48:57 发布

ML.star

最新推荐文章于 2024-06-01 14:48:57 发布

阅读量83

点赞数

本文链接：https://blog.csdn.net/weixin_46858088/article/details/120292116

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1)第一步

创建html页面，使用vscode快捷键生成html代码 !

<!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>Document</title>
</head>
<body>
</body>
</html>

2)第二步引入vue的js文件，类似于jquery

<body>
 <script src="vue.min.js"></script>
</body>

3)第三步在html页面创建div标签,div添加id属性

    <div id="app"></div>

4)第四步编写vue代码，固定的结构

<body>
    <script>
        //创建一个vue对象
        new Vue({
            el: '#app',//绑定vue作用的范围
            data:{//定义页面中显示的数据模型
                message: 'Hello Vue!'
            }
        })
    </script>
</body>

5) 使用插值表达式

获取data里的定义值

{{名称}}

最后得出的结构

<!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>Document</title>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
    <script src="vue.min.js"></script>

    <script>
        //创建一个vue对象
        new Vue({
            el: '#app',//绑定vue作用的范围
            data:{//定义页面中显示的数据模型
                message: 'Hello Vue!'
            }
        })
    </script>
</body>
</html>

下一篇:vue学习-2-抽取代码片段_ML.star的博客-CSDN博客

ML.star

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue学习-1-入门案例

1)第一步创建html页面，使用vscode快捷键生成html代码 !<!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-wi...
复制链接

扫一扫