VUE 入门学习 | 北漂的我

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>