首页 > 代码库 > 创建Vue.js对象：我的第一个Vue.js输出信息

创建Vue.js对象：我的第一个Vue.js输出信息

2024-09-24 17:38:02   214人阅读

 

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Vue第一条信息</title>
<script src=http://www.mamicode.com/”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输出信息


联系
我们