【vue 1】第一个vue程序

最新推荐文章于 2022-07-31 05:04:14 发布

诗若颜

最新推荐文章于 2022-07-31 05:04:14 发布

阅读量145

点赞数

分类专栏： Vue 文章标签： vue js html javascript

本文链接：https://blog.csdn.net/qq_44718582/article/details/115363221

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Vue.js

什么是vue？

是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

简单来说，vue是一个前端框架。

vue有什么用？

随着vue的使用越来越多，大家不管是否学过vue，总是，听见一个耳熟能详的字样”前后端分离“。在众多的网页中，元素标签和数据是混杂在一起的，并没有明显的区分。而vue的出现，提出了”前后端分离“这样的思想，简单来说，数据的视图层，和数据层是有明显划分的。

如何使用vue？

我使用的工具：Idea

1.在idea上，建一个html页面

2.引入cdn(百度一下，可以搜出很多)

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js" >
</script>

3.第一个程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    引入cdn-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js" ></script>
</head>
<body>

<div id="app">
//输出数据
{{message}}
    
</div>


</body>
<script>
    var vm = new Vue({
        // 绑定元素
        el: "#app",
        // 数据
        data:{
            message: "hello,vue!" //以key-value的形式保存数据
        }
    });
</script>
</html>

运行结果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TUQGnJTf-1617201735422)(D:\文件夹\MarkDown\photos\image-20210331221732365.png)]$

使用v-bind:title标签

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    引入cdn-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js" ></script>
</head>
<body>

<div id="app">
   <span v-bind:title="message">
       6666666666
   </span>
</div>


</body>
<script>
    var vm = new Vue({
        // 绑定元素
        el: "#app",
        // 数据
        data:{
            message: "hello,vue!" //以key-value的形式保存数据
        }
    });
</script>
</html>

用在这个标签绑定的元素，鼠标放在上面，会出现文字，运行结果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Km3W8EkT-1617201735426)(D:\文件夹\MarkDown\photos\image-20210331222557036.png)]$

诗若颜

关注

0
点赞
踩
0

收藏

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

Vue.js什么是vue？是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。简单来说，vue是一个前端框架。vue有什么用？随着vue的使用越来越多，大家不管是否学过vue，总是，听见一个耳熟能详的字样”前后端分离“。在众多的网页中，元素标签和数据是混杂在一起的，并没有明显的区分。而vue的出现，提出了”前后端分离“这样的思想，简单来说，数据的视图层，和数据层是有明显划分的。如何使用vue？我使用的工具：Idea1.在idea上，建一个ht
复制链接

扫一扫