jsx

一，对组件化的理解 1，组件的封装 -视图 -数据 -变化逻辑（数据驱动视图变化） 例： import React, { Component } from 'react'; import List from './list/index.js'; import Input from './input/index.js'; class Todo extends Component { constructor(props) { // 数据 super(props) this.state = {//保存当前组件的变量 list:[] } } render() { return ( // 视图 <div> <Input addTitle={this.addTitle.bind(this)}/> <List data={this.state.list} /> <List data={[1,2,3]} /> </div> ) } // 变化逻辑 addTitle(title) { const currentList = this.state.list; this.setState({ list:currentList.concat(title) }) } } export default Todo 2，组件的复用 -props传递 -复用 例： import React, { Component

1. v-model 指令 <input v-model="text" /> 上例不过是一个语法糖，展开来是： <input :value="text" @input="e => text = e.target.value" /> 2. .sync 修饰符 <my-dialog :visible.sync="dialogVisible" /> 这也是一个语法糖，剥开来是： <my-dialog :visible="dialogVisible" @update:visible="newVisible => dialogVisible = newVisible" /> my-dialog 组件在 visible 变化时 this.$emit('update:visible', newVisible) 即可。 3. model 属性 (JSX/渲染函数中) Vue 在 2.2.0 版本以后，允许自定义组件的 v-model ，这就导致在 JSX / 渲染函数中实现 v-model 时得考虑组件的不同配置，不能一律如此（假使 my-dialog 组件的 model 为 { prop: 'visible', event: 'change' } ）： { render(h) { return h('my-dialog', { props: { value: this.dialogVisible

Vue与React的对比 Vue.js与React.js从某些反面来说很相似，通过两个框架的学习，有时候对一些用法会有一点思考，为加深学习的思索，特翻阅了两个文档，从以下各方面进行了对比，加深了对这两个框架的认知。 1.数据绑定 1.1 Vue中有关数据绑定的部分 vue是双向绑定， Vue.js 最核心的功能有两个，一是响应式的数据绑定系统，二是组件系统。所谓双向绑定，指的是vue实例中的data与其渲染的DOM元素的内容保持一致，无论谁被改变，另一方会相应的更新为相同的数据。这是通过设置属性访问器实现的。 在vue中，与数据绑定有关的有 插值表达式、指令系统、*Class和Style、事件处理器和表单空间、ajax请求和计算属性 1.1.1插值表达式 插值和指令又称为模板语法 - 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值 - Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令 1.1.2 指令 vue中的指令很方便，指令 (Directives) 是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。 vue中的12个指令： v-bind,v

1.什么是render函数？ vue通过 template 来创建你的 HTML。但是，在特殊情况下，这种写死的模式无法满足需求，必须需要js的编程能力。此时，需要用render来创建HTML。 2.例： 遇到的问题： 在工作中，我创建了一个button组件，又创建了一个button-group组件 button组件较为简单，就是一个可以输入type/size/icon等属性的button 此为渲染后结果。 然后，创建button-group组件，目标结果为 此处， 不仅要在最外层包裹一层div，还要在每个button组件外层包裹一层p标签 。此处，就需要使用render函数了。 既然有了render函数，就不再需要template标签了，vue文件中只需要script标签（该组件style是全局的） button-group.vue如下 <script> export default { name: "XButtonGroup", props: { compact: { //自定义的button-group属性，影响其classname type: Boolean, default: true } }, render(createElement) { //此处创建element }, computed: { groupClass() { const className = [

Here's what I tried and how it goes wrong. This works: <div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} /> This doesn't: <div dangerouslySetInnerHTML={{ __html: this.props.match.description }} /> The description property is just a normal string of HTML content. However it's rendered as a string, not as HTML for some reason. Any suggestions? Check if the text you're trying to append to the node is no escaped like this: var prop = { match: { description: '<h1>Hi there!</h1>' } }; Instead of this: var prop = { match: { description: '<h1>Hi there!</h1>' } }; if is escaped you should

jsx 在JSX中嵌入用户输入是安全的,默认情况下， 在渲染之前, React DOM 会格式化( escapes ) JSX中的所有值. 从而保证用户无法注入任何应用之外的代码. 在被渲染之前，所有的数据都被转义成为了字符串处理。 以避免 XSS(跨站脚本) 攻击 Babel 将JSX编译成 React.createElement() 调用 用 JSX 指定子元素如果是空标签，您应该像 XML 一样，使用 /> 立即闭合它 元素渲染 React 元素是 不可突变（immutable） 的，一旦你创建了一个元素, 就不能再修改其子元素或任何属性。一个元素就像电影里的一帧: 它表示在某一特定时间点的 UI 就我们所知, 更新 UI 的唯一方法是创建一个新的元素, 并将其传入 ReactDOM.render() 方法. React DOM 会将元素及其子元素与之前版本逐一对比, 并只对有必要更新的 DOM 进行更新, 以达到 DOM 所需的状态 组件和属性 组件就像JavaScript的函数。组件可以接收任意输入(称为”props”)， 并返回 React 元素，用以描述屏幕显示内容 组件名称总是以大写字母开始 不要害怕把一个组件分为多个更小的组件 props是只读的，所有 React 组件都必须是纯函数，并禁止修改其自身 props 。 state和生命周期 state 和