文章目录

一 Prop的大小写
二 Prop指定类型
- 2.1 用法
- 2.2 类型列举
- - 2.2.1 数字
  - 2.2.2 布尔值
  - 2.2.3 数组
  - 2.2.4 对象
  - 2.2.5 传递一个值的所有属性
三单向数据流
- 3.1 名词解释
- 3.2 导致的问题
四 prop验证
五非Prop的Attritube（？）

一 Prop的大小写

HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：

var vm = new Vue({el: '#components-demo',components: {blog_post: {props: ['HelloWorld'],template: '<div><h3>What I said is :</h3>{{HelloWorld}}</div>'}}
})

<div id="components-demo"><blog_post hello-world="你好哇，李银河"></blog_post>
</div>

二 Prop指定类型

2.1 用法

var vm = new Vue({el: '#components-demo',components: {book_info: {props: {prize: Number,author: Array,book:String},computed:{author_nums:function(){var str = ""for(index in this.author){str = str + this.author[index] + " "}return str;}},template: '<div><h3>The Book : <i>{{book}}</h3>Writeen by <strong>{{ author_nums }}</strong> is priced at {{prize}}￥</div>'}}
})

<div id="components-demo"><book_info book="你好哇，李银河" :author="['王小波','李银河']" :prize=39></book_info>
</div>

2.2 类型列举

需要使用v-bind，当传递数字、布尔值、数组、对象时，使用v-bind:名字，当传递一个对象的所有属性时，使用不带参数的v-bind
详情查看文档

当不使用v-bind，绑定的对象默认是String字符串类型。所以，我们需要通过v-bind指令告诉Vue，这是一个Javascript表达式而非字符串

2.2.1 数字

<!-- 即便 `42` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:likes="42"></blog-post><!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:likes="post.likes"></blog-post>

2.2.2 布尔值

<!-- 包含该 prop 没有值的情况在内，都意味着 `true`。-->
<blog-post is-published></blog-post><!-- 即便 `false` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:is-published="false"></blog-post><!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:is-published="post.isPublished"></blog-post>

2.2.3 数组

<!-- 即便数组是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post><!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:comment-ids="post.commentIds"></blog-post>

2.2.4 对象

<!-- 即便对象是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-postv-bind:author="{name: 'Veronica',company: 'Veridian Dynamics'}"
></blog-post><!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:author="post.author"></blog-post>

2.2.5 传递一个值的所有属性

如果你想要将一个对象的所有属性都作为 prop 传入，你可以使用不带参数的 v-bind (取代 v-bind:prop-name)。例如，对于一个给定的对象 post：

post: {id: 1,title: 'My Journey with Vue'
}

下面的模板：

<blog-post v-bind="post"></blog-post>

等价于：

<blog-postv-bind:id="post.id"v-bind:title="post.title"
></blog-post>

三单向数据流

3.1 名词解释

参考资料：理解 Vue 单向数据流
父组件的更新，会使子组件更新；而子组件的更新不会更新父组件
比如<input :value = "hello">这样的绑定，hello所在的VUE实例，是通过el='#app'绑定到一个组件上的，而这个组件是input的父组件，如下：

    <div id="app"><input :value="hello"/></div>

因此，当父组件的hello更新时，子组件更新，但子组件更新时，hello并不更新。v-model则是语法糖。

3.2 导致的问题

因此，对此prop的更改，会影响到所有的子组件。所以我们不应该在一个子组件内部改变prop。替代方案：

使用data属性
使用computed属性

props: ['initialCounter'],
data: function () {return {counter: this.initialCounter}
}props: ['size'],
computed: {normalizedSize: function () {return this.size.trim().toLowerCase()}
}

四 prop验证

参考

类型可选：String Number Boolean Array Object Date Function Symbol
多个可能的类型[type1, type2]
required限制必填
default默认值
validator自定义验证函数。若验证函数返回为false，控制台提示

    <div id="app"><my-component prop-c="你好" prop-f="success"></my-component></div>

