1. 程式人生 > >React.js學習筆記(二)構造渲染

React.js學習筆記(二)構造渲染

//構造

constructor(...args) {

                //必須先呼叫父類構造

                super(...args);

                //狀態引數

                this.state = {display: 'block'};

}

//渲染

render() {

        //渲染內容

        return (

                    <input type="button" value="點選顯示" 

                                //繫結事件函式

                                 onClick= {this.hide.bind(this)}/>

           );

}

標籤內屬性value

1、預設為不可修改狀態

2、前面加default則可以修改

例如:

value 賦值都為  defaultValue=“”

checked 選中狀態為 defaultChecked=“”

增加:

        所有的非常規屬性如:src 你變成_src 會被直接pass掉

        需增加data-src

相關推薦

React.js學習筆記()構造渲染

//構造 constructor(...args) {                 //必須先呼叫父類構造                 super(...args);                 //狀態引數                 this.s

node.js學習筆記之版本問題

nodejs targe tle 下一個 .cn blank 網站 mage 功能 一、版本說明 進入node.js官網https://nodejs.org/en/download/ 點擊上面的【All download options】進入到所有下載列表的地址 下載地

React.js學習筆記(一)生命週期

componentWillMount(){         console.log( “建立之前”) } componentDidMount(){          console.log( “建立之後”) } componentWillUpdate(){

JS學習筆記-構造函數篇

返回值 def 說明 ins 是否 fun eight array per 創建實例funtion Fn (){ var num = 10; this.x = 100; this.getX = function(){ console.

Vue.js學習筆記

head 改變 vue ntb con UNC 關註 tle element Vue.js不支持IE8及以下的版本,因為vue使用了IE8無法模擬的ECMAScript5的特性,它支持所有兼容ECMAScript5的瀏覽器。 1 <!DOCTYPE html>

vue.js學習筆記)--指令的使用

部落格地址:https://fisher-zh.github.io vue之實現列表的新增點選。 使用指令:v-on v-for v-on v-bind v-model html <!DOCTYPE html> <html lang="en"&

d3.js學習筆記):完整的柱狀圖示例

本示例採用d3的3.x版本庫,示例程式碼如下: d3.fullAxisExample = function() { var width = 240; var height = 240; //在 body 裡新增一個 SVG 畫布

148.Node.js學習筆記)2018.11.27

目錄 1. 程式碼規範 1.1程式碼規範問題 1.2 程式碼分號問題 1.3 模板字串 2. http-Apache 2.1 http-Apache功能 2.2 fs 讀取目錄 2.3 http-Apache目錄列表 3. 在node中使用模板引擎 3.1 &

React 入門學習筆記整理()—— JSX簡介與語法

先看下這段程式碼: import React from 'react'; //最終渲染需要呼叫ReactDOM庫,將jsx渲染都頁面中 import ReactDOM from 'react-dom'; import * as serviceWorker from './serviceWorker'; l

Node.js學習筆記)——靜態資原始檔

Node.js學習筆記(二)——靜態資原始檔 參考視訊 實現一個小阿帕奇,自動為資料夾裡面的檔案、圖片、css、js加上路由。 基本思想:使用者輸入什麼url,就用fs去讀取那個檔案。 var http = require('http'); var url

【Vue.js學習筆記】7:v-for渲染,Vue的小Demo

v-for渲染 v-for是Vue中常用的列表渲染方法, 可以將一個列表渲染為一系列的HTML元素,也可以用來遍歷物件內的k-v對。另外關於模板元素渲染在官方文件上見這裡。 index.html <!DOCTYPE html> <html lang="en"

【Vue.js學習筆記】6:動態繫結CSS樣式,條件渲染和v-show

動態繫結CSS樣式 這部分涉及官方文件中的Class與Style繫結。 index.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:

node.js學習筆記整理(

(1)前端專案自動化構建 1、建立myProject專案檔案以及對應的資料夾 var projectData ={ 'name':'myProject', 'fileData':[ { 'name':'css', 'type'

js 操作HtmlDom 學習筆記

1、<script type="text/javascript"> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest)   {// code for IE7+, Firefox, Chr

react學習筆記(

在以類繼承的方式定義的元件中,為了能方便地呼叫當前元件的其他成員方法或屬性(如:this.state),通常需要將事件處理函式執行時的 this 指向當前元件例項。   繫結事件處理函式this的幾種方法:   第一種方法: run(){ alert(this.state.n

React Native 學習筆記

坑一,環境好了,但是因為專案需求經常要安裝一些三方庫,xcode-select: error: tool ‘xcodebuild’ requires Xcode, but active developer directory ‘/Library/Develope

React-Native_學習筆記1: Unable to resolve module Dimensions from “...js” Invalid directory /Users/node_m

在使用第三方的元件的時候遇到如題的錯誤提示,原因是第三方組建中呼叫Dimensions 發生的錯誤,解決方法:修改第三方元件 “。js”檔案中的程式碼 var screen = require('D

JS學習筆記-CSS篇(

5.CSS Fonts(字型) CSS字型屬性定義字型,加粗,大小,文字樣式。 serif和sans-serif字型之間的區別 Serif Times New RomanGeorgia Serif字型中字元在行的末端擁有額外的裝飾 Sans-serif

js學習筆記)下拉選單項選擇並跳轉

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE>

Vue.js 學習筆記:資料驅動開發

在 Vue.js 框架中,與 HTML 頁面元素的互動方式沒有像原生 JavaScript 介面那麼直接,它是通過先在 HTML 元素標籤中嵌入一系列類似於普通標籤屬性的 Vue 指令屬性來繫結資料,然後再通過在 JavaScript 程式碼中修改這些被繫結的資料來修改頁面元素的顯示方式與內容。在程式設計方法