创建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输出信息的更多相关文章
- 判断js对象是否拥有某一个属性的js代码
js对象是否拥有某一个属性的判断方法有很多. 本文分享一个简单的方法,如下: <script> /** * 判断js对象是否具有某属性 * by www.jbxue.com */ var ...
- javascript函数，构造函数。js对象和json的区别。js中this指向问题
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块.好处:在出现大量程序相同的时候,可以封装为一个function,这样只用调用一次,就能执行很多语句.(1)语法:函数就是包裹在花括号中的代码 ...
- 三 vue学习三 从读懂一个Vue项目开始
源码地址: https://github.com/liufeiSAP/vue2-manage 我们的目录结构: 目录/文件 说明 build 项目构建(webpack)相关代码. config ...
- 使用Vue脚手架(vue-cli)从零搭建一个vue项目(包含vue项目结构展示)
注:在搭建项目之前,请先安装一些全局的工具(如:node,vue-cli等) node安装:去node官网(https://nodejs.org/en/)下载并安装node即可,安装node以后就可以 ...
- VUE -- 如何快速的写出一个Vue的icon组件？
伴随着Vue的诞生,它似乎就被人寄予厚望,不仅仅是因为其轻量级的MVVM设计方式,而且其实现了组件化开发模式,所以越来越多的人会拿Vue和AngularJS.React Native做比较.具体关于它 ...
- js对象转换为json格式时，js对象属性中有值为null和undefined注意事项
当属性值为null时: 当属性值为undefined时: 只有当属性值为未定义时, js对象转换成json格式时会忽略该属性.
- vue.js+web storm安装及第一个vue.js
小白还是自己写一遍吧 1.下载node.js https://nodejs.org/en/download/ 2.安装淘宝镜像(类似于阿里云的maven中央仓库镜像) 安装时间有点长 安装命令:npm ...
- 自己根据js的兼容封装了一个小小的js库
var gys = function () { } //oParent父节点 //获取所有的子元素 gys.prototype.getElementChildren = function (oPare ...
- 创建一个 Vue 的实例
每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 选项:el.data.methods el: 类型: ...
- 前端框架之Vue(1)-第一个Vue实例
vue官方文档 知识储备 es6语法补充 let 使用 var 声明的变量的作用域是全局. { var a = 1; } console.info(a); 例1: var arr = []; for ...
随机推荐
- Java-idea-FindBugs字节码级别潜在bug查看
一.概述 静态分析工具承诺无需开发人员费劲就能找出代码中已有的缺陷. FindBugs 不注重样式或者格式,它试图只寻找真正的缺陷或者潜在的性能问题. FindBugs 是一个静态分析工具,它检查类或 ...
- PID参数调整的口诀
PID参数调整的口诀:参数整定找最佳,从小到大顺序查先是比例后积分,最后再把微分加曲线振荡很频繁,比例度盘要放大曲线漂浮绕大湾,比例度盘往小扳曲线偏离回复慢,积分时间往下降曲线波动周期长,积分时间再加 ...
- web项目读取classpath路径下面的文件
首先分两大类按web容器分类 一种是普通的web项目,像用Tomcat容器,特点是压缩包随着容器的启动会解压缩成一个文件夹,项目访问的时候,实际是去访问文件夹,而不是jar或者war包. 这种的无论你 ...
- Spark提交应用程序之Spark-Submit分析
1.提交应用程序 在提交应用程序的时候,用到 spark-submit 脚本.我们来看下这个脚本: if [ -z "${SPARK_HOME}" ]; then export S ...
- centos上yum安装nodeJS
更新node.js各版本yum源 Node.js v8.x安装命令 curl --silent --location https://rpm.nodesource.com/setup_8.x | ba ...
- 多口USB HUB信号延长器 USBX-M200(针对于A客户使用时很棒吧)
大家都知道A客户是不允许在设备里面出现无线的东东,但是USB的传输距离有很短.咋办呢?? 见下图 http://rextron-cn.com/product_show.asp?id=74
- 记录：EPALN Electric P8 2.4.4.8366 安装记录
系统:win7 32位 旗舰版. (原版系统 非GHOST) 第一步:解压安装. setup.exe 右击 选择 注意:把 360 百度 杀毒之类的全部关闭 第二步: 第三步: 第四步: 第五 ...
- Debian更新软件源提示There is no public key available for the following key IDs的解决方法
今天装了的debian7.0 但是更新软件源的时候出错 提示 W: There is no public key available for the following key IDs: 9D6D8F ...
- Spring—切点表达式
摘要: Spring中的AspectJ切点表达式函数 切点表达式函数就像我们的GPS导航软件.通过切点表达式函数,再配合通配符和逻辑运算符的灵活运用,我们能很好定位到我们需要织入增强的连接点上.经过上 ...
- 20145322何志威《网络对抗》Exp2 后门原理与实践
基础问题回答 1 例举你能想到的一个后门进入到你系统中的可能方式? 在网上下载盗版软件时捆绑的后门程序. 不小心进入钓鱼网站. 2 例举你知道的后门如何启动起来(win及linux)的方式? Wind ...