Vue.js（讀音 /vju?/, 類(lèi)似于 view）是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 web 界面的漸進(jìn)式框架响委。Vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。
Vue.js借鑒了Angular以及React的一些核心思想垦细，綜合各自的長(zhǎng)處進(jìn)行了操作以及性能等方面的優(yōu)化如蚜，進(jìn)而打造出一款性能更優(yōu)压恒，學(xué)習(xí)更容易的MVVM框架。
它的作者是：尤雨溪
1错邦、vue在設(shè)計(jì)之初參考了很多angularjs的思想
2探赫、vue相對(duì)比與angular比較簡(jiǎn)單
3、 vue相對(duì)比與angular比較小巧撬呢，運(yùn)行速度快
4伦吠、 vue與angular數(shù)據(jù)綁定都可以用｛｛｝｝
5、vue指令用v－xxx? angularjs用ng－xxx
6魂拦、vue數(shù)據(jù)放在data對(duì)象里面毛仪，angular數(shù)據(jù)綁定到$scope對(duì)象上
vue對(duì)比react
1、vue與react都使用 virtual DOM
2芯勘、vue與react都提供了組件化的視圖組件
3箱靴、 vue與react將注意力集中保持在核心庫(kù)，有豐富的插件庫(kù)
4荷愕、react使用jsx渲染頁(yè)面衡怀，vue使用更簡(jiǎn)單的模版
5棍矛、vue比react運(yùn)行速度更快
vue基礎(chǔ)語(yǔ)法
每個(gè) Vue.js 應(yīng)用都是通過(guò)構(gòu)造函數(shù) Vue 創(chuàng)建一個(gè) Vue 的根實(shí)例 啟動(dòng)的
Var vm=new Vue({})
基礎(chǔ)屬性：
el:獲取執(zhí)行vue的dom元素－初始化范圍
data ： 存儲(chǔ)數(shù)據(jù)
methods ：執(zhí)行的方法
1)綁定數(shù)據(jù)
{{}} 或者? v-text=“”? ? ? 只能綁定純文本
綁定html? angular中 ng-bind-html? vue中? v-html
表達(dá)式 在{{}}中? +-*/? 直接可用? 三目運(yùn)算一樣可用?
2）事件綁定
v-on:click=“”? ? ? 或者? ? @click＝“”
綁定事件? －－事件中有event對(duì)象? 函數(shù)參數(shù)為? $event
操作數(shù)據(jù)? 通過(guò)this操作
3)其他指令
v-for=“item in list” 循環(huán)? item循環(huán)到的數(shù)組值
v-for=“(item,key) in list”? key循環(huán)到的下標(biāo)index
v-model=“”? 表單元素value? ? 不可直接{{}}獲取，需在vue初始化設(shè)置一下
------------------------------------------------------------------------------------------------
v-if 布爾值 為true 代表節(jié)點(diǎn)消失
V-if 與 v-else-if v-else 可以構(gòu)成判斷
V-show布爾值? 為true? 代表節(jié)點(diǎn)設(shè)置了display:none屬性
無(wú)v-hide (不要任意猜測(cè))
V-once 一次渲染
---------------------------------------------------------------------------------------------------
行間樣式設(shè)置
v-bind:style=“{ color: activeColor, fontSize: fontSize + ‘px’ }”
data: {
? ? ? ? ? ? activeColor: 'red',
? ? ? ? ? ? fontSize: 30
? ? }
v-bind:style的對(duì)象語(yǔ)法十分直觀——看著非常像 CSS抛杨，其實(shí)它是一個(gè)JavaScript對(duì)象
數(shù)組樣式形式設(shè)置
v-bind:style=“[styleObjectA, styleObjectB]”
data: {
? ? ? ? ? ? ? ? styleObjectA: {
? ? ? ? ? ? ? ? ? ? color: 'red'
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? styleObjectB: {
? ? ? ? ? ? ? ? ? ? fontSize: '30px'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
類(lèi)名設(shè)置
v-bind:class=“{‘class-a’:isa,‘class-b’:isb}”
Isa? ? isb? 值為true? 添加相應(yīng)類(lèi)名
為false? 不添加類(lèi)名
對(duì)象形式設(shè)置
<div :class="classobj"></div>
classobj:{
active:true,
'class-a':true,
'class-b':true
}
