vue2.0的學習

?vue-router

除了使用?<router-link>?創建 a 標簽來定義導航鏈接，我們還可以借助 router 的實例方法，通過編寫代碼來實現。

1）router.push(location)

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

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

2）router.replace(location)

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

點擊<router-link :to="..." replace>等同于調用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：觸發當前實例上的事件即close事件 } } }

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

2）局部注冊

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

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

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

?　　Vue.js是數據驅動的，這使得我們并不需要直接操作DOM，如果我們不需要使用jQuery的DOM選擇器，就沒有必要引入jQuery。vue-resource是Vue.js的一款插件，它可以通過XMLHttpRequest或JSONP發起請求并處理響應。也就是說，$.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>項目狀態</i> <div> <input type="radio" name="projectStatus" value="1" v-model="projectStatus">開發中&nbsp;&nbsp; <input type="radio" name="projectStatus" value="2" v-model="projectStatus">已發布 &nbsp;&nbsp; <input type="radio" name="projectStatus" value="3" v-model="projectStatus">穩定&nbsp;&nbsp; <input type="radio" name="projectStatus" value="4" v-model="projectStatus">停止維護&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：父實例，如果當前實例有的話 self.$parent.$parent.isShowProjectAdd = false; } }); } }

?

組件實例的作用域是孤立的。這意味著不能并且不應該在子組件的模板內直接引用父組件的數據。

1）可以使用 props 把數據傳給子組件。

prop 是父組件用來傳遞數據的一個自定義屬性。子組件需要顯式地用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 的插件應當有一個公開方法?install?。這個方法的第一個參數是?Vue?構造器?

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

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

//1，添加實例方法
function plugin(Vue) {if(plugin.installed) { return; } Vue.prototype.$conf = conf; } if(typeof window !== 'undefined' && window.Vue) { window.Vue.use(plugin); } //2，添加全局方法或屬性 function plugin(Vue) { if(plugin.installed) { return; } Vue.asyncComponent = asyncComponent; } if(typeof window !== 'undefined' && window.Vue) { window.Vue.use(plugin); }