Vue(四):实例化第一个Vue应用
实例化语法
var vm = new Vue({
// 选项
})
Vue 构造器中的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>{{details()}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
site: "我的第一个Vue应用",
url: "www.xxxxx.com",
alexa: "10000"
},
methods: {
details: function() {
return this.site + " - 学的既是技术,更是梦想!";
}
}
})
</script>
</body>
可以看到在 Vue 构造器中有一个el 参数,它是 DOM 元素中的 id。在上面实例中 id 为 vue_det,在 div 元素中:
<div id = "vue_det"></div>
这意味着我们接下来的改动全部在以上指定的 div 内,div 外部不受影响。
如何定义数据对象
data 用于定义属性,实例中有三个属性分别为:site、url、alexa。
methods 用于定义的函数,可以通过 return 来返回函数值。
{{ }} 用于输出对象属性和函数返回值。
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>{{details()}}</h1>
</div>
当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>Alexa : {{alexa}}</h1>
</div>
<script type="text/javascript">
// 我们的数据对象
var data = { site: "我的第一个Vue应用", url: "www.xxxxxxx.com", alexa: 10000}
var vm = new Vue({
el: '#vue_det',
data: data
})
// 它们引用相同的对象!
document.write(vm.site === data.site) // true
document.write("<br>")
// 设置属性也会影响到原始数据
vm.site = "Runoob"
document.write(data.site + "<br>") // Runoob // ……反之亦然
data.alexa = 1234
document.write(vm.alexa) // 1234
</script>
一些有用的实例属性与方法
它们都有前缀 $,以便与用户定义的属性区分开来。例如:
<script type="text/javascript">
// 我们的数据对象
var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
var vm = new Vue({
el: '#vue_det',
data: data
}) document.write(vm.$data === data) // true
document.write("<br>") // true
document.write(vm.$el === document.getElementById('vue_det')) // true
</script>
Vue(四):实例化第一个Vue应用的更多相关文章
- 一、vue:如何新建一个vue项目
比较好用的一个脚手架:https://a1029563229.gitbooks.io/vue/content/cooking-cli.html 创建一个vue项目的流程: 1.安装node,版本号必须 ...
- Vue系列——如何运行一个Vue项目
声明 本文转自:如何运行一个Vue项目 正文 一开始很多刚入手vue.js的人,会扒GitHub上的开源项目,但是发现不知如何运行GitHub上的开源项目,很尴尬.通过查阅网上教程,成功搭建好项目环境 ...
- Vue.js——2.第一个Vue程序
代码 <div id="app"> <p>{{msg}}</p> </div> <script> let vm=new ...
- vue学习笔记-初始化一个vue项目(1)
1.cnpm install -g vue-cliUsage:vue init <template-name> <project-name> 2.我们一般使用webpack模版 ...
- VUE系列一:VUE入门:搭建脚手架CLI(新建自己的一个VUE项目)
一.VUE脚手架介绍 官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架.它为现代前端工作流提供了 batteries-included 的构建设置.只需要几分 ...
- 【vue】创建一个vue前端项目,编译,发布
npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包. vue-cli: 用户生成Vue工 ...
- vue 学前班002(创建一个实例)
创建一个Vue实例 我们之前说过,Vue是数据驱动视图的,只要model(模型层)的数据改变了,Vue就会帮我们改变视图上显示的内容,不用我们自己去动手写代码更新.那么,它是怎么做到的,我们的代码要怎 ...
- Vue学习第一天:Vue.js指令系统
1. 如何使用Vue.js? 1.1 直接引入 - <script src="./statics/vue.min.js"></script> - 引入之后在 ...
- 前端框架Vue------>第一天学习、Vue学习的路径、Vue官网(1)
文章目录 1.学习目标 2.前端知识体系 2.1 前端三要素 2.2.MVVM 3.第一个Vue程序 4.Vue实例的生命周期 vue的官方文档:https://cn.vuejs.org/ 1.学习目 ...
随机推荐
- 苹果电脑Macbook怎么编辑hosts文件的方法
苹果电脑Macbook怎么编辑hosts文件的方法 https://jingyan.baidu.com/article/fec4bce2690417f2618d8b07.html 文章 ...
- umeng友盟消息推送功能集成
umeng友盟消息推送功能集成(本人使用的是eclipse开发) 1.首先请自行观看友盟消息推送集成的API文档. 观看地址如下: http://dev.umeng.com/push/android/ ...
- JAVA中的CountDownLatch、CyclicBarrier、Semaphore的简单测试
因公司需要做一个对于CountDownLatch的分享,特写了此blog. 具体细节可以参见:小结java自带的跟锁相关的一些类 在做这个分享的过程中发现了Main和junit的运行的区别,在另外一个 ...
- Jquery的html方法里包含特殊字符的处理
jqueryhtml()特殊字符 在使用jquery的html()方法时,有时候里面添加的html代码含有一些特殊字符,需要进行转义. 如下例子: inst_html = "<a st ...
- 大量原创视频教程分享(01)---XSL语法教程
首先,感谢博客园给这个平台来发布这些教程.. 这些教程都是本人亲自录制的,时间主要是2012-2014年,大概有几十部这么多,可能有说的不对的地方,如果可以,感谢你的指正 本人也不想误人子弟,大部分教 ...
- (原+转)Ubuntu16.04软件中心闪退及wifi消失
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6321889.html 参考网址: http://blog.csdn.net/felcon/articl ...
- Mybatis 如何自动生成bean dao xml 配置文件 generatorconfig.xml (mysql)
1/自动生成的jar包:mybatis-generator-core-1.3.2.jar 2/generatorconfig.xml文件如: <?xml version="1.0& ...
- CentOS SVN客户端应用
一.CentOS安装TortoiseSVN yum install -y subversion 二.SVN客户端命令 1.将文件checkout到本地目录 svn checkout path( ...
- Eclipse中10个最有用的快捷键组合(转)
Eclipse中10个最有用的快捷键组合 一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合.通过这些组合可以更加容易的浏览源代码,使得整体的开发效率和质量得到提升. ...
- Install MySQL 5.7 on Fedora 25/24, CentOS/RHEL 7.3/6.8/5.11
MySQL is a relational database management system (RDBMS) that runs as a server providing multi-user ...