创建Vue.js对象：我的第一个Vue.js输出信息
Posted 简庆旺的博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了创建Vue.js对象：我的第一个Vue.js输出信息相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Vue第一条信息</title>
<script src=”js/vue.js”></script>
</head>
<body>
<div id=”app”>
<p>{{ message }}</p>
</div><script>
new Vue({
el: ‘#app’,
data: {
message: ‘Hello Vue.js!’
}
})
</script>
</body>
</html>
new Vue（）相当于新建了一个Vue对象。
el: ‘#app’,是选择器
data: {
message: ‘Hello Vue.js!‘
}
是数据，如果要增加数据，在data添加就可以：
data: {
message: ‘Hello Vue.js!’,
name:’简庆旺’
}
我们输出下：
<div id=”app”>
<p>{{ message }}</p>
<p>{{name}}</p>
</div>
得到：
Vue.js
创建多个vue.js对象：
<script>
new Vue({
el: ‘#app‘,
data: {
message: ‘Hello Vue.js!‘,
name:‘简庆旺‘
}
})
new Vue({
el:‘#school‘,
data:{
school_name:‘永定一中‘,
address:‘福建省龙岩市永定区‘,
type:‘高中‘
}
})
</script>
我们来看看两个绑定的div:
<div id=”app”>
<p>{{ message }}</p>
<p>{{name}}</p>
</div>
<div id=”school”>
<p>{{ school_name }}</p>
<p>{{ address }}</p>
<p>{{ type }}</p>
</div>
输出结果：
vue.js新建多个对象
第一个绑定的 对象el: ‘#app’对应<div id=”app”></div>，第二个绑定的 对象el:’#school’对应<div id=”school”></div>。好了，到这里我们总结下，每次新建一个js对象都是 new Vue（），不同的只是el对应绑定的模块。
本人博客地址：创建Vue.js对象：我的第一个Vue.js输出信息 原文：http://www.wangtuizhijia.com/archives/196
以上是关于创建Vue.js对象：我的第一个Vue.js输出信息的主要内容，如果未能解决你的问题，请参考以下文章