Vue.component('my-component', {props: {// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)propA: Number,// 多个可能的类型propB: [String, Number],// 必填的字符串propC: {type: String,required: true},// 带有默认值的数字propD: {type: Number,default: 100},// 带有默认值的对象propE: {type: Object,// 对象或数组默认值必须从一个工厂函数获取default: function () {return { message: 'hello' }}},// 自定义验证函数propF: {validator: function (value) {// 这个值必须匹配下列字符串中的一个return ['success', 'warning', 'danger'].indexOf(value) !== -1}}},template:'<div>propA:  {{propA}}<br> propB:  {{propB}}<br> propC:  {{propC}}<br> propD:  {{propD}}<br> propE:  {{propE.message}}<br> propF:  {{propF}}</div>'
})var vm = new Vue({el: '#app'
});

五非Prop的Attritube（？）

暂时看不懂这篇教程…

前端学习——Prop相关推荐

前端学习笔记——JavaScript进阶
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.JavaScript 面向对象 1. 面向对象编程介绍 1.1 两大编程思想 1.2 面向过程编程 1.3 面向对 ...
qiankun微前端学习
微前端学习(qiankun.singleSpa) 一.微前端的优势什么是微前端微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略几个核心价值:技术栈无关 ...
【FE前端学习】第二阶段任务-基础
技能学习部分: 1.需要熟练掌握HTML标签以及CSS各个常用属性. 2.掌握CSS3 常用属性 3.掌握jquery的基本用法,对于JS基本逻辑语句需要熟练掌握上文 [FE前端学习]第二阶段任务- ...
Web前端学习有哪些技巧?
想要学好web前端技术,在学习过程中找到合适的方法和技巧,那么在实际学习过程中会更加的容易和快速掌握知识重点,尤其是对于初学者尤为关键,下面小编就为大家详细的介绍一下Web前端学习有哪些技巧?希望能够 ...
“计算机之子”winter：我的前端学习路线与方法
你好,我是winter.今天我们一起来聊聊前端的学习路线与方法. 到现在为止,前端工程师已经成为研发体系中的重要岗位之一.可是,与此相对的是,我发现极少或者几乎没有大学的计算机专业愿意开设前端课程,更 ...
python比前端好学吗_前端学习到底难不难？
难易程度是相对的,不是绝对的. 前端学习相对于java,python等肯定是更为简单的.精通会有难度,而且更新速度很快,需要不断的充实自己,提升自己,这也是一个难点. 前端学习初期,不知道该怎么学,学 ...
hbuilder前端需要的插件_最新web前端学习路线
随着互联网的深入发展,前端开发工程师已成为市场上极具竞争力的人才.许多学生,包括以前的UI,java,或完全零基础,想学习的前端.下面的思维导图是在互联网上广泛传播的前端学习地图.许多初学者说,当他们 ...
html 表单自动数值,web前端学习技术之对HTML5 智能表单的理解
原标题:web前端学习技术之对HTML5 智能表单的理解 Html5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单进行提交. - t ...
前端学习路线_前端学习路线图
2020年全新前端学习路线图分享给大家! 学习是一个循序渐进的过程,是一件非常难得坚持的事情.如果真的想学习前端开发,一定要下决心! 我这里分享给你的前端学习路线图,希望对你有帮助,以下为2020年更 ...

前端学习——Prop

文章目录

一 Prop的大小写

二 Prop指定类型

2.1 用法

2.2 类型列举

2.2.1 数字

2.2.2 布尔值

2.2.3 数组

2.2.4 对象

2.2.5 传递一个值的所有属性

三单向数据流

3.1 名词解释

3.2 导致的问题

四 prop验证

五非Prop的Attritube（？）

前端学习——Prop相关推荐

最新文章

热门文章

前端学习——Prop

文章目录

一 Prop的大小写

二 Prop指定类型

2.1 用法

2.2 类型列举

2.2.1 数字

2.2.2 布尔值

2.2.3 数组

2.2.4 对象

2.2.5 传递一个值的所有属性

三 单向数据流

3.1 名词解释

3.2 导致的问题

四 prop验证

五 非Prop的Attritube（？）

前端学习——Prop相关推荐

最新文章

热门文章

三单向数据流

五非Prop的Attritube（？）