new Vue(el, data, methods, computed, filters, components, 生命週期函數)
-
el:
掛載頁面元素
-
data:
數據
-
methods:
定義函數
-
computed:
計算屬性 這裏面定義的是方法 但是調用時一般是以變量的形式去調用的 這個要比 methods的方法效率更高 方法循環時會每次調用 而這個會有一個緩存 只會調用一次
-
filters:
定義過濾器函數
-
components:
局部組件註冊
vue的生命週期(創建->消亡)
- beforeCreate
-
created:
一般情況下會在這裏面做網絡請求
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
模板語法
-
插值語法:
{{ massage }} {{}}內不僅可以寫變量 也可以寫表達式
vue指令
插值指令
-
v-once:
只是一個指令 沒有="" 內容只能被賦值一次 當數據改變時並不會改變
-
v-html:
按照html語法加載數據
-
v-text:
將數據加載到標籤 並且覆蓋標籤內的所有內容
-
v-pre:
將所有的內容原封不動的展示出來 可以使模板插值語法失效 類似python的原始字符串
-
v-cloak:
這個屬性類似於display:none vue不解析就不顯示模板 在vue解析之前有這個屬性,解析之後將這個屬性刪除
動態綁定指令
- v-bind:
動態綁定屬性 (v-bind:src)可以縮寫爲(:src) 可以使用任何屬性 :src='' 內容支持變量、數組、對象、方法、以及表達式 -
v-on:
綁定事件 (v-on:click)可以縮寫爲(@click) 支持所有事件-
$event:
@click(prm, $event) $event默認寫法 接收瀏覽器產生的event對象
-
stop修飾符:
@click.stop 可以阻止事件冒泡
-
prevent修飾符:
@click.prevent 阻止submit提交
-
鍵盤修飾符:
@keyup.enter 監聽回車建做事件操作 enter表示回車 這裏可以更改爲其他鍵
-
once修飾符:
@click.once 事件只能被觸發一次 這裏防止重複提交很有效
-
-
v-for:
循環操作 在遍歷對象時 如果只接受一個值 默認爲value-
組件的key屬性
在循環是可以選擇綁定一個key 但是儘量不要綁定index 因爲index 是每次變化的 如果往list裏插入一個值 那麼所有的 index會重新排序做改變 而綁定item內的數據 則不受排序影響 所以性能更好 一般而言key會綁定一個唯一值
-
- v-if:
條件成立時渲染代碼快 - v-else:
else代碼塊 - v-else-if:
條件成立時渲染代碼快 - v-show:
條件成立時顯示代碼塊 否則隱藏代碼塊 和display:none相同 而v-if是直接不創建DOM 這裏會始終有DOM只是不顯示 - Vue.set(要修改的對象, 索引值, 要修改的值)
-
v-model:
雙向綁定 用來同步更新 默認爲value屬性-
lazy修飾符:
懶加載 不會實時的去雙向綁定更新 只有用戶回車或取消焦點的時候進行更新
-
number修飾符:
默認情況下雙向綁定的數據全部都是string類型 這裏可以指定綁定的類型
-
trim修飾符:
自動去除字符串兩邊的空格
-
<h2>{{message}}</h2>
<!--v-model 的雙向綁定-->
<input type="text" v-model="message">
<!--雙向綁定也可以用另一種方式來實現-->
<input type="text" :value="message" :input="valueChange">
<script >
function valueChange(event){
console.log("當輸入框內容被改變 input時間觸發, 通過瀏覽器產生的 event來獲取input內容");
this.message = event.target.value;
}
</script>
<!--簡寫-->
<input type="text" :value="message" @input="message=$event.target.value">
虛擬DOM
渲染
-
key渲染
通過標籤的key屬性 決定vue在更新DOM的時候是否重新加載DOM 如果是相同的key則可以服用 不用重新加載DOM 但是DOM的屬性數據會變化 如果是不相同則直接重新加載一個新的DOM
-
vue的響應式
並不是所有的修改都是響應式的 例如List的操作 如果使用 list.push("hello") 頁面是響應式的 若使用list[0] = 'hello' 此時數據已經改變但是 頁面不會進行響應式的修改
ES6
數組的方法
- push方法
向list最後插入一個值 - pop方法
從list最後取出一個值並刪除 - shift方法
從list取出第一個元素並刪除 - unshift方法
在list最前插入一個值 -
splice方法
-
刪除元素
如果是要刪除元素 第一個參數爲從第幾個開始 第二個參數傳入你要刪除幾個元素 如果只傳第一個元素 則第一個參數下標的元素 後面的全部刪除
-
插入元素
第一個表示開始元素 第二個參數默認爲0 第三個以後的參數爲要插入的參數
-
替換元素
第一個表示參數開始,第二個參數表示截止,第3個以後的參數表示插入的參數
-
- sort方法
將list進行排序 - reverse方法
將list進行反轉 - 高級字符串
`` 可以識別換行符
function
- function縮寫
add: function() {}
// 可以改寫爲
add(){}
- function不定長參數
add(...param){}
// ...表示可接受不定長的參數 此時param爲list類型
// 類似於python的 def add(*param)
- for循環
// 普通for循環
for (let i = 0; i < 10; i++){
console.log(list[i]);
}
// 索引for循環
for (let i in [1, 2, 3]){
console.log(list[i])
}
// 增強for循環
for (let item of [1, 2, 3]){
console.log(item)
}
- 高階函數
// filter函數
const numList = [10, 20, 100, 21, 50, 20, 332, 213, 2123];
let newList = numList.filter(function(n){
return n >= 50
});
// map函數
let new2List = newList.map(function(n) {
return n * 2
});
// reduce函數 對數組中所有內容進行彙總 第一個參數爲回調函數 第二個參數爲初始化的值
let totalCount = new2List.reduce(function(preValue, n){
// 初始化preValue是高階函數初始化的值 n是list中的元素
// 每一次回調都會將 return的結果賦值給preValue
return preValue + n
}, 0);
- 箭頭函數
const numList = [10, 20, 100, 21, 50, 20, 332, 213, 2123];
let total = numList.filter(n => n <= 50).map(n => n * 2).reduce((pre, n) => pre + n, 0);
console.log(total);
組件化
-
基本使用
- 全局組件 全局組件表示註冊的組件可以在任何地方使用
- 局部組件 創建的局部組件只能在掛載元素的內部使用
// 創建組件構造器(子組件)
const cpn1 = Vue.extend({
template: `
<div>
<h2>cpn1標題</h2>
<p>cpn1內容</p>
</div>
`
});
// 創建組件構造器(父組件)
const cpn = Vue.extend({
// ``是高級字符串 可以換行
template: `
<div>
<h2>cpn標題</h2>
<p>cpn內容</p>
<cpn1></cpn1>
</div>
`,
// 這裏可以在組件構造器內註冊其他組件 這注冊的這個組件可以用在模板內
components: {
cpn1: cpn1
}
});
// 註冊全局組件
Vue.component('my-dev', cpn);
// 註冊局部組件 vm可以看做是root組件
const vm = new Vue({
el: '#app',
data: {},
methods:{},
// 註冊局部組件
component:{
cpn: cpn
}
});
// 使用組件
// <my-dev></my-dev>
-
組件註冊語法糖
- 註冊 可以直接省略 extend 直接用對象進行替代
Vue.component('cpn1', {
template: `
<div>
<h2>cpn1標題</h2>
<p>cpn1內容</p>
</div>
`
});
- 模板分離寫法
<!--通過id 進行選擇器給template屬性賦值 替代template中看起來很難受的字符串-->
<script type="text/x-template" id="cpn">
<h3>標題</h3>
<p>內容。。。</p>
</script>
<template id="cpn2">
<h1>標題</h1>
</template>
<script>
Vue.component('my-cpn', {
template: "#cpn"
});
</script>
-
組件內容訪問Vue實例數據
默認組件內部是不能直接訪問Vue實例內的數據內容的
在組件的內部會有一個data屬性 而這個data屬性必須是一個函數 返回一個對象,對象內部保存着數據-
爲什麼組件內的data必須是一個函數?
因爲組件在複用時 應用的data如果是一個對象的話 ,那麼每次引用都是同一個對象,當對這個 對象作出更改的時候,所有用到該數據的地方都會被聯動修改,所以需要用函數返回一個對象 這代表這每一次 複用組件都會去調用一次data函數 獲取一個新的data對象,這樣就能相互隔離,其實這裏是類似於深拷貝和淺拷貝的關係
-
組件之間的通信
-
props的用法(父組件向子組件傳遞)
- props支持的數據類型
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
- 注意: 當定義分離模板時需要一個根組件 如果沒有根組件則不能正常解析
<!--子組件模板-->
<template id="cpn">
<div>
<p>{{c_movies}}</p>
<h2>{{c_message}}</h2>
<ul>
<li v-for="item in c_movies"> {{item}}</li>
</ul>
</div>
</template>
<!--父組件模板-->
<div id="app">
<!-- props數據來雙向綁定父組件中的數據-->
<cpn :c_movies="movies" :c_message="message"></cpn>
</div>
<script>
// 子組件
const cpn = {
template: "#cpn",
// 父親組件向子組件傳遞數據
// 第一種 數組方式
// props: ['c_movies', 'c_message'],
// 第二種 對象方式
props: {
// 1.類型限制
// c_movies: Array,
// c_message: String,
// 2.提供一些默認值
c_message: {
// 數據類型
type: String,
// 默認值
default: '這個是消息數據',
// 是否必選參數
required: true,
},
c_movies: {
type: Array,
default: []
}
},
data() {
return {}
}
};
// 父組件
const vm = new Vue({
el: "#app",
data: {
message: '信息',
movies: ['海王', '海賊王', '慶餘年', '神話']
},
components: {
cpn: cpn
}
});
</script>
- this.$emit的用法(子組件向父組件傳遞事件)
<!--子組件模板-->
<template id="cpn">
<div>
<button v-for="item in categories" @click="bthClick(item)">
{{item.name}}
</button>
</div>
</template>
<!--父組件模板-->
<div id="app">
<!--監聽子組件事件-->
<!--監聽到子組件事件後 如果綁定父組件的method若不傳item 則默認就是item 不是event-->
<cpn @item_click="cpn_click"></cpn>
</div>
<script>
// 子組件
const cpn = {
template: "#cpn",
data() {
return {
categories: [
{id: '1', name: '熱門推薦'},
{id: '2', name: '手機數碼'},
{id: '3', name: '家用家電'},
{id: '4', name: '電腦辦公'},
{id: '5', name: '生活日用'},
]
}
},
methods: {
bthClick(item) {
console.log(item);
// 發射子組件的自定義事件到父組件 傳遞item參數
this.$emit("item_click", item)
}
}
};
// 父組件
const vm = new Vue({
el: "#app",
data: [],
components: {
cpn
},
methods: {
// 接受item參數
cpn_click(item) {
console.log('監聽到了來自子組件的事件!');
console.log(item);
}
}
});
</script>