⑴ VUE DOM載入後執行自定義事件的方法
最近想用vue做一個小東西，誰知道一開始就遇到了一個棘手的問題：
首先我想在頁面載入前通過ajax請求頁面展示所需要的信息，於是我在created鉤子函數裡面請求了我想要的數據
created:function(){
var
url="/indexitem";
var
_self=this;
$.get(url,function(data){
_self.items=data;
});
$.get('/banner',function(data){
_self.banners=data；
});
}
這一步很順利，接下來就是要將數據綁定到對應的元素中，我在這里需要將請求得到的圖片地址綁定到輪播圖對應的元素中，
我這里採用的是mui框架中提供的圖片輪播（移動端，支持手勢滑動），問題恰恰就這里：
<div
id="slider"
class="mui-slider"
@click="greet()">
<div
class="mui-slider-group
mui-slider-loop">
<div
class="mui-slider-item
mui-slider-item-plicate"><a
href="#"
rel="external
nofollow"
rel="external
nofollow"
rel="external
nofollow"
:style="{backgroundImage:
'url('
+
banners[banners.length-1].src+
')',backgroundSize:'cover'}"></a></div>
<div
class="mui-slider-item"
v-for="cc
in
banners"><a
href="#"
rel="external
nofollow"
rel="external
nofollow"
rel="external
nofollow"
:style="{backgroundImage:
'url('
+
cc.src+
')',backgroundSize:'cover'}"></a></div>
<div
class="mui-slider-item
mui-slider-item-plicate"><a
href="#"
rel="external
nofollow"
rel="external
nofollow"
rel="external
nofollow"
:style="{backgroundImage:'url('+banners[0].src+')',backgroundSize:'cover'}"></a></div>
</div>
<div
class="mui-slider-indicator">
<div
class="mui-indicator
mui-active"></div>
<div
class="mui-indicator"></div>
<div
class="mui-indicator"></div>
<div
class="mui-indicator"></div>
</div>
</div>
我綁定完數據之後，發現輪播圖失效了，因為我之前用原生js寫的時候遇到過同樣的問題，我當時的解決辦法是等頁面載入完成後重新進行滑動初始化，但是今天用vue我蒙了，試了很多生命周期函數也無法確保在頁面載入完成後進行初始化。
vue.js更多的希望是通過數據綁定來代替直接通過dom操作，而vue並沒有提供渲染完成的鉤子。
所以我今天的解決辦法是：setTimeout（）
在實例化VUE對象後添加下面代碼：
setTimeout(function(){
console.log($('#slider').length);
var
gallery
=
mui('.mui-slider');
gallery.slider({
interval:
3000//自動輪播周期，若為0則不自動播放，默認為0；
});
},1000);
以上這篇VUE
DOM載入後執行自定義事件的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:Vue自定義事件(詳解)淺談Vue.js
組件中的v-on綁定自定義事件理解Vue.js自定義事件的表單輸入組件方法
⑵ 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 框架怎麼才能先渲染頁面 後載入腳本
我們在使用Vue.js的時候，最基本的一個使用，就是在HTML引入Vue.js的庫文件，並寫如下一段代碼：
1.var app = new Vue({
2. el: '#app',
3. data: {
4. message: 'Hello Vue!'
5. }
6.})
new Vue，本質就是生成一個Vue的對象，我們來了解一下這個生成Vue對象的過程是怎樣的：
首先，Vue的入口是/src/entries/web-runtime-with-compiler.js，這是由config.js配置文件決定的。
這個入口文件中import了很多文件，其中有一條主要的脈絡：
/src/entries/web-runtime-with-compiler.js
引用了/src/entries/web-runtime.js
引用了/src/core/index.js
引用了/src/core/instance/index.js
⑷ 為什麼我使用vue的時候用路由時 可以中使用sub
Vue.js很簡單。正因為如此簡單，人們常常認為其適合於小項目。雖然真正的Vue.js核心知識只是一個視圖層庫，實際上有一組工具，將使您能夠使用Vue.js構建完整的大規模SPA（單頁應用程序）。 SPA應用可以在不完全重新載入網頁，產生一個更流暢的用戶體驗到的用戶交互響應。還有好的副作用，SPA還鼓勵後端專注於展示數據端點，這使得整體架構更加分離，並且對於其他類型的客戶端可能是可重用的。 從開發人員的角度來看，SPA和傳統的後端呈現應用程序之間的主要區別是，我們必須將客戶端視為具有自己架構的應用程序。通常，我們需要處理路由，數據獲取和持久性，查看渲染和必要的構建設置，以便於模塊化代碼庫。 對於基於Vue.js的SPA，下面工具將幫助你： 1.視圖層：Vue.js 2.路由：vue-router，Vue的官方路由器 3.狀態管理：vuex，受Flux/Rex啟發的狀態管理解決方案 4.服務通訊：vue-resource這是和RESTful後端交互的介面 5.構建工具：Webpack和vue-loader進行模塊 熱刷新ES2015和預處理器等重要的組件 視圖層 本系列假設您已經熟悉Vue.js的基礎知識，將Vue.js用於大型SPA時的核心概念是：將應用程序分為許多嵌套的自定義組件。在數據流的組件熟悉props和通訊定義事件直接進行平衡設計，將復雜組件切分為小型解耦的單元，更易於維護。 路由器 官方VUE路由器庫處理客戶端的路由，同時支持哈希模式和HTML5的歷史模式。它與獨立路由庫有點不同，它與Vue.js深度集成，並假設我們將嵌套路由映射到嵌套Vue組件。 當使用vue-router時，我們將組件作為「pages」實現，使用這些組件能夠實現黨路由變化時，鉤子函數被調用。 狀態管理 狀態管理是只有當應用程序復雜性超過一定水平時才出現。當有多個組件需要共享可變的應用程序狀態時，如果您的應用程序中沒有專用於管理此類共享狀態的層，則可能很難推理和維護。 伺服器通信 在本案例中，我們會使用RESful後端，這是一個Go語言編寫的 go-vue-event項目 構建工具 首先，整個編譯工具鏈依靠的Node.js ，管理所有使用庫包和工具依賴NPM 。 雖然NPM開始是Node.js後端模塊的包管理器，但它現在也廣泛用於前端包管理。 因為所有NPM包是使用CommonJS模塊格式創建的，我們需要一個特殊的工具將這些模塊「捆綁」到適合最終部署的文件中。 Webpack就是這樣一個工具，你可能也聽說過一個類似的工具Browserify。 我們將使用Webpack的系列，因為它提供了更多的高級功能開箱即用，如熱重新載入，bundle-splitting和靜態文件處理。 無論WebPACK中和Browserify它們暴露的API，使我們能夠裝載更多的CommonJS的模塊：例如，我們可以直接require()的HTML文件通過將其轉化成一個JavaScript字元串。 通過將你的前端的一切，包括HTML，CSS甚至圖像文件看作為模塊依賴，可以在捆綁過程中任意轉換，Webpack實際上涵蓋了構建SPA時遇到的大多數構建任務。 我們主要是要使用WebPACK和普通 NPM腳本 ，而不需要 任務運行器如Gulp或Grunt。 使用vue-loader 激活單頁中Vue組件： //app.vue <template> <h1 class="red">{{msg}}</h1> </template> export default{ data(){ return{ msg:'Hello world!' } } } <style> .red{ color:#f00; } </style> WebPACK和vue-loader組合能帶來： ： 1.默認情況下ES2015。 這允許我們今天使用未來的JavaScript語法，產生更具表達性和簡潔的代碼。 2.預埋處理器 。 您可以在單文件Vue組件中使用預處理器，例如使用Jade作為模板，使用SASS作為樣式。 3.Vue組件內部CSS輸出將自動加前綴。 您也可以使用任何PostCSS插件，如果你喜歡。 4.作用域CSS。 通過增加一個scoped屬性添加到<style> ，VUE-loader將通過重寫模板和樣式模擬輸出，特定組件的范圍內的CSS不會影響應用程序的其他部分。 5.熱刷新 。在開發過程中編輯Vue組件時，組件將「熱切換」到正在運行的應用程序中，在不重新載入頁面的情況下維護應用程序狀態。 這極大地提高了開發體驗。 開始設置 現在有了所有這些花哨的功能，對於自己組裝構建棧可能是一個非常艱巨的任務！ 幸運的是，Vue公司提供vue-cli ，一個命令行界面，十分容易上手： npm install -g vue-cli vue init webpack my-project 回答提示，CLI具有開箱即用特點。 所有你需要做的下一步是： cd my-project npm install # install dependencies npm run dev # start dev server at localhost:8080 以上所述是小編給大家介紹的使用Vue.js創建一個時間跟蹤的單頁應用，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
⑸ vue內容都會被自動轉義，所以防止了腳本注入嗎
其實就是XSS攻擊
⑹ 在vue中script里的import是什麼意思
一個不錯的開頭
1 . 首先全局裝vue-cli，它是vue的一個腳手架。
cnpm i -g vue-cli1
2 . 然後進入workspace。執行了如下代碼，生成vue項目的初始化工作。這里是基於webpack打包。
vue init webpack learnvue1
3 . 引導定製過程中，測試的選項我全部選了否，完了之後，根據提示，進入learnvue。執行 了
cnpm i1
4 . ok，一切順利。然後，執行
cnpm run dev
12
5 . ok，打開瀏覽器跑起來了，正常。
然而
6 . 解決scanning files to index
打開常用的webstorm 10.打開這個learnvue。看到了 scanning files to index。意思是正在掃描文件索引。聽起來是項目文件讀取的問題。怎麼可能要掃描這么長時間。沒有大文件呀？於是我放棄這次vue init出來的文件。決定刪除它。就在我刪除文件的時候，window提示我文件目錄結構太深，無法刪除。這讓我想到了什麼，那就是scanning files to index也是這個原因。唯一的就是node_moles。解決 scanning files to index的辦法就是在這個node_mole文件上右鍵。mark Directory As > Excluded。
重新打開項目。ok!
7 . webtorm的兩個vue插件都裝了。(vue-for-idea和vue.js)
8 . 解決es 6
當我想愉快地嘗試vue的時候，發現script里的代碼給我標紅了，說我語法錯誤了。於是在language &&framework里 解決es 6的問題。並且在vue的script里用type=」text/babel」或者type=」text/ecmascipt-6」什麼的，還是描紅報錯。
⑺ vue從後台獲取的數據有html標簽通過v-html渲染到頁面，然後怎麼給這裡面的html添加樣式
要輸入代碼。
html：
<templatev-for="(item,index)inquestionnaireList">
<divclass="questionnaire-section"@click="onSection(item.id)">
<divclass="title">{{item.title}}</div>
</div>
</template>
varapp=newVue({
el:'#app',
data:{
questionnaireList:[],//定義一個空數組
currentPage:1,//當前頁
},
//載入完後自動執行
mounted:function(){
varthat=this;
that.questionnaireData();//調用方法
},
methods:{
questionnaireData:function(){
varthat=this;
$.ajax({
url:url+"questionnaire",
type:"GET",
data:{
currPage:that.currentPage
},
success:function(res){
res.data.questions.map(function(item,index){
that.questionnaireList.push(item);
(7)vue字元串腳本擴展閱讀：
一、在編輯器中創建一個web項目，抄並在目錄中創建一個新的靜態頁面buttonclick.html：
二、在title標簽中介紹准備好的vue.js庫文件。在這里，將JS文件放在JS目錄中，然後在body標記中插入一個div和四個按鈕，將click事件襲與Vue中的v-on標記綁定：
三、接下來，插入腳本標記，在標百記中寫入事件函數，在事件中傳遞參數，然後打開瀏覽器查看結果：
四、打開瀏覽器並單擊其中一度個按鈕以打開窗口返回的元素對象。以上是如何使用Vue獲取click事件元素。