什么是vue.js

vue.js 是目前最火的一個前端框架，react是最流行的一個前端框架(react除了開發網站，還可以開發手機app， vue語法也是可以用于進行手機app開發的，需要借助于weex)

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

vue.js 是一套構建用戶界面的框架，只關注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合。(vue有配套的第三方類庫，可以整合起來做大型項目的開發)

框架和庫的區別

框架：是一套完整的解決方案；對項目的侵入性較大，項目如果需要更換框架，則需要重新架構整個項目。

庫(插件)：提供某一個小功能，對項目的侵入性較小，如果某個庫無法完成某些需求，可以很容易切換到其它庫實現需求。

vue指令之v-text和v-html

v-cloak : 能夠解決插值表達式的網速不佳時的閃爍問題

v-text : 1.沒有閃爍問題

2.會覆蓋元素原有的值

v-html ：1.會覆蓋元素原有的值

2.渲染html元素

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

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

直接使用指令v-bind

使用簡化指令?:

在綁定的時候，拼接綁定內容：:title="btntitle + ', 這是追加的內容'"

v-bind?縮寫

...

...

vue指令之v-on

v-on ：用于綁定事件

v-on?縮寫

...

...

案例：跑馬燈效果

1.html解構

{{info}}

2. vue實例

// 創建 vue 實例，得到 viewmodel

var vm = new vue({

el: '#app',

data: {

info: '猥瑣發育，別浪~！',

intervalid: null

},

methods: {

go() {

// 如果當前有定時器在運行，則直接return

if (this.intervalid != null) {

return;

}

// 開始定時器

this.intervalid = setinterval(() => {

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

}, 500);

},

stop() {

clearinterval(this.intervalid);

}

}

});

vue指令之事件修飾符

事件修飾符：

.stop 阻止冒泡

.prevent 阻止默認事件

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

.self 只當事件在該元素本身(比如不是子元素)觸發時觸發回調

.once 事件只觸發一次

vue指令之v-model和雙向數據綁定

v-model : 實現表單元素 和 model 中數據的雙向綁定

*注意：只能運用在表單元素中*

案例：簡易計算器

1.html結構

+

-

*

÷

2.vue實例

// 創建 vue 實例，得到 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樣式

數組

這是一個邪惡的h1

2.數組中使用三元表達式

這是一個邪惡的h1

3.數組中嵌套對象

這是一個邪惡的h1

4.直接使用對象

這是一個邪惡的h1

-使用內聯樣式

直接在元素上通過:style的形式，書寫樣式對象

這是一個善良的h1

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

在data上定義樣式：

data: {

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

}

在元素中，通過屬性綁定的形式，將樣式對象應用到元素中：

這是一個善良的h1

3.在:style中通過數組，引用多個data上的樣式對象

在data上定義樣式：

data: {

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

h1styleobj2: { fontstyle: 'italic' }

}

在元素中，通過屬性綁定的形式，將樣式對象應用到元素中：

這是一個善良的h1

vue指令之v-for和key屬性

迭代數組

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

2.迭代對象中的屬性

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

3.迭代數字

這是第 {{i}} 個p標簽

***注意***

2.2.0+ 的版本里，當在組件中使用v-for 時，key 現在是必須的。

當 vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用 “就地復用” 策略。如果數據項的順序被改變，vue將不是移動 dom 元素來匹配數據項的順序， 而是簡單復用此處每個元素，并且確保它在特定索引下顯示已被渲染過的每個元素。

為了給 vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key 屬性

vue指令之v-if和v-show

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。