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 属性设置 一.定义属性并获取属性值 二.属性中带' - '的处理方式 ...
随机推荐
- Critical-Value|Critical-Value Approach to Hypothesis Testing
9.2 Critical-Value Approach to Hypothesis Testing example: 对于mean 值 275 的假设: 有一个关于sample mean的distri ...
- A 小石的签到题
题目链接:https://ac.nowcoder.com/acm/contest/949/A 思路: 这题明确的说了是个签到题,但是一直怀疑不是签到题,是唬我的,结果仔细想了想真是这么回事. 每个人必 ...
- SQL语句之查询(SELECT)
目录 SQL语句之查询(SELECT) 简单查询 限定查询 模糊查询 排序查询 多表查询 SQL语句之查询(SELECT) SQL是用于访问和处理数据库的标准计算机语言: 中文:结构化查询语言:英文全 ...
- 【Linux_Shell 脚本编程学习笔记一、条件表达式】
条件表达式返回的结果都为布尔型 真为1,假为0 条件测试的表达式 [expression] 比较符 整数比较 -eq:比较两个整数是否相等,$A -eq $B -ne:测试两个整数是否不等,不等则为真 ...
- MOOC(4)- setup和teardown函数
import unittest class TestRequest(unittest.TestCase): @classmethod def setUpClass(cls): print(" ...
- SpringMVC学习笔记六:类型转换器及类型转换异常处理
SpringMVC内部有类型转换器,当从Request中获取参数后,放入Controller中时,会根据Controller中指定的类型进行自动转换,当指的类型SpringMVC不能自动转换时,就需要 ...
- 原创:CentOS 环境中 Zabbix 3.4 的安装部署实践
IT管理工作中,如果没有对服务器.网络设备.服务.进程.应用等的监控,往往是用户发送问题报告后才知道出了问题.事后救火显得被动,不能从容面对问题. 才有了部署一套网络监控系统的想法,机缘巧合下结识了Z ...
- String.slice
String.slice(start, end)start从字符串的哪个index开始截取 默认值0 如果为负值,则从字符串的尾部向前倒推indexend到从字符串的哪个index结束截取 默认值st ...
- 刷金币全自动脚本 | 让Python每天帮你薅一个早餐钱(送源码)
刷金币全自动脚本 | 让Python每天帮你薅一个早餐钱(送源码) 测试开发社区 6天前 文章转载自公众号 AirPython , 作者 星安果 阅读文本大概需要 12 分钟. 1 目 标 场 景 ...
- 14、创建/恢复ETH钱包身份
借助网上的一段描述: 若以银行账户为类比,这 5 个词分别对应内容如下: 地址=银行卡号密码=银行卡密码私钥=银行卡号+银行卡密码助记词=银行卡号+银行卡密码Keystore+密码=银行卡号+银行卡密 ...