mybj JavaScript 2019-01-04

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

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

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

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

<div class="bg">
    Hello World!
    {{msg}}
</div>

Javascript内这样写

new Vue({
    el:'.bg',
    data: {
        msg: 'Hello Vue!'
    }
})

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

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

<div class="bg">
    Hello World!
    {{msg}}
</div>
<div class="bg">
    {{msg}}
</div>

如下图展示：

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

<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都显示，怎么办呢？很简单，我们用一个div把它们两个元素套起来就可以了。

<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>

结果如下：

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

总结

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

1. 本站所有免费资源来源于用户上传和网络，因此不包含技术服务请大家谅解！如有侵权请邮件联系客服！
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性，免费资源仅供下载学习之用！如有链接无法下载、失效，请联系客服处理！
3. 您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容资源！如用于商业或者非法用途，与本站无关，一切后果请用户自负！
4. 如果您也有好的资源或技术教程，您可以投稿发布，成功分享后有站币奖励和额外收入！
5. 加入前端开发QQ群：565733884，我们大家一起来交流技术!
码云笔记 » [Vue教程]第一个vue的应用