创建第一个Vue应用

引入Vue.js

下载js文件后引入

1	<script type="text/javascript" src="js/vue.js"></script>

使用CDN方法

开发环境版本

1 2	<!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

生产环境版本

1 2	<!-- 生产环境版本，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

HTML代码

<div id="app1">
    <p v-bind:style="flag?'color:blue':'color:red'">{{message}}</p>
    <input type="text" v-model="message">
    <button v-on:click="modifyColor">改变p的颜色</button>
</div>

JavaScript代码

<script type="text/javascript">
    new Vue({
        el: '#app1',
        data: {
            message: 'Hello Vue!!',
            flag: true
        },
        methods: {
            modifyColor: function () {
                if (this.flag) {
                    this.flag = false;
                } else {
                    this.flag = true;
                }
            }
        }
    })
</script>