第一个vue程序

永困子菌

已于 2022-02-14 13:05:37 修改

阅读量407

点赞数

分类专栏： Vue学习文章标签： vue.js intellij-idea 前端

于 2022-01-22 13:21:27 首次发布

本文链接：https://blog.csdn.net/radmdzjtx/article/details/122558418

版权

Vue学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

因为是学后端的，所以我用的是IDEA来开发的
这里放出官网想要详细学习的可以上官网查看
首先，如果想创建vue文件，那么必须在idea里安装插件，点开file-settings-plugins-marketplace中搜索vue
在这里插入图片描述
然后点击安装即可

之后在创建项目的时候就会出现vue component，就说明你您安装成功了。(如果没有,则到file-settings-plugins-editor-file and code templates中找到vue图标然后点击“-”旁边的复制即可）
在这里插入图片描述
那么这一些列操作完了以后就开始我们的代码时间

首先要知道，用vue是需要导包的，这里放出从vue官网粘贴下来的两个包提供使用

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

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

我们创建好html页面，然后在html页面中导入包，上面俩个都行
我们创建完以后，首先开始最简单的代码，去了解vue的基本构造。
这里放出来我的vue代码，代码写完以后，会在html页面显示hello，vue！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
    var vm =new Vue({
       el:"#app",
       data:{
           message:"hello,vue!"
       }

    });
</script>
</body>
</html>

那么从这个代码里我们就可以学到好多
1.显示在html页面的是message的值
通过{{}}符号来进行调用

<div id="app">
    {{message}}
</div>

这个数值是可以在html页面随便改变的

2.这里就是vue的总体部分
通过创建vm对象来调用vue
el绑定的是div的id（也就是你要显示的窗口的id值）
data里面写数据，message为定义的数据名称。之后在div内完成调用即可

<script>
    var vm =new Vue({
       el:"#app",
       data:{
           message:"hello,vue!"
       }

    });
</script>

最后在加一个v-bind标签

<span v-bind:title="message">
</span>

相当于将title和message保持一致

永困子菌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第一个vue程序

因为是学后端的，所以我用的是IDEA来开发的这里放出官网想要详细学习的可以上官网查看首先，如果想创建vue文件，那么必须在idea里安装插件，点开file-settings-plugins-marketplace中搜索vue然后点击安装即可之后在创建项目的时候就会出现vue component，就说明你您安装成功了。(如果没有,则到file-settings-plugins-editor-file and code templates中找到vue图标然后点击“-”旁边的复制即可）那么这一些列操
复制链接

扫一扫