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启动时生成生产消息
推荐阅读
-
Spring Boot实战之逐行释义Hello World程序
-
Spring Boot实战之逐行释义Hello World程序
-
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
-
IntelliJ IDEA 创建spring boot 的Hello World 项目(图解)
-
最快速的Android开发环境搭建ADT-Bundle及Hello World
-
typecho插件编写教程(一):Hello World
-
Kotlin开发实战之hello world
-
Android Kotlin开发实例(Hello World!)及语法详解
-
Visual studio怎么编写HELLO WORLD程序?
-
VS2010怎么新建包含两个form的HELLO WORLD项目?