<!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’,是选择器

  1. data: {
  2.     message: 'Hello Vue.js!'
  3. }

是数据，如果要增加数据，在data添加就可以：

data: {
message: ‘Hello Vue.js!’,
name:’简庆旺’
}

我们输出下：

<div id=”app”>
<p>{{ message }}</p>
<p>{{name}}</p>
</div>

得到：

Vue.js

创建多个vue.js对象：

  1. <script>
  2.     new Vue({
  3.         el: '#app',
  4.         data: {
  5.             message: 'Hello Vue.js!',
  6.             name:'简庆旺'
  7.         }
  8.     })
  9.  
  10.     new Vue({
  11.         el:'#school',
  12.         data:{
  13.             school_name:'永定一中',
  14.             address:'福建省龙岩市永定区',
  15.             type:'高中'
  16.  
  17.         }
  18.     })
  19. </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用下划线作为变量前缀和后缀指定特殊变量. - "单下划线" 开始的成员变量叫做保护变量,意思是只有类对象和子类对象自己能访问到这些变量:不能用"from xx ...

  2. 省市县三级联动的SQL

    完整版见https://jadyer.github.io/ 首先是建表语句 CREATE TABLE `t_address_province` ( `id` INT AUTO_INCREMENT PR ...

  3. 【查看】mysql 常规书写注意事项（那些坑）

    mysql 常规书写注意事项,mysql注意事项 1. 注释:  -- 后面一定要加一个空格,否则会报错 2.注释:/*! content */ 在mysql中是会执行的,但是其他数据库不会.   例 ...

  4. blockchain 区块链的开发，基于python或node js

    现在很多人用node js做区块链的开发,因为点对点并发是区块链中的难点技术之一,而node js天然的对并发支持比较好,因此比较有优势. http://ecomunsing.com/build-yo ...

  5. python多线程为什么不能利用多核cpu

    GIL 与 Python 线程的纠葛 GIL 是什么东西?它对我们的 python 程序会产生什么样的影响?我们先来看一个问题.运行下面这段 python 程序,CPU 占用率是多少? # 请勿在工作 ...

  6. 感知机PLA算法实现[转载]

    转自:https://blog.csdn.net/u010626937/article/details/72896144#commentBox 1.实现原始形式 import numpy as np ...

  7. NiFi REST API 的使用

    一.概述 为方便用户使用 NiFi 进行二次开发,NiFi 为开发者提供了 NIFI REST API. 关于 API 的详细介绍,请参见官网 NIFI REST API.这里仅给出一些注意的小细节. ...

  8. Linux查看网卡UUID另一方法

    转自:http://liaoronghui.com/linux-view-network-adapter-uuid-other-law.html 有时我们不小心将/etc/sysconfig/netw ...

  9. Spark 任务提交脚本

    说明 该脚本是根据输入起始日期-结束日期,执行从数据库拉取日期间隔数据到HDFS.日期间隔中的日期就是每一年的自然日. 日期格式可以是以下几种:2018-01-01 2018-12-31 [-][/] ...

  10. FastCGI介绍及Nginx fastcgi配置优化

    FastCGI介绍 FastCGI是从CGI发展改进而来的.传统CGI接口方式的主要缺点是性能很差,因为每次HTTP服务器遇到动态程序时都需要重新启动脚本解析器来执行解析,然后结果被返回给HTTP服务 ...