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 全局扩展的数据传递的更多相关文章

  1. propsData 选项 全局扩展的数据传递

    propsData 不是和属性有关,他用在全局扩展时进行传递数据,结合自定义属性获取属性值的props一起使用 html <div id="app"> <regi ...

  2. vue2.0.js基础开发使用心得（结合实际项目对数据的增删改查）

    1.首先申明,没有使用vue 的组件,以及脚手架等,都是一些基础语法的使用. ------------------------------------------------------------- ...

  3. vue2.0 在页面中使用process获取全局路径的时候 报错 process is not defined

    如果是刚配置好的全局变量需要 重新启动一下vue才能通过proccess.env.xxx 获取到 如果想在html中使用 需要在data中声明一个变量 然后在vue生命周期中 将process.env ...

  4. 重开Vue2.0

    目录: 内容: 一.Vue内部指令: 1.v-if v-else&v-show v-if与v-show都是选择性显示内容的指令,但是二者之间有区别: 1.v-if:判断是否加载,在需要的时候加 ...

  5. 【重点突破】—— Vue1.0到Vue2.0的变化

    前言: 本文参考作者:_So_ 和 我是某慧 的博文,重点梳理Vue1.0升级到Vue2.0后在开发中要注意的不同,以做学习.        组件模板不再支持片段代码,必须有一个顶级元素包裹,例如: ...

  6. Vue2.0 【第三季】第2节 computed Option 计算选项

    目录 Vue2.0 [第三季]第2节 computed Option 计算选项 第2节 computed Option 计算选项 一.格式化输出结果 二.用计算属性反转数组 Vue2.0 [第三季]第 ...

  7. Vue2.0 【第二季】第9节 Component 标签

    目录 Vue2.0 [第二季]第9节 Component 标签 第9节 Component 标签 1.我们先在构造器外部定义三个不同的组件,分别是componentA,componentB和compo ...

  8. Vue2.0 【第二季】第8节 Component 父子组件关系

    目录 Vue2.0 [第二季]第8节 Component 父子组件关系 第8节 Component 父子组件关系 一.构造器外部写局部注册组件 二.父子组件的嵌套 Vue2.0 [第二季]第8节 Co ...

  9. Vue2.0 【第二季】第7节 Component 组件 props 属性设置

    目录 Vue2.0 [第二季]第7节 Component 组件 props 属性设置 第7节 Component 组件 props 属性设置 一.定义属性并获取属性值 二.属性中带' - '的处理方式 ...

随机推荐

  1. mysql 优化2 慢查询

    默认情况下mysql不记录慢查询日志,需要在启动的时候指定 bin\mysqld.exe - -slow-query-log 通过慢查询日志定位执行效率较低的SQL语句.慢查询日志记录了所有执行时间超 ...

  2. E丢丢App重设计总结

    E丢丢学习App是华夏大地教育可以有限公司旗下的一款产品,专为提升学历者打造,它整合了线上+跟踪的 (E平台)功能,方便工作人员随时随地管理账号.跟进学员:同时还可以随时了解教育行业的新闻资讯.一对一 ...

  3. HLS图像处理总结（一）

    HLS工具 以个人的理解,xilinx将HLS(高层次综合)定位于更方便的将复杂算法转化为硬件语言,通过添加某些配置条件HLS工具可以把可并行化的C/C++的代码转化为vhdl或verilog,相比于 ...

  4. Mybatis 入门之resultMap与resultType讲解实例

    resultMap:适合使用返回值是自定义实体类的情况 resultType:适合使用返回值得数据类型是非自定义的,即jdk的提供的类型 resultMap : type:映射实体类的数据类型 id: ...

  5. 转： zabbix3.2.1安装graphtrees插件

    转自 : http://blog.csdn.net/liang_baikai/article/details/53542317 graphtree介绍 由于zabbix的图像显示一块不太友好,图像没法 ...

  6. 配置Maven本地仓库

    以本机为例: 系统:Windows 开发工具:IDEA 如果想在dos窗口输mvn命令,需配置环境变量. 1. 在D盘新建repository文件夹,该目录用作maven的本地库. 2. 打开D:\P ...

  7. js javascript 获取url，获得当前页面的url，静态html文件js读取url参数

    获得当前页面的url window.location.href 静态html文件js读取url参数 location.search; //获取url中"?"符后的字串 下边为转载的 ...

  8. 将项目导入myeclipse后 tortoise svn 右键项目不能更新和提交

    使用 tortoise svn客户端将svn服务器上的项目checkout之后正常,可以更新也可以提交:当将这个项目导入MyEclipse之后,不能更新和提交了只出现svn升级工作副本这一字样:网上搜 ...

  9. python3下BeautifulSoup练习一（爬取小说）

    上次写博客还是两个月以前的事,今天闲来无事,决定把以前刚接触python爬虫时的一个想法付诸行动:就是从网站上爬取小说,这样可以省下好多流量(^_^). 因为只是闲暇之余写的,还望各位看官海涵:不足之 ...

  10. 机器学习迁移模型到IOS

    https://paulswith.github.io/2018/02/24/%E8%BF%81%E7%A7%BB%E5%AD%A6%E4%B9%A0InceptionV3/ 上文记录了如何从一个别人 ...