前端與移動開發之vue-day3(5)
阿新 • • 發佈:2018-12-21
watch屬性的使用
考慮一個問題:想要實現 名 和 姓 兩個文字框的內容改變,則全名的文字框中的值也跟著改變;(用以前的知識如何實現???)
監聽data中屬性的改變:
<div id="app"> <input type="text" v-model="firstName"> + <input type="text" v-model="lastName"> = <span>{{fullName}}</span> </div> <script> // 建立 Vue 例項,得到 ViewModel var vm = new Vue({ el: '#app', data: { firstName: 'jack', lastName: 'chen', fullName: 'jack - chen' }, methods: {}, watch: { 'firstName': function (newVal, oldVal) { // 第一個引數是新資料,第二個引數是舊資料 this.fullName = newVal + ' - ' + this.lastName; }, 'lastName': function (newVal, oldVal) { this.fullName = this.firstName + ' - ' + newVal; } } }); </script> 監聽路由物件的改變: <div id="app"> <router-link to="/login">登入</router-link> <router-link to="/register">註冊</router-link> <router-view></router-view> </div> <script> var login = Vue.extend({ template: '<h1>登入元件</h1>' }); var register = Vue.extend({ template: '<h1>註冊元件</h1>' }); var router = new VueRouter({ routes: [ { path: "/login", component: login }, { path: "/register", component: register } ] }); // 建立 Vue 例項,得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {}, router: router, watch: { '$route': function (newVal, oldVal) { if (newVal.path === '/login') { console.log('這是登入元件'); } } } }); </script> computed計算屬性的使用 預設只有getter的計算屬性: <div id="app"> <input type="text" v-model="firstName"> + <input type="text" v-model="lastName"> = <span>{{fullName}}</span> </div> <script> // 建立 Vue 例項,得到 ViewModel var vm = new Vue({ el: '#app', data: { firstName: 'jack', lastName: 'chen' }, methods: {}, computed: { // 計算屬性; 特點:當計算屬性中所以來的任何一個 data 屬性改變之後,都會重新觸發 本計算屬性 的重新計算,從而更新 fullName 的值 fullName() { return this.firstName + ' - ' + this.lastName; } } }); </script> 定義有getter和setter的計算屬性: <div id="app"> <input type="text" v-model="firstName"> <input type="text" v-model="lastName"> <!-- 點選按鈕重新為 計算屬性 fullName 賦值 --> <input type="button" value="修改fullName" @click="changeName"> <span>{{fullName}}</span> </div> <script> // 建立 Vue 例項,得到 ViewModel var vm = new Vue({ el: '#app', data: { firstName: 'jack', lastName: 'chen' }, methods: { changeName() { this.fullName = 'TOM - chen2'; } }, computed: { fullName: { get: function () { return this.firstName + ' - ' + this.lastName; }, set: function (newVal) { var parts = newVal.split(' - '); this.firstName = parts[0]; this.lastName = parts[1]; } } } }); </script>
watch、computed和methods之間的對比
computed屬性的結果會被快取,除非依賴的響應式屬性變化才會重新計算。主要當作屬性來使用;
methods方法表示一個具體的操作,主要書寫業務邏輯;
watch一個物件,鍵是需要觀察的表示式,值是對應回撥函式。主要用來監聽某些特定資料的變化,從而進行某些具體的業務邏輯操作;可以看作是computed和methods的結合體;
nrm的安裝使用
作用:提供了一些最常用的NPM包映象地址,能夠讓我們快速的切換安裝包時候的伺服器地址;什麼是映象:原來包剛一開始是隻存在於國外的NPM伺服器,但是由於網路原因,經常訪問不到,這時候,我們可以在國內,建立一個和官網完全一樣的NPM伺服器,只不過,資料都是從人家那裡拿過來的,除此之外,使用方式完全一樣;
執行npm i nrm -g全域性安裝nrm包;
使用nrm ls檢視當前所有可用的映象源地址以及當前所使用的映象源地址;
使用nrm use npm或nrm use taobao切換不同的映象源地址;
相關檔案
URL中的hash(井號)