vue构造器的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 学习</title>
<script src="vue.js"></script>
</head>
<body> <div id="app">
<p>{{ print_message() }}</p>
<p>{{ say_name() }}</p>
<p>{{ age }}</p>
</div> <script>
var data = { message: 'Hello Vue.js!', name: 'rao', age: 19 } //data的所有属性都会响应式地添加到app中的data，即使没有的属性
var app = new Vue({
el: '#app',
data: data,
methods: {
print_message: function(){
return this.message;
},
say_name: function(){
return this.name;
}
}
});
document.write(data.fuck === app.fuck) //true
document.write(app.name); //data的属性这样引用
document.write(app.$el === document.getElementById('app')); //实例属性前要加$
document.write(app.$data === data); //实例属性前要加$
</script>
</body>
</html>
vue构造器的内容的更多相关文章
- 2、Vue构造器和扩展
1.VUE构造器简介 VUE构造器是一个非常重要的语法. 每个Vue.js应用都是通过构造函数Vue创建一个根实例. New了Vue对象,然后调用了这个vue对象的构造器,并向构造器传入了数据. 在实 ...
- vue.js主要内容
vue的主要内容 1.了解vue 2.vue开发环境的搭建和脚手架工具的使用 3.vue具体的指令和项目实战 1.了解vue 1.具备基础:html.css.js,模块化概念.ES6语法(简单即可) ...
- vue构造器以及实例属性
一.构造器 1.vue.js就是一个构造器,通过构造器Vue来实例化一个对象:例如:var vm = new Vue({}); 2.实例化Vue时,需要传入一个参数(选项对象): 3.参数:选项对象可 ...
- Vue slot插槽内容分发
slot插槽使用 使用场景,一般父组件中又一大段模板内容需要运用到子组件上.或者更加复杂的,子组件需要运用到父组件大段模板内容,而子组件却不知道挂载的内容是什么.挂载点的内容是由父组件来决定的. Sl ...
- VUE 实现复制内容到剪贴板功能
注: 依赖第三方插件 clipboard 一.安装插件 npm install vue-clipboard2 --save 二.全局注入(main.js) import VueClipboard fr ...
- 在sublime text 3中让.vue文件的内容变成彩色
直接上步骤: 1.按住ctrl + shift + p 2.输入install Package 3.输入Vue Syntax Highlight 执行完以上3步,再次打开.vue文件,会发现里面的内容 ...
- 006——VUE中的内容与属性中使用javascript表达式的方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue中slot内容分发
<slot>元素是一个内容分发API,使用多个内容插槽时可指定name属性 <!DOCTYPE html> <html> <head> <meta ...
- 使用slot-scope复制vue中slot内容
有时候我们的vue组件需要复制使用者传递的内容. 比如我们工程里面的轮播组件需要使用复制的slot来达到循环滚动的效果 使用者关注轮播内容的静态效果,组件负责让其滚动起来 组件: <div cl ...
随机推荐
- [Python设计模式] 第28章 男人和女人——访问者模式
github地址:https://github.com/cheesezh/python_design_patterns 题目 用程序模拟以下不同情况: 男人成功时,背后多半有一个伟大的女人: 女人成功 ...
- 找回停掉docker的文件
如果容器还能重启,就restart, 如果状态是DEAD的话, Error response from daemon: Container is marked for removal and cann ...
- mysql数据库全备和全备还原（使用Xtrabackup）
一.使用innobackupex创建全备 语法 innobackupex --user=DBUSER --password=DBUSERPASS /path/to/backup/dir/ innoba ...
- C#缓存absoluteExpiration、slidingExpiration两个参数的疑惑
看了很多资料终于搞明白cache中absoluteExpiration,slidingExpiration这两个参数的含义. absoluteExpiration:用于设置绝对过期时间,它表示只要时间 ...
- AngularJS 使用ng-repeat报错
[ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify uniq ...
- 【Linux】CentOs的常用命令
1.文件目录操作命令 ls:列出当前路径下的文件或者目录列表 -l 列出详细信息 -a 列出所有的文件信息,包括隐藏文 ...
- 快速搭建python程序
公司对外提供了http接口服务,涉及到了des加密,有客户用Python开发,但搞不定加密,客户的问题就是大问题,虽然以前没接触过Python,也只能硬着头皮上,不停的baidu各种资料,从环境搭建. ...
- 远程调试Android手机上网页的记录
1.手机需要开启USB调试模式: 2.电脑和手机上都要安装最新的Chrome浏览器: 3.手机连接电脑,会出现下载安装驱动的提示并安装成功(并不是所有的手机都会这么顺利,比如我的魅族就无法安装驱动,公 ...
- [转]Kindeditor图片粘贴上传(chrome)
原文地址:https://www.cnblogs.com/jsper/p/7608004.html 首先要赞一下kindeditor,一个十分强大的国产开源web-editor组件. kindedit ...
- Spark性能优化指南——基础篇
本文转自:http://tech.meituan.com/spark-tuning-basic.html 感谢原作者 前言 在大数据计算领域,Spark已经成为了越来越流行.越来越受欢迎的计算平台之一 ...