vue的基礎用法

// 掛載點
// 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的基礎用法

vue的基礎用法（4）

Vue 基礎指令用法總結

Vue 全域性元件（最簡單的基礎用法）

vue的基礎用法

vue的基礎用法（4）

Vue 基礎指令用法總結

Vue 全域性元件（最簡單的基礎用法）

相關推薦