一弛说、Vue
1.下載Vue
下載地址:cn.vuejs.org
2.引入Vue
創(chuàng)建vue.js,內(nèi)容復(fù)制官網(wǎng)
3.Vue的基礎(chǔ)語法
3.1 Vue的特點(diǎn)
漸進(jìn)式框架,采用自底向上的增量開發(fā),Vue關(guān)注視圖層
MVVM:
Model-View-ViewModel
采用雙向數(shù)據(jù)綁定,改變數(shù)據(jù)影響元素,反之亦然
3.2如何使用Vue
引入Vue的核心JS文件
準(zhǔn)備Dom結(jié)構(gòu)
實(shí)例化組件
通過el屬性,掛載元素,綁定id為App的html元素
el:"#app"
通過data屬性,定義數(shù)據(jù),可以在html代碼啊段中顯示的數(shù)據(jù)?
data:{
? ? msg:"Hello Vue!"
}
獲取數(shù)據(jù),通過Mustache語法(雙大括號(hào))的文本插值
{{msg}}
3.3 JavaScript表達(dá)式
在Vue模板中,提供了完全的JavaScript表達(dá)式支持,注意,只能在模板寫入表達(dá)式,而不能使用js語句
3.3.1 支持得到表達(dá)式
字符串方法操作
<div>{{msg.split(" ").reverse().join(" ")}}</div>
數(shù)值運(yùn)算
<div>{{num+1}}</div>
三目運(yùn)算符
<div>{{flag?"喜歡":"不喜歡"}}</div>
3.3.2 不支持的表達(dá)式
創(chuàng)建對(duì)象
流程控制語句
4.指令
是帶有v-前綴的特殊屬性
指令的職責(zé)是,當(dāng)表達(dá)式的值改變時(shí),將七產(chǎn)生的連帶影響,響應(yīng)式作用域DOM
4.1 文本渲染
v-text
顯示數(shù)據(jù),響應(yīng)式(默認(rèn)) 簡寫:{{}}
v-once
只顯示一次
v-html
v-bind
v-bind:屬性綁定
簡寫方法:
:屬性名
4.2Class和Style
Class綁定
class
classObj
classList
Style綁定
class一致
直接傳入對(duì)象styleObject
直接使用數(shù)組對(duì)象styeList
5.事件
5.1監(jiān)聽事件
綁定事件語法:
? ? v-on:事件名
簡寫
? ? @事件名
5.2方法事件處理器
需要在methods屬性中定義方法
? ? var app = new Vue({
? ? el:"#app",
? ? data:{
? ? ? ? count:0
? ? },
? ? methods:{
? ? ? ? addCount:function () {
? ? ? ? ? ? this.count++;
? ? ? ? }
? ? ? ? }
? ? });
5.3$event對(duì)象
通過這個(gè)方法可以得到點(diǎn)擊的對(duì)象,及內(nèi)部所有屬性
5.4 事件修飾符
事件本身為冒泡觸發(fā),從小至大
stop阻止事件冒泡
prevent阻止事件默認(rèn)行為
capture從大到小
self只有點(diǎn)擊當(dāng)前元素觸發(fā)行為,而不觸發(fā)子元素
once只觸發(fā)一次
@事件.修飾符="方法名"
5.5 鍵值修飾符
enter
<input v-on:keyup.enter="submit">?
6.條件渲染
6.1 v-if
當(dāng)條件返回true時(shí),執(zhí)行
6.2 v-else
當(dāng)不滿足if條件時(shí),要結(jié)合v-if一起使用
6.3 v-else-if
當(dāng)不滿足if時(shí),結(jié)合v-if一起
6.4 v-show
v-if是真正的條件渲染
v-show是顯示或隱藏,但是元素本身會(huì)創(chuàng)建
7. 列表渲染
7.1 v-for
v-for="item in items"
直接從列表中獲取
v-for="(item,index) in items"
根據(jù)索引獲取
<li v-for="(key,value,index) in person"
根據(jù)key索引
7.2key屬性
? ? <li v-for="item in items" :key="item.id">
? ? {{item.name}}<li>
7.3取值范圍
? ? <h3 v-for="index in 10">{{index}}</h3>
8. 表單輸入綁定
利用v-model,來實(shí)現(xiàn)輸入輸出的雙向綁定
8.1 文本框Text
<input type="text" v-model="data中的值">
8.2 復(fù)選框
<input type="radio" v-model="data中的值">
8.3 單選框
<input type="checkbox" v-model="data中的值">
8.4 選擇列表|表單
8.5 修飾符
.lazy
綁定數(shù)據(jù)默認(rèn)實(shí)時(shí)更新,lazy在onChange觸發(fā),鼠標(biāo)失焦后就會(huì)觸發(fā)
.number
將數(shù)據(jù)轉(zhuǎn)為數(shù)字類型
.trim
去除前后空格
二、組件
1.定義組件
1.1全局注冊(cè)
定義全局組件,只要使用該標(biāo)簽即可觸發(fā)
Vue.component("my-hello",{
? ? template:"<h3>Hello Vue</h3>"
});
1.2局部注冊(cè)
在vue表達(dá)式內(nèi)注冊(cè)組件
new Vue({
? ? ? el:"#root",
? ? ? ? //定義局部組件
? ? ? ? components:{
? ? ? ? ? "inner-hello":{
? ? ? ? ? ? ? template:"<h4>我是局部組件</h4>"
? ? ? ? ? }
? ? ? ? }
? ? });
1.3使用組件
用雙標(biāo)簽進(jìn)行使用
1.4 is屬性
當(dāng)一些組件內(nèi)無法識(shí)別該組件名的表情時(shí)需要使用is
<table id="app">
? <!--無法使用-->
? <tr is="my-hello"></tr>
</table>
table > tr > [th,td]
ol/ul > li
select > option
