web前端开发个人技术博客
当前位置: JavaScript > [Vue教程]第一个vue的应用

[Vue教程]第一个vue的应用

2019-01-04 分类:JavaScript 作者:码云 阅读(5577)

如何使用vue框架?在webstorm中新建一个index.html文件,然后引入vue库,一种方式就是如果项目是在内网使用,我们就可以吧vue下载下来,然后引入到文件中。另外一种方式就是我推荐大家使用BootCDN这个网站。如下图:

[Vue教程]第一个vue的应用

然后我们在搜索框内输入vue去搜索这个vue库,最好不要去使用bate版本,因为可能会出现问题,所以我们使用正式版本,选择压缩的版本vue.min.js。如果大家只是使用这个库而不是去调试的话,那就直接使用min这个版本,还可以节约这个网络的响应时间,这样我们就引进了这个vue库,保存。

压缩的版本vue

如何使用到vue库呢?我在body内写了一个div定义它的class,然后我们在<script>中new一个Vue对象,绑定到元素上,这里的绑定方式有很多种,我用的是class类绑定方法。

1
2
3
4
<div class="bg">
    Hello World!
    {{msg}}
</div>

Javascript内这样写

1
2
3
4
5
6
new Vue({
    el:'.bg',
    data: {
        msg: 'Hello Vue!'
    }
})

Data就是我们给vue对象所使用到的页面上的一些数据,比如上面我们定义的msg,然后用双括号{{}}把msg包裹住在页面上渲染。

data在页面上展示数据

如上图在页面上显示结果,表示绑定成功。
有的小伙伴想问了假如在页面上两个msg绑定在不同的div上,会如何显示呢?

1
2
3
4
5
6
7
<div class="bg">
    Hello World!
    {{msg}}
</div>
<div class="bg">
    {{msg}}
</div>

如下图展示:

msg绑定在不同的div上

可以看出优先绑定页面上的第一个元素,如果出现这种情况,建议大家怎么办呢?最好是给他一个id,这样就不会出现重复或者是冲突的情况了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
<div class="bg">
    Hello World!
    {{msg}}
</div>
<div class="bg" id="app">
    {{msg}}
</div>
<script>
    new Vue({
        el:'#app',
        data: {
            msg: 'Hello Vue!'
        }
    })
</script>
</body>

这样的话就把msg绑定到下面的元素上来了。

msg绑定到下面的元素

如果我们想要页面上的两个msg都显示,怎么办呢?很简单,我们用一个div把它们两个元素套起来就可以了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
<div id="app">
    <div class="bg">
        Hello World!
        {{msg}}
    </div>
    <div class="bg">
        {{msg}}
    </div>
</div>
<script>
    new Vue({
        el:'#app',
        data: {
            msg: 'Hello Vue!'
        }
    })
</script>
</body>

结果如下:

页面上的两个msg都显示

通过vue例子中我们学到了:
1、如何输出(Demo)Hello Vue1
2、Vue.js 的CDN的使用
3、在线Coding快速验证调试我们的应用

总结

Vue.js优点:方便集成,灵活小巧,语法清晰,便捷强大。

「本文为原创文章,版权归码云笔记所有,欢迎分享本文,转载请保留出处!」

赞(5) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
5

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 2 条评论 - [Vue教程]第一个vue的应用

  1. 心如止水 Linux Chrome 62.0.3202.84

    入门先从最简单的开始,弄懂简单例子再进阶

  2. HDdudu Linux Chrome 62.0.3202.84

    先学好基础,再进阶

博客简介

码云笔记: mybj123.com,一个关注Web前端开发技术的博客,主要记录和总结前端工作中常用的知识及我的生活。
更多博客详情请看关于博客

精彩评论