vuejs 的自我學習

時間 2019-11-24

標籤 vuejs 自我學習简体版

原文原文鏈接

一，綁定方法v-bind

1，綁定方法：<a v-bind:href="url"></a>

縮寫：<a :href="url"> </a>

2,監聽方法： <a v-on:click="do"></a>

縮寫：<a @click = "do"></a>

二，vue實例

1，構造器

var vm = new Vue（{

//選項

}）

縮寫 new Vue（{

//選項

}）

2，屬性和方法

3，條件語句v-if，v-else，v-else-if

4，根據條件展現元素v-show

example：

<body>

<h1 v-show="ok">Hello!</h1>

</div>

new Vue({

el: '#app',

data: {

ok: true

}

})

</script>

</body>

5，循環語句v-for=「site in sites」

example1：

<div id="app"> <ol> <li v-for="site in sites"> {{ site.name }} </li> </ol> </div> <script> new Vue({ el: '#app', data: { sites: [ { name: 'Runoob' }, { name: 'Google' }, { name: 'Taobao' } ] } }) </script>

v-for 能夠經過一個對象的屬性來迭代數據

example2：能夠輸對象

<div id="app"> <ul> <li v-for="value in object"> {{ value }} </li> </ul> </div> <script> new Vue({ el: '#app', data: { object: { name: '菜鳥教程', url: 'http://www.runoob.com', slogan: '學的不只是技術，更是夢想！' } } }) </script>

example3:鍵值對（value,key）

<div id="app"> <ul> <li v-for="(value, key) in object"> {{ key }} : {{ value }} </li> </ul> </div>

example4:索引

<div id="app"> <ul> <li v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} </li> </ul> </div>

example4:循環整數

new Vue({ el: '#app' })

</script>

總結：v-for循環輸出，鍵值對，索引，整數，對象。vue中存在視圖模板template。

6，計算屬性computed，用於處理複雜邏輯，屬性默認getter，也存在setter。

區別：computed與methods，computed是將數據緩存而執行，methods在從新渲染時，函數從新調用執行，不緩存。

7，v-bind設置HTML樣式（style）和屬性（class）。返回結果能夠是字符串，對象或數組。

8，事件處理器v-on，經常使用於button，submit。

example：

<p>這個按鈕被點擊了 {{ counter }} 次。</p>

</div>

new Vue({

el: '#app',

data: {

counter: 0

}

})

</script>

9，修飾符

（1）事件修飾符：.stop,.prevent,.capture,.self,.once;

<a v-on:click.stop="doThis"></a>  <form v-on:submit.prevent="onSubmit"></form>  <a v-on:click.stop.prevent="doThat"></a>  <form v-on:submit.prevent></form>  <div v-on:click.capture="doThis">...</div>  <div v-on:click.self="doThat">...</div>  <a v-on:click.once="doThis"></a>

（2）按鍵修飾符:.enter,.tab,.delete,.esc,.space,.down,.left,.right,.ctrl,.alt,.shift,.meta

example;

<input v-on:keyup.13="submit">

example:

<p> <input @keyup.alt.67="clear">  <div @click.ctrl="doSomething">Do something</div>

10，表單：輸入框 input和textarea，複選框checkbox，單選按鈕radio

11，組件component（重點）

（1）全局組件component

註冊全局組件語法：Vue.component(tagName，options)

調用：<tagName></tagName>

example1:

</div>

// 註冊

Vue.component('runoob', {

})

// 建立根實例

new Vue({

el: '#app'

})

</script>

（2）局部組件child

<body>

</div>

var Child = {

}

// 建立根實例

new Vue({

el: '#app',

components: {

// <runoob> 將只在父模板可用

'runoob': Child

}

})

</script>

*重點（3）prop使用（prop驗證）

example：

Vue.component('example', { props: { // 基礎類型檢測（`null` 意思是任何類型均可以） propA: Number, // 多種類型 propB: [String, Number], // 必傳且是字符串 propC: { type: String, required: true }, // 數字，有默認值 propD: { type: Number, default: 100 }, // 數組／對象的默認值應當由一個工廠函數返回 propE: { type: Object, default: function () { return { message: 'hello' } } }, // 自定義驗證函數 propF: { validator: function (value) { return value > 10 } } } })

註釋：prop驗證規則type：string，number，boolean，function，object，array

type 也能夠是一個自定義構造器，使用 instanceof 檢測。

12，自定義指令（directive）

<p>頁面載入時，input 元素自動獲取焦點：</p>

</div>

// 註冊一個全局自定義指令 v-focus

Vue.directive('focus', {

// 當綁定元素插入到 DOM 中。

inserted: function (el) {

// 聚焦元素

el.focus()

}