<!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输出信息的更多相关文章

  1. 判断js对象是否拥有某一个属性的js代码

    js对象是否拥有某一个属性的判断方法有很多. 本文分享一个简单的方法,如下: <script> /** * 判断js对象是否具有某属性 * by www.jbxue.com */ var ...

  2. javascript函数，构造函数。js对象和json的区别。js中this指向问题

    函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块.好处:在出现大量程序相同的时候,可以封装为一个function,这样只用调用一次,就能执行很多语句.(1)语法:函数就是包裹在花括号中的代码 ...

  3. 三 vue学习三 从读懂一个Vue项目开始

    源码地址:     https://github.com/liufeiSAP/vue2-manage 我们的目录结构: 目录/文件 说明 build 项目构建(webpack)相关代码. config ...

  4. 使用Vue脚手架(vue-cli)从零搭建一个vue项目(包含vue项目结构展示)

    注:在搭建项目之前,请先安装一些全局的工具(如:node,vue-cli等) node安装:去node官网(https://nodejs.org/en/)下载并安装node即可,安装node以后就可以 ...

  5. VUE -- 如何快速的写出一个Vue的icon组件？

    伴随着Vue的诞生,它似乎就被人寄予厚望,不仅仅是因为其轻量级的MVVM设计方式,而且其实现了组件化开发模式,所以越来越多的人会拿Vue和AngularJS.React Native做比较.具体关于它 ...

  6. js对象转换为json格式时，js对象属性中有值为null和undefined注意事项

    当属性值为null时: 当属性值为undefined时: 只有当属性值为未定义时, js对象转换成json格式时会忽略该属性.

  7. vue.js+web storm安装及第一个vue.js

    小白还是自己写一遍吧 1.下载node.js https://nodejs.org/en/download/ 2.安装淘宝镜像(类似于阿里云的maven中央仓库镜像) 安装时间有点长 安装命令:npm ...

  8. 自己根据js的兼容封装了一个小小的js库

    var gys = function () { } //oParent父节点 //获取所有的子元素 gys.prototype.getElementChildren = function (oPare ...

  9. 创建一个 Vue 的实例

    每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({         // 选项 }) 选项:el.data.methods el: 类型: ...

  10. 前端框架之Vue(1)-第一个Vue实例

    vue官方文档 知识储备 es6语法补充 let 使用 var 声明的变量的作用域是全局. { var a = 1; } console.info(a); 例1: var arr = []; for ...

随机推荐

  1. Python知识总汇

    一.python基础 python基础 python编码问题 逻辑运算 二.python数据类型 二.python数据类型 三.IO(文件处理) 三.IO(文件处理) 四.函数 函数基础 名称空间与作 ...

  2. Flask wtform组件

    Wtforms简介 WTForms是一个支持多个web框架的form组件 主要能够帮助我们生成html标签 对数据进行验证 安装 pip install wtforms Wtforms的使用 这里借助 ...

  3. 转载 io多路复用

    作者:ZingpLiu 出处:http://www.cnblogs.com/zingp/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接. 回到 ...

  4. Shader工具

    1. RenderMonkey 2. NVIDIA FX Composer 2.5

  5. django高级之点赞、文章评论及上传文件

    目录: 点赞 文章评论 上传文件 保留页面条件 一.点赞 1.所用技术: django model F查询 js应用:$(function () {}); 为文件加载完成执行ready() 方法.等同 ...

  6. HDU3579：Hello Kiki（解一元线性同余方程组）

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=3579 题目解析:求一元线性同余方程组的最小解X,需要注意的是如果X等于0,需要加上方程组通解的整数区间lc ...

  7. Selenium之firefox浏览器的启动问题及解决

    启动firefox报错如下: rg.openqa.selenium.firefox.NotConnectedException: Unable to connect to host 127.0.0.1 ...

  8. chrome 关闭安全模式

    chrome.exe --disable-web-security --user-data-dir

  9. 生成TPC-H数据集

    下载tpc-h tool 版本有点老,2.14.3,够用了. 在解压的文件夹下面cd到dbgen下,找到makefile.suite. ~/tpch_2_14_3$ cd dbgen~/tpch_2_ ...

  10. pyDay14

    内容来自廖雪峰的官方网站. 1.map的优点:省代码 + 提高可读性. 2.map 运用示例: >>> def f(x): ... return x * x ... >> ...