前端分為三大框架
angular? react vue
原生js本身操作dom很消耗性能,,,,,,庫和框架是一個意思么?
庫? ? ?封裝了js 思想還是在js上,高度的封裝了原生js? ?例子jquery/zepto
框架? ?本質(zhì)上修改了思想 -解決了一些終端程序上的問題
angular react vue
angular 1.x mvc
2.x mvvm
我都給你限制了
$http -> ajax
vue2 mvvm框架
不限制
推薦
vue-resource
axios
xmlhttp
react? 更專注于view層
react
優(yōu)勢:
1.虛擬dom
2.性能性很高
3.解決一些終端的問題(pc稼锅、移動端問題)
劣勢:
1.學習成本很高、學習曲線很陡
2.react本身能做的事并不多,想做大東西必須得用react插件(全家桶)
vue2.x的迭代的時候
虛擬dom
react
上手難度高傅联,學習曲線陡,理解作者思想疚察,接受它的世界觀蒸走,接受它的中二設定
自定義語法 - jsx
js - string
let a = '<div>hello react!</div>'
jsx
let a = <div>hello react!</div>
1.書寫格式 :
1.1個標簽的書寫格式
let a = <div>hello react!</div>
2.多個標簽的書寫格式 - 外面必須包一層根元素
*vue2.x 組件 根元素
let a = <div><div>sadasd</div><span>asdasd</span></div>
3.可以自由縮進
let a = <div>
<div>sadasd</div>
<span>asdasd</span>
</div>
允許加括號
let a = (<div>
<div>sadasd</div>
<span>asdasd</span>
</div>)
4.單標簽規(guī)則 - 必須閉合
<img/>
<input/>
<br/>
<div></div>
5.class - className
<div className='aaa'></div>
6.jsx里面使用js代碼{}
var a = 'hello react!';
let b = <div>{a}</div>
react 開發(fā)模式
1.直接引入 - 簡單(初學者喜歡的模式)
<script src='react.js'></script>
2.腳手架模式(基于webpack)
中二設定
react.js - 核心js
react-dom.js - 虛擬dom
babel ? jsx
react.js
bower - js所有的框架庫包管理器
bower - 依賴于node.js
安裝bower npm install bower -g
bower info(信息)
? install(下載)
react 2011-10-26T17:46:22.746Z? ? facebook
vue 2013-12-07T06:09:48.297Z? ? ? 中國的大神
angular 2012-03-28T11:40:22.074Z? Google
bower install react -》 默認下載最高版本
指定某個版本
#15.6.1
16.0.1 o
18.0.1 x
react-dom -> ReactDOM.render(
組件(內(nèi)容貌嫡、元素)比驻,
放到哪
);
jsx - 支持style - 里面使用json
{{'background':'red'}}
第一層是使用告訴jsx我要用js了
第二層的是json的
7.事件
使用駝峰命名法 單詞的首字母大寫
第一個單詞之后的首字母大寫
onclick -> onClick
onmouseover -> onMouseOver