?vue-router

除了使用?<router-link>?創(chuàng)建 a 標(biāo)簽來定義導(dǎo)航鏈接，我們還可以借助 router 的實例方法，通過編寫代碼來實現(xiàn)。

1）router.push(location)

這個方法會向 history 棧添加一個新的記錄，所以，當(dāng)用戶點擊瀏覽器后退按鈕時，則回到之前的 URL。

當(dāng)你點擊?<router-link>?時，這個方法會在內(nèi)部調(diào)用，所以說，點擊?<router-link :to="...">?等同于調(diào)用router.push(...)。

2）router.replace(location)

跟?router.push?很像，唯一的不同就是，它不會向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當(dāng)前的 history 記錄。

點擊<router-link :to="..." replace>等同于調(diào)用router.replace(...)。

?

vue組件

注冊

1）全局注冊

//app.js Vue.component('ttModal', Vue.asyncComponent('Common','ttModal')); //ttModal.html <div class="tt-modal-wrapper"> <div class="modal-mask" v-bind:class="{'in': isModalIn}" v-on:click="modalClose"></div> <div class="modal-content" v-bind:class="{'in': isModalIn}"> modal-content. <slot name="content"></slot> </div> </div> //topicLeft.html <tt-modal?v-if="isShowCreateTopic" v-on:close="isShowCreateTopic = false"> <div slot="content">topicLeft.</div> </tt-modal>

渲染后：

//ttModal.html methods: {modalClose: function(e) { if(this.$el.contains(e.target)) {
　　　　　　　//vm.$el：Vue 實例使用的根 DOM 元素 this.$emit('close');
　　　　　　　//vm.$emit：觸發(fā)當(dāng)前實例上的事件即close事件 } } }

<slot>?元素可以用一個特殊的屬性?name?來配置如何分發(fā)內(nèi)容。多個 slot 可以有不同的名字。具名 slot 將匹配內(nèi)容片段中有對應(yīng)?slot?特性的元素。

2）局部注冊

　?通過使用組件實例選項注冊，可以使組件僅在另一個實例/組件的作用域中可用。

使用組件時，大多數(shù)可以傳入到 Vue 構(gòu)造器中的選項可以在注冊組件時使用，有一個例外：?data?必須是函數(shù)。

//project.js components: {"projectDetail": Vue.asyncComponent('Project', 'projectDetail', 'Project/projectDetail/projectDetail') },//project.html <project-detail></project-detail>

?　　Vue.js是數(shù)據(jù)驅(qū)動的，這使得我們并不需要直接操作DOM，如果我們不需要使用jQuery的DOM選擇器，就沒有必要引入jQuery。vue-resource是Vue.js的一款插件，它可以通過XMLHttpRequest或JSONP發(fā)起請求并處理響應(yīng)。也就是說，$.ajax能做的事情，vue-resource插件一樣也能做到，而且vue-resource的API更為簡潔。另外，vue-resource還提供了非常有用的inteceptor功能，使用inteceptor可以在請求前和請求后附加一些行為，比如使用inteceptor在ajax請求時顯示loading界面。

<div class="itemAddRow clearfix"> <i>項目名</i> <textarea v-model="projectName" placeholder="請輸入項目名" style="height:32px;"></textarea> </div> <div class="itemAddRow clearfix"> <i>項目描述</i> <textarea v-model="projectDescription" placeholder="請輸入項目描述" style="height:150px;"></textarea> </div> <div class="itemAddRow clearfix"> <i>項目狀態(tài)</i> <div> <input type="radio" name="projectStatus" value="1" v-model="projectStatus">開發(fā)中&nbsp;&nbsp; <input type="radio" name="projectStatus" value="2" v-model="projectStatus">已發(fā)布 &nbsp;&nbsp; <input type="radio" name="projectStatus" value="3" v-model="projectStatus">穩(wěn)定&nbsp;&nbsp; <input type="radio" name="projectStatus" value="4" v-model="projectStatus">停止維護(hù)&nbsp;&nbsp; </div> </div> data: function() {return {projectName:'', projectDescription:'', projectStatus:1 } }, methods: { addProject:function(){ var projectName=this.projectName.trim(), projectDescription=this.projectDescription.trim(); if(projectName==''||projectDescription==''){ alert('請輸入完整的項目信息'); return; } var postData={ name:projectName, description:projectDescription, status:this.projectStatus, userId:this.$conf.userInfo.userId }; var self=this; Vue.http.post(this.$conf.API_createProject,postData).then(function(response) { var data=response.data; if(data.ReturnCode == '0000') {
　　　　　　　　　//vm.$parent：父實例，如果當(dāng)前實例有的話 self.$parent.$parent.isShowProjectAdd = false; } }); } }

?

組件實例的作用域是孤立的。這意味著不能并且不應(yīng)該在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。

1）可以使用 props 把數(shù)據(jù)傳給子組件。

prop 是父組件用來傳遞數(shù)據(jù)的一個自定義屬性。子組件需要顯式地用props選項聲明 “prop”。

<!--taskAdd.html--> <tt-popup top="10px" left="20px"> <div slot="content">users</div> </tt-popup> <!--ttPopup.html--> <div class="tt-popup" v-bind:style="{top:top,left:left}"> <slot name="content"></slot> </div>

?

//app.js Vue.component('ttPopup', Vue.asyncComponent('Common','ttPopup'));//注冊組件 //ttPopup.html props: ['top','left'],

渲染后：

2）在子組件中使用this.$parent獲取父組件實例

?

插件通常會為Vue添加全局功能。

1）Vue.js 的插件應(yīng)當(dāng)有一個公開方法?install?。這個方法的第一個參數(shù)是?Vue?構(gòu)造器?

2）通過全局方法 Vue.use(plugin) 使用插件

安裝 Vue.js 插件。如果插件是一個對象，必須提供?install?方法。如果插件是一個函數(shù)，它會被作為 install 方法。install 方法將被作為 Vue 的參數(shù)調(diào)用。

//1，添加實例方法 function plugin(Vue) {if(plugin.installed) { return; } Vue.prototype.$conf = conf; } if(typeof window !== 'undefined' && window.Vue) { window.Vue.use(plugin); } //2，添加全局方法或?qū)傩?function plugin(Vue) { if(plugin.installed) { return; } Vue.asyncComponent = asyncComponent; } if(typeof window !== 'undefined' && window.Vue) { window.Vue.use(plugin); } 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的vue2.0的学习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。