Vue2.0 【第三季】第1节 propsData Option 全局扩展的数据传递
Vue2.0 【第三季】第1节 propsData Option 全局扩展的数据传递
第1节 propsData Option 全局扩展的数据传递
这一季讲的是基础中的选项，选项就是在Vue构造器里的配置功能的前缀（Vue已经给我们定义好了），Vue有很多选项，我们将在这一级教程中一一介绍。
propsData 不是和属性有关，他用在全局扩展时进行传递数据。先回顾一下全局扩展的知识，作一个<header></header>的扩展标签出来。实际我们并比推荐用全局扩展的方式作自定义标签，我们学了组件，完全可以使用组件来做，这里只是为了演示propsData的用法。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>PropsData Option Demo</title>
</head>
<body>
<h1>PropsData Option Demo</h1>
<hr>
<header></header>
<script type="text/javascript">
var header_a = Vue.extend({
template:`<p>{{message}}</p>`,
data:function(){
return {
message:'Hello,I am Header'
}
}
});
new header_a().$mount('header');
</script>
</body>
</html>
浏览器效果：
扩展标签已经做好了，这时我们要在挂载时传递一个数字过去，我们就用到了propsData。 我们用propsData三步解决传值：
- 1.在全局扩展里加入props进行接收。propsData:{a:1}
- 2.传递时用propsData进行传递。props:[‘a’]
- 3.用插值的形式写入模板。{{ a }}
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>propsData option</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>propsData option</h1>
<hr>
<header></header>
<script type="text/javascript">
var header_a = Vue.extend({
template:'<p>{{message}}-{{a}}</p>',
data:function(){
return {
message:'Hello , I am header!'
}
},
props:['a']
});
new header_a({propsData:{a:12}}).$mount('header');
</script>
</body>
</html>
浏览器效果：
总结：propsData在实际开发中我们使用的并不多，我们在后边会学到Vuex的应用，他的作用就是在单页应用中保持状态和数据的。
Vue2.0 【第三季】第1节 propsData Option 全局扩展的数据传递的更多相关文章
- propsData 选项 全局扩展的数据传递
propsData 不是和属性有关,他用在全局扩展时进行传递数据,结合自定义属性获取属性值的props一起使用 html <div id="app"> <regi ...
- vue2.0.js基础开发使用心得（结合实际项目对数据的增删改查）
1.首先申明,没有使用vue 的组件,以及脚手架等,都是一些基础语法的使用. ------------------------------------------------------------- ...
- vue2.0 在页面中使用process获取全局路径的时候 报错 process is not defined
如果是刚配置好的全局变量需要 重新启动一下vue才能通过proccess.env.xxx 获取到 如果想在html中使用 需要在data中声明一个变量 然后在vue生命周期中 将process.env ...
- 重开Vue2.0
目录: 内容: 一.Vue内部指令: 1.v-if v-else&v-show v-if与v-show都是选择性显示内容的指令,但是二者之间有区别: 1.v-if:判断是否加载,在需要的时候加 ...
- 【重点突破】—— Vue1.0到Vue2.0的变化
前言: 本文参考作者:_So_ 和 我是某慧 的博文,重点梳理Vue1.0升级到Vue2.0后在开发中要注意的不同,以做学习. 组件模板不再支持片段代码,必须有一个顶级元素包裹,例如: ...
- Vue2.0 【第三季】第2节 computed Option 计算选项
目录 Vue2.0 [第三季]第2节 computed Option 计算选项 第2节 computed Option 计算选项 一.格式化输出结果 二.用计算属性反转数组 Vue2.0 [第三季]第 ...
- Vue2.0 【第二季】第9节 Component 标签
目录 Vue2.0 [第二季]第9节 Component 标签 第9节 Component 标签 1.我们先在构造器外部定义三个不同的组件,分别是componentA,componentB和compo ...
- Vue2.0 【第二季】第8节 Component 父子组件关系
目录 Vue2.0 [第二季]第8节 Component 父子组件关系 第8节 Component 父子组件关系 一.构造器外部写局部注册组件 二.父子组件的嵌套 Vue2.0 [第二季]第8节 Co ...
- Vue2.0 【第二季】第7节 Component 组件 props 属性设置
目录 Vue2.0 [第二季]第7节 Component 组件 props 属性设置 第7节 Component 组件 props 属性设置 一.定义属性并获取属性值 二.属性中带' - '的处理方式 ...
随机推荐
- POJ-1811-Prime Test（pollard_rho模板，快速找最小素因子）
题目传送门 sol:Pollard_Rho的模板题,刚看了Pollard_Rho和Miller_Rabin很多原理性的东西看不懂,只是记住了结论勉强能敲代码. Pollard_Rho #include ...
- Caused by: com.alibaba.fastjson.JSONException: syntax error, expect {, actual [, pos 0, fastjson-version 1.2
环境: vue.js 问题: 当添加评论时 重新查询数据刷新数据控制台异常Caused by: com.alibaba.fastjson.JSONException: syntax error, ex ...
- input系统——android input系统
AndroidInput系统--JNI NativeInputManager InputManger InputReader AndroidInput系统--InputReader AndroidIn ...
- CORS’s source, Principle and Implementation
跨域资源共享(CORS) 是一种机制,它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源.当一个资源从与该资源 ...
- 一个自动递增生成目录和文件的cop文件类
package com.hudong.util.orther; import java.io.File; import java.io.FileInputStream; import java.io. ...
- kNN算法 Demo
项目链接: https://github.com/WES6/kNN
- 将java project打包成jar包，web project 打包成war包的几种演示
将java项目打包成jar 第一种:MyEclipse将java项目打包成jar. 1,右击项目,选择export . 2,点击Java,选择JAR file . 3,在JAR file文本中浏览打包 ...
- mysqldump免密备份方法
注意:1.暂时只试验了root用户 2.暂时只试验了5.6和5.7两个版本 1.我用的root用户,先进入家目录 cd ~ 2.vim .my.cnf #在家目录添加该文件 [mysqldum ...
- LVS+Keepalived 配置
LVS+Keepalived配置 环境准备 LVS1:192.168.1.1 LVS2:192.168.1.2 MySQL Server1:192.168.1.13 MySQL Server2:192 ...
- 手工创建 efi,msr 分区 · Virgil Chan
昨天在帮同学装 win10 的时候,不小心(不知道那是什么东西)把原系统的 efi 和 msr 盘删了,用 WinNTsetup 安装时 EFI PART 总显示红叉,安装后也进不去系统,想想应该是找 ...