首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >VUE 入门学习

VUE 入门学习

作者头像
北漂的我
发布2019-05-29 11:33:26
3310
发布2019-05-29 11:33:26
举报
文章被收录于专栏:北漂的我北漂的我

为什么80%的码农都做不了架构师?>>>

vue 的开发IDE推荐 WebStorm

调试浏览器推荐 Chrome

Chrome 上推荐安装vue调试插件 vue.js devtools, 插件ID为 nhdogjmejiglipccpnnnanhbledajbpd, 可以在 https://chrome-extension-downloader.com 上使用插件ID下载

1. 在代码里可以使用 CDN 来加载 vue.js

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>

2. vue 的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bg {
            color: red;
        }
    </style>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>

<body>
<div id="app">
    <div class="bg" v-bind:id="bg1">
        hello world!
        {{msg}}
        {{count}}
        {{(count+1)*10}}
    </div>
    <div>{{msg}}</div>
    <div>{{template}}</div>
    <div v-html="template"></div>
    <a v-bind:href="url">百度</a>
    <a :href="url2">慕课网</a>
    <button v-on:click="submit">按钮</button>
    <button @click="submit">按钮2</button>
</div>

<script>
    new Vue({
        el:'#app',
        data: {
            msg: 'hello vue!',
            count: 0,
            template: '<div>hello template</div>',
            url:'http://www.baidu.com',
            url2:'http://imooc.com',
            bg1:'app-bg1'
        },
        methods:{
            submit:function () {
                this.count++;
            }
        }
    });
</script>
</body>
</html>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
内容分发网络 CDN
内容分发网络(Content Delivery Network,CDN)通过将站点内容发布至遍布全球的海量加速节点,使其用户可就近获取所需内容,避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题,有效提升下载速度、降低响应时间,提供流畅的用户体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档