Hello World 项目起步

{{}}：模板，用来进行数据绑定显示在页面中。

el：挂载DOM元素，id为itany，则是"#itany"，class为itany，则是".itany"

vue实例不能挂载到HTML和body上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" charset="utf-8" src="../js/vue.js"></script>
</head>
<body>
    <div id="itany">{{message}}</div>
    <script type="text/javascript">
        Vue.config.devtools = true;
        Vue.config.productionTip = false;
        new Vue({
            el:'#itany',
            data:{
                message:"Hello World"
            }
        });
    </script>
</body>
</html>

若script标签在HTML上，则需要

window.onload=function(){
    new Vue({
        ...
    });
}

Vue.config.devtools = true
Vue.config.productionTip = false

以上两行代码为Vue的全局配置

Vue.config.devtools = true ：默认为true，配置是否允许vue-devtools检查代码，生产环境中需要设置false。

Vue.config.productionTip = false ：阻止Vue启动时生成生产消息

Hello World 项目起步

悦读