vue的基礎用法

2022-07-21 23:12:22 字數 4187 閱讀 9431

// 掛載點

// vue 物件中管理的資料 vm ( viewmodel ), 可以直接在面板上通過宣告來進行資料訪問

data:

})

瀏覽器顯示如圖:

2.1、v-html指令

雙大括號會將資料解釋為純文字,而非 html 。為了輸出真正的 html ,你需要使用 v-html 指令 被插入的內容都會被當做 html —— 資料繫結會被忽略。注意,你不能使用 v-html 來復合區域性模板,因為 vue 不是基於字串的模板引擎。元件更適合擔任 ui 重用與復合的基本單元

// 2、v-heml 指令

data()

} })

瀏覽器顯示如圖:

2.2、v-bind指令

v-bind 屬性被稱為指令。指令帶有字首 v-,以表示它們是 vue.js 提供的特殊屬性。這個指令的簡單含義是說: 將這個元素節點的 title 屬性和 vue 例項的 message 屬性繫結到一起。

data() }})

瀏覽器顯示如圖:

沒找到懸停時顯示不出來的原因,後面在看看

2.3、class 與 style 繫結

我們也可以在物件中傳入更多屬性用來動態切換多個 class 。此外, v-bind:class 指令可以與普通的 class 屬性 共存。如下模板:

第一種: 繫結某乙個 class

.test 

.test1

4、class 與 style 繫結:你好程式猿

// 4、v-bind 指令 class 與 style 繫結

data:

})

瀏覽器顯示效果如圖:

第二種: 直接繫結資料裡的乙個物件

.test 

.test1

data:

}})

瀏覽器顯示效果如圖:

第三種: 陣列語法

.test 

.test1

data:

})

瀏覽器顯示效果如圖:

繫結內嵌style就不說了可以查一下,和這個差不多!!!!

2.4、條件與迴圈

第一種: v-if

5、if: 我喜歡寫**

5、else: 我不喜歡寫**

data:

})

還可以這樣判斷,這裡就不在做例子了

a b

第二種: v-for

data:

}})迭代整數

}結果: 1 2 3 4 5 6 7 8 9 10

2.5:、處理使用者輸入

6、v-on:點選

// 第一種: v-on指令

// 在監聽事件中觸發對 this.data的修改

data: ,

methods:

}})// 第二種: v-model 指令

// 在表單輸入和應用狀態中做雙向資料繫結

data:

})

3.1 元件是什麼
元件可以擴充套件html元素,封裝可重用的**。在較高層面上,元件是自定義元素,vue.js的編譯器為它新增特殊功能。在有些情況下,元件也可以是原生html元素形式,以is特性擴充套件。

3.2 元件的註冊或建立
// 全域性註冊

vue.component('hello', )

})// 區域性註冊: 通過使用元件例項選項註冊,可以使用元件僅在另乙個例項/元件的作用域中可用

let hellovue =

components:

})

注意:當使用dom作為模板時(例如,將el選項掛載到乙個已存在的元素上),

你會受到html的一些限制,因為vue只有在瀏覽器解析和標準化html後才能獲取模板內容。

尤其像這些元素限制了能被它包裹的元素,只能出現在其它元素內部。

例如:

//這個會報錯

//這個是正確的

// 特殊

let trrow =

components:

})

3.3、data

let data =

vue.component('vue-counter', }',

// data是乙個函式,因此vue不會警告

// 但是我們為沒有個元件返回了同乙個物件引用

data: function()

}})})3.4、 prop的使用

元件例項的作用域是孤立的。這意味著不能並且不應該在子元件的模板內直接引用父元件的資料。可以使用props把資料傳給子元件

props是父元件用來傳遞資料的乙個定義屬性。子元件需要顯示的用props選項宣告「props」

// 宣告變數 物件

let container = }}

let child = }

`,// props在這裡使用

props: ['msg']

}// 註冊元件

vue.component('container', container);

vue.component('child', child);

})3.5、 單向資料流

prop是單向繫結的,當父級元件的屬性變化時,將傳導給子元件,但是不會反過來。這是為了防止子元件無意修改了父元件的狀態————這回讓應用的資料流難以理解

這個例子和3.4的例子差不多,可以對比一下

// 宣告變數 物件

let containers = }}

let childs = }

`,// props在這裡使用

props: ['msg'],

data() }}

// 註冊元件

vue.component('containers', containers);

vue.component('childs', childs);

})

3.6、自定義事件
父元件是使用props傳遞資料給子元件,但如果子元件要把資料傳遞回去,應該用自定義事件方法來做

使用$on(eventname)監聽事件

使用$emit(eventname)觸發事件

// 宣告變數 物件

let containers =

}, methods: }}

let childs = }

`,// props在這裡使用

props: ['msg'],

data()

}, methods: }}

// 註冊元件

vue.component('containers', containers);

vue.component('childs', childs);

})路由的基本用法可以去看一下官網的文件

vue的基礎用法(4)

是在不改變原始資料的情況下 修改資料的顯示形式 過濾器可以是串聯使用的 當資料發生改變的時候 過濾器就會重新計算 過濾器使用的時候 使用 連線 叫做管道符 type text v model msg h2 h2 div src script src script newvue 過濾器 filters...

Vue 基礎指令用法總結

v text關聯標籤的文字內容 textcontent 不能讀取html標籤 v html關聯更新元素的 innerhtml 可以讀取html標籤 v bind當表示式的值改變時,將其產生的連帶影響,響應式地作用於 dom 簡寫 class msg 超連結超連結v on元素繫結事件 超連結 超連結事...

Vue 全域性元件(最簡單的基礎用法)

由於是基礎用法,這裡暫時不講在 webpack 裡怎麼寫元件。vue的元件最大的作用就是偷懶 一次成型,多次呼叫 本節講解順序 先給 看效果講解 html結構 這裡有6個標籤。很明顯,原生 html 是沒有標籤的。在 js 裡定義元件,讓標籤活起來。onload 這裡是元件的子標籤呢 data fu...