什么是vue.js

vue.js 是目前最火的一個(gè)前端框架，react是最流行的一個(gè)前端框架(react除了開發(fā)網(wǎng)站，還可以開發(fā)手機(jī)app， vue語(yǔ)法也是可以用于進(jìn)行手機(jī)app開發(fā)的，需要借助于weex)

vue.js 是前端的主流框架之一，和angular.js、react.js 一起，并成為前端三大主流框架！

vue.js 是一套構(gòu)建用戶界面的框架，只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。(vue有配套的第三方類庫(kù)，可以整合起來(lái)做大型項(xiàng)目的開發(fā))

框架和庫(kù)的區(qū)別

框架：是一套完整的解決方案；對(duì)項(xiàng)目的侵入性較大，項(xiàng)目如果需要更換框架，則需要重新架構(gòu)整個(gè)項(xiàng)目。

庫(kù)(插件)：提供某一個(gè)小功能，對(duì)項(xiàng)目的侵入性較小，如果某個(gè)庫(kù)無(wú)法完成某些需求，可以很容易切換到其它庫(kù)實(shí)現(xiàn)需求。

vue指令之v-text和v-html

v-cloak : 能夠解決插值表達(dá)式的網(wǎng)速不佳時(shí)的閃爍問(wèn)題

v-text : 1.沒有閃爍問(wèn)題

2.會(huì)覆蓋元素原有的值

v-html ：1.會(huì)覆蓋元素原有的值

2.渲染html元素

vue指令之v-bind的三種用法

v-bind ：用于綁定屬性的指令，綁定的值符合js編碼規(guī)范

直接使用指令v-bind

使用簡(jiǎn)化指令?:

在綁定的時(shí)候，拼接綁定內(nèi)容：:title="btntitle + ', 這是追加的內(nèi)容'"

v-bind?縮寫

...

...

vue指令之v-on

v-on ：用于綁定事件

v-on?縮寫

...

...

案例：跑馬燈效果

1.html解構(gòu)

{{info}}

2. vue實(shí)例

// 創(chuàng)建 vue 實(shí)例，得到 viewmodel

var vm = new vue({

el: '#app',

data: {

info: '猥瑣發(fā)育，別浪~！',

intervalid: null

},

methods: {

go() {

// 如果當(dāng)前有定時(shí)器在運(yùn)行，則直接return

if (this.intervalid != null) {

return;

}

// 開始定時(shí)器

this.intervalid = setinterval(() => {

this.info = this.info.substring(1) + this.info.substring(0, 1);

}, 500);

},

stop() {

clearinterval(this.intervalid);

}

}

});

vue指令之事件修飾符

事件修飾符：

.stop 阻止冒泡

.prevent 阻止默認(rèn)事件

.capture 添加事件偵聽器時(shí)使用事件捕獲模式

.self 只當(dāng)事件在該元素本身(比如不是子元素)觸發(fā)時(shí)觸發(fā)回調(diào)

.once 事件只觸發(fā)一次

vue指令之v-model和雙向數(shù)據(jù)綁定

v-model : 實(shí)現(xiàn)表單元素 和 model 中數(shù)據(jù)的雙向綁定

*注意：只能運(yùn)用在表單元素中*

案例：簡(jiǎn)易計(jì)算器

1.html結(jié)構(gòu)

+

-

*

÷

2.vue實(shí)例

// 創(chuàng)建 vue 實(shí)例，得到 viewmodel

var vm = new vue({

el: '#app',

data: {

n1: 0,

n2: 0,

result: 0,

opt: '0'

},

methods: {

getresult() {

switch (this.opt) {

case '0':

this.result = parseint(this.n1) + parseint(this.n2);

break;

case '1':

this.result = parseint(this.n1) - parseint(this.n2);

break;

case '2':

this.result = parseint(this.n1) * parseint(this.n2);

break;

case '3':

this.result = parseint(this.n1) / parseint(this.n2);

break;

}

}

}

});

在vue中使用樣式

-使用class樣式

數(shù)組

這是一個(gè)邪惡的h1

2.數(shù)組中使用三元表達(dá)式

這是一個(gè)邪惡的h1

3.數(shù)組中嵌套對(duì)象

這是一個(gè)邪惡的h1

4.直接使用對(duì)象

這是一個(gè)邪惡的h1

-使用內(nèi)聯(lián)樣式

直接在元素上通過(guò):style的形式，書寫樣式對(duì)象

這是一個(gè)善良的h1

2.將樣式對(duì)象，定義到data中，并直接引用到:style中

在data上定義樣式：

data: {

h1styleobj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }

}

在元素中，通過(guò)屬性綁定的形式，將樣式對(duì)象應(yīng)用到元素中：

這是一個(gè)善良的h1

3.在:style中通過(guò)數(shù)組，引用多個(gè)data上的樣式對(duì)象

在data上定義樣式：

data: {

h1styleobj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },

h1styleobj2: { fontstyle: 'italic' }

}

在元素中，通過(guò)屬性綁定的形式，將樣式對(duì)象應(yīng)用到元素中：

這是一個(gè)善良的h1

vue指令之v-for和key屬性

迭代數(shù)組

• 索引：{{i}} --- 姓名：{{item.name}} --- 年齡：{{item.age}}

2.迭代對(duì)象中的屬性

{{val}} --- {{key}} --- {{i}}

3.迭代數(shù)字

這是第 {{i}} 個(gè)p標(biāo)簽

***注意***

2.2.0+ 的版本里，當(dāng)在組件中使用v-for 時(shí)，key 現(xiàn)在是必須的。

當(dāng) vue.js 用 v-for 正在更新已渲染過(guò)的元素列表時(shí)，它默認(rèn)用 “就地復(fù)用” 策略。如果數(shù)據(jù)項(xiàng)的順序被改變，vue將不是移動(dòng) dom 元素來(lái)匹配數(shù)據(jù)項(xiàng)的順序， 而是簡(jiǎn)單復(fù)用此處每個(gè)元素，并且確保它在特定索引下顯示已被渲染過(guò)的每個(gè)元素。

為了給 vue 一個(gè)提示，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份，從而重用和重新排序現(xiàn)有元素，你需要為每項(xiàng)提供一個(gè)唯一 key 屬性

vue指令之v-if和v-show

v-if ： 條件為假，移除元素，條件為真，創(chuàng)建元素 *注意：存在較高的性能消耗*

v-show : 條件為假，隱藏元素，條件為真，顯示元素 *注意：存在較高的初始渲染消耗*

總結(jié)

以上是生活随笔為你收集整理的项目既有vue又有html,01-vue指令的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。