欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Hello World 项目起步

程序员文章站 2022-05-08 13:33:34
...

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

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.οnlοad=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启动时生成生产消息