props验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="example" v-once>
        <app :showif="showif"></app>
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        Vue.component(‘app‘,{
            props:{
                showif: Boolean
            },
            template:‘<div v-show="showif">你妹夫</div>‘,
        })
        var app = new Vue({
            el:‘#example‘,
            data:{
                showif : true
            }
        })
    </script>
</body>
</html>

时间： 2024-11-06 07:44:39

props验证的相关文章

react Props 验证 propTypes，

<body><div id="example"></div> <script src="src/libs/react.js"></script><script src="src/libs/JSXTransformer.j

Props 验证使用 propTypes,它可以保证我们的应用组件被正确使用,React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效.当向 props 传入无效数据时,JavaScript 控制台会抛出警告. 常见的验证器: React.createClass({ propTypes: { // 可以声明 prop 为指定的 JS 基本数据类型,默认情况,这些数据是可选的 optionalArray: React.PropTypes.array, opti

Vue组件选项props

前面的话组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.本文将详细介绍Vue组件选项props 静态props 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,需要通过子组件的 props 选项使用Prop传递数据

vue2.0 props 数据传递

1.组件实例的作用域: 是孤立的,简单的来说,组件和组件之间,即使有同名属性,值也不共享. 代码: 渲染结果是: 2个按钮,第一个的值是123,第二个的值是456(虽然他们都是btn) 效果图: 2.使用props绑定静态数据: (1)这种方法用于传递字符串,且值是写在父组件自定义元素上的. (2)下面示例中的写法,不能传递父组件data属性中的值 (3)会覆盖模板的data属性中,同名的值. 代码: <div id="app"> <add></add&g

vue.js学习笔记（Vuejs——组件——props数据传递）

①组件实例的作用域: 是孤立的,简单的来说,组件和组件之间,即使有同名属性,值也不共享. <div id="app"> <add></add> <del></del> </div> <script> var vm = new Vue({ el: '#app', components: { "add": { template: "<button>btn:{{btn

react 生命中期 props state区别生命周期

npm安装create-react-app npx create-react-app my-app cd my-app npm start 查看调试props验证 babel-react-optimize 可以在调试环境下有propstype属性,在产品环境下自动去掉,以免占用浏览器资源,降低性能: defaultProps可以给组件设置默认的初始值. 组件.defaultProps={ initvalue:0 }prop和state的区别: prop是用于定义外部接口,state用于记录内部

React（六）Props属性

state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变.这就是为什么有些容器组件需要定义 state 来更新和修改数据. 而子组件只能通过 props 来传递数据. (1)使用Props属性 class Mainextends React.Component { render() { return ( <div> <Name name={'yulingjia'} /> </div> ); } } class Name

React基础篇（2） -- state&props&refs

内容简介 state props refs 行内样式及动态类名 state 基本介绍 React 把组件看成是一个状态机(State Machines).通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致. React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM). 初始化状态: constructor() { super() this.state = { stateName1 : stateValue1, stateNam

React核心内容归纳总结

状态.属性.组件API.组件的生命周期当react的状态改变时,自动执行this.render()方法更新组件ES6写React的时候,事件里不会自动绑定this,需要自己绑定,或者直接在constructor里写方法 constructor(props) { super(props); this.state = { liked: false }; this.handleClick = (e) => { this.setState({liked: !this.state.liked}); };