㈠ vue過濾器結合非同步函數的問題
是的，直接用原生的寫，不要捨本逐末。
㈡ vue中關於屬性和方法客戶端代碼怎麼寫
直接寫就行了。 如果需要傳入變數，則寫成： vue中用v-bind:屬性名="屬性值" 的方式動態設置屬性，注意屬性值的引號內不要加{{}}
㈢ Vue如何使用axios非同步請求後台
全局使用Axios
首先，在自己建的公用方法的文件中new一個新的HttpUtil.js文件。以下為HttpUtil.js的內容：
var axios = require('axios')// 配置項目根如路徑var root = 'http://localhost:8090/manage'// axios請求function httpApi (method, url, params) { return new Promise((resolve, reject) => { axios({ method: method, url: url, data: method === 'POST' || method === 'PUT' ? params : null, params: method === 'GET' || method === 'DELETE' ? params : null, baseURL: root, withCredentials: false }).then(
(response) => {
resolve(response)
}
).catch(
(error) => {
reject(error)
}
)
})
}// 返回在vue模板中的調用介面export default { get: function (url, params) { return httpApi('GET', url, params)
}, post: function (url, params) { return httpApi('POST', url, params)
}, put: function (url, params) { return httpApi('PUT', url, params)
}, delete: function (url, params) { return httpApi('DELETE', url, params)
}
}
㈣ 為什麼vue中watch可以執行非同步,而computed只能執行同步呢
computed 需要 retrun，而 watch 不需要。
㈤ vue $emit 調用父組件非同步方法，執行完畢後再執行子組件的某方法，如何實現
//可以使用回調的方法
//父頁面
//父頁面調用組件的html中添加事件@test="test"
methods:{
test(data,cab){
setTimeout(()=>{
//這里使用定時器模擬執行完方法
console.log(data)//這是傳遞過來的參數用於處理
data++
cab(data)//將處理完成的數據返回回去
},2000)
}
}
//子頁面
this.$emit('tset',1,(res)=>{
console.log(res)//2秒後會執行這一句列印2
})
//我們也可以用Promise的方法代替回調
methods:{
test(data){
returnnewPromise((resolve)=>{
setTimeout(()=>{
//這里使用定時器模擬執行完方法
console.log(data)//這是傳遞過來的參數用於處理
data++
resolve(data)//將處理完成的數據返回回去
},2000)
})
}
}
//子頁面
constres=awaitthis.$emit('tset',1)
console.log(res)//2秒後會執行這一句
㈥ vuex的五個屬性及使用方法
vuex的五個屬性及使用方法具體如下：
VueX是一個專門為Vue.js應用設計的狀態管理構架，統一管理和維護各個vue組件的可變化狀態(你可以理解成vue組件里的某些data)。
Vuex有五個核心概念：
state,getters,mutations,actions,moles。
1.state：vuex的基本數據，用來存儲變數
2.geeter：從基本數據(state)派生的數據，相當於state的計算屬性
3.mutation：提交更新數據的方法，必須是同步的(如果需要非同步使用action)。每個mutation都有一個字元串的事件類型(type)和一個回調函數(handler)。回調函數就是我們實際進行狀態更改的地方，並且它會接受state作為第一個參數，提交載荷作為第二個參數。
4.action：和mutation的功能大致相同，不同之處在於==》1.Action提交的是mutation，而不是直接變更狀態。2.Action可以包含任意非同步操作。
5.moles：模塊化vuex，可以讓每一個模塊擁有自己的state、mutation、action、getters,使得結構非常清晰，方便管理。
㈦ Vue組件中prop屬性使用說明實例代碼詳解
Prop
的大小寫
(camelCase
vs
kebab-case)
HTML
中的特性名是大小寫不敏感的，所以瀏覽器會把所有大寫字元解釋為小寫字元。這意味著當你使用
DOM
中的模板時，camelCase
(駝峰命名法)
的
prop
名需要使用其等價的
kebab-case
(短橫線分隔命名)
命名：
Vue.component('blog-post',
{
//
在
JavaScript
中是
camelCase
的
props:
['postTitle'],
template:
'<h3>{{
postTitle
}}</h3>'
})
<!--
在
HTML
中是
kebab-case
的
-->
<blog-post
post-title="hello!"></blog-post>
重申一次，如果你使用字元串模板，那麼這個限制就不存在了。
靜態的和動態的
Prop
像這樣，你已經知道了可以像這樣給
prop
傳入一個靜態的值：
<blog-post
title="My
journey
with
Vue"></blog-post>
你也知道
prop
可以通過
v-bind
動態賦值，例如：
<blog-post
v-bind:title="post.title"></blog-post>
在上述兩個示例中，我們傳入的值都是字元串類型的，但實際上任何類型的值都可以傳給一個
prop。
傳入一個數字
<!--
即便
`42`
是靜態的，我們仍然需要
`v-bind`
來告訴
Vue
-->
<!--
這是一個
JavaScript
表達式而不是一個字元串。-->
<blog-post
v-bind:likes="42"></blog-post>
<!--
用一個變數進行動態賦值。-->
<blog-post
v-bind:likes="post.likes"></blog-post>
傳入一個布爾值
<!--
包含該
prop
沒有值的情況在內，都意味著
`true`。-->
<blog-post
favorited></blog-post>
<!--
即便
`false`
是靜態的，我們仍然需要
`v-bind`
來告訴
Vue
-->
<!--
這是一個
JavaScript
表達式而不是一個字元串。-->
<base-input
v-bind:favorited="false">
<!--
用一個變數進行動態賦值。-->
<base-input
v-bind:favorited="post.currentUserFavorited">
傳入一個數組
<!--
即便數組是靜態的，我們仍然需要
`v-bind`
來告訴
Vue
-->
<!--
這是一個
JavaScript
表達式而不是一個字元串。-->
<blog-post
v-bind:comment-ids="[234,
266,
273]"></blog-post>
<!--
用一個變數進行動態賦值。-->
<blog-post
v-bind:comment-ids="post.commentIds"></blog-post>
傳入一個對象
<!--
即便對象是靜態的，我們仍然需要
`v-bind`
來告訴
Vue
-->
<!--
這是一個
JavaScript
表達式而不是一個字元串。-->
<blog-post
v-bind:comments="{
id:
1,
title:
'My
Journey
with
Vue'
}"></blog-post>
<!--
用一個變數進行動態賦值。-->
<blog-post
v-bind:post="post"></blog-post>
傳入一個對象的所有屬性
如果你想要將一個對象的所有屬性都作為
prop
傳入，你可以使用不帶參數的
v-bind
(取代
v-bind:prop-name)。例如，對於一個給定的對象
post：
post:
{
id:
1,
title:
'My
Journey
with
Vue'
}
下面的模板：
<blog-post
v-bind="post"></blog-post>
等價於：
<blog-post
v-bind:id="post.id"
v-bind:title="post.title"
></blog-post>
Vue的組件中的props屬性單向數據流
所有的
prop都使得其父子prop之間形成了一個單向下行綁定：父級
prop
的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外改變父級組件的狀態，從而導致你的應用的數據流向難以理解。
額外的，每次父級組件發生更新時，子組件中所有的
prop
都將會刷新為最新的值。這意味著你不應該在一個子組件內部改變
prop。如果你這樣做了，Vue
會在瀏覽器的控制台中發出警告。
這里有兩種常見的試圖改變一個
prop
的情形：
這個
prop
用來傳遞一個初始值；這個子組件接下來希望將其作為一個本地的
prop
數據來使用。在這種情況下，最好定義一個本地的
data
屬性並將這個
prop
用作其初始值：
props:
['initialCounter'],
data:
function
()
{
return
{
counter:
this.initialCounter
}
}
這個
prop
以一種原始的值傳入且需要進行轉換。在這種情況下，最好使用這個
prop
的值來定義一個計算屬性：
props:
['size'],
computed:
{
normalizedSize:
function
()
{
return
this.size.trim().toLowerCase()
}
}
注意在
JavaScript
中對象和數組是通過引用傳入的，所以對於一個數組或對象類型的
prop
來說，在子組件中改變這個對象或數組本身將會影響到父組件的狀態。
Prop
驗證
我們可以為組件的
prop
指定需求。如果有一個需求沒有被滿足，則
Vue
會在瀏覽器控制台中警告你。這在開發一個會被別人用到的組件時尤其有幫助。
為了定製
prop
的驗證方式，你可以為
props
中的值提供一個帶有驗證需求的對象，而不是一個字元串數組。例如：
Vue.component('my-component',
{
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
['success',
'warning',
'danger'].indexOf(value)
!==
-1
}
}
}
})
當
prop
驗證失敗的時候，(開發環境構建版本的)
Vue
將會產生一個控制台的警告。
注意那些
prop
會在一個組件實例創建之前進行驗證，所以實例的屬性
(如
data、computed
等)
在
default
或
validator
函數中是不可用的。
類型檢查
type
可以是下列原生構造函數中的一個：
String
Number
Boolean
Function
Object
Array
Symbol
額外的，type
還可以是一個自定義的構造函數，並且通過
instanceof
來進行檢查確認。例如，給定下列現成的構造函數：
function
Person
(firstName,
lastName)
{
this.firstName
=
firstName
this.lastName
=
lastName
}
你可以使用：
Vue.component('blog-post',
{
props:
{
author:
Person
}
})
來驗證
author
prop
的值是否是通過
new
Person
創建的。
非
Prop
的特性
一個非
prop
特性是指傳向一個組件，但是該組件並沒有相應
prop
定義的特性。
因為顯式定義的
prop
適用於向一個子組件傳入信息，然而組件庫的作者並不總能預見組件會被用於怎樣的場景。這也是為什麼組件可以接受任意的特性，而這些特性會被添加到這個組件的根元素上。
例如，想像一下你通過一個
Bootstrap
插件使用了一個第三方的
組件，這個插件需要在其
上用到一個
data-date-picker
特性。我們可以將這個特性添加到你的組件實例上：
<bootstrap-date-input
data-date-picker="activated"></bootstrap-date-input>
然後這個
data-date-picker=」activated」
特性就會自動添加到<bootstrap-date-input>
的根元素上。
替換/合並已有的特性
想像一下
<bootstrap-date-input>
的模板是這樣的：
<input
type="date"
class="form-control">
為了給我們的日期選擇器插件定製一個主題，我們可能需要像這樣添加一個特別的類名：
<bootstrap-date-input
data-date-picker="activated"
class="date-picker-theme-dark"
></bootstrap-date-input>
在這種情況下，我們定義了兩個不同的
class
的值：
form-control，這是在組件的模板內設置好的
date-picker-theme-dark，這是從組件的父級傳入的
對於絕大多數特性來說，從外部提供給組件的值會替換掉組件內部設置好的值。所以如果傳入
type=」text」
就會替換掉
type=」date」
並把它破壞！慶幸的是，class
和
style
特性會稍微智能一些，即兩邊的值會被合並起來，從而得到最終的值：form-control
date-picker-theme-dark。
禁用特性繼承
如果你不希望組件的根元素繼承特性，你可以設置在組件的選項中設置
inheritAttrs:
false。例如：
Vue.component('my-component',
{
inheritAttrs:
false,
//
...
})
這尤其適合配合實例的
$attrs
屬性使用，該屬性包含了傳遞給一個組件的特性名和特性值，例如：
{
class:
'username-input',
placeholder:
'Enter
your
username'
}
有了
inheritAttrs:
false
和
$attrs，你就可以手動決定這些特性會被賦予哪個元素。在撰寫基礎組件的時候是常會用到的：
Vue.component('base-input',
{
inheritAttrs:
false,
props:
['label',
'value'],
template:
`
<label>
{{
label
}}
<input
v-bind="$attrs"
v-bind:value="value"
v-on:input="$emit('input',
$event.target.value)"
>
</label>
`
})
這個模式允許你在使用基礎組件的時候更像是使用原始的
HTML
元素，而不會擔心哪個元素是真正的根元素：
<base-input
v-model="username"
class="username-input"
placeholder="Enter
your
username"
></base-input>
總結
以上所述是小編給大家介紹的Vue組件中prop屬性使用說明，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
您可能感興趣的文章:VueJs組件prop驗證簡單介紹Vue組件選項props實例詳解vue父組件通過props如何向子組件傳遞方法詳解詳解vue2父組件傳遞props非同步數據到子組件的問題詳解vue父子組件間傳值(props)Vue2.0利用
v-model
實現組件props雙向綁定的優美解決方案
㈧ 一個vue非同步請求的問題,直接在data裡面調用非同步方法
這是ES6的語法，
對象解構和箭頭函數了解下
㈨ vue怎麼使用ajax非同步jsonp
使用vue.js與後台實現數據交互的方法是利用vue-resource組件提供的一系列api： get(url, [data], [success], [options]) post(url, [data], [success], [options]) put(url, [data], [success], [options]) patch(url, [data], [success], [opti...
㈩ Vue 在更新 DOM 時是非同步執行的，怎麼理解嗎
是非同步的。
Vue在檢測到你的數據發生變化時， 將開啟一個非同步更新隊列，通過DIFF演算法找出實際需要更新的DOM元素，需要等隊列中所有數據變化完成之後，才統一進行實際DOM更新。