什麼是vue?
VUE+webpackjavascript
一，什麼是vue?
基本概念：css
- vue:目前最火的前端框架(也能夠進行手機APP的開發，須要藉助weex)
- react：最流行的前端框架（React除了開發網站，還能夠開發手機app）
- vue------------angular----------react一塊兒稱爲前端三大主流框架
- vue是用於構建用戶界面的（veu有配套的第三方類庫）
爲何學習流行框架：html
- 提升開發效率：能夠解決一些兼容性的問題，前端模板引擎，可以減小一些沒必要要dom操做
- 在vue中再也不操做dom元素，解放雙手，讓程序員更多的去關注業務邏輯
框架和庫的區別：前端
- 框架：是一套完整的解決方案，對項目的侵入性很大，項目若須要更替框架，擇須要從新架構整個項目
- 庫：提供某一個小功能，對項目的入侵性小，若是沒法完成某些需求，能夠很容易切換
node(後端)中的MVC與前端中的mvvm之間的區別vue
- mvc是後端的分層開發的概念，分爲三個部分其中router，controller，model（操做數據庫CRUD就是增刪改查）
- mvvm是前端的視圖層的概念，主要關注於視圖層的分離
- m:保存到每一個頁面的數據
- v:每一個頁面的html結構
- vm：他是一個頁面的調度者，分割了m和
1.基本代碼
#1.安裝vue，引入vue
#2.未來new的vue實列，會控制這個元素的全部內容
<div id="app">
<p>{{msg}}</p>
</div>
#3.建立一個vue的實列,當咱們安裝完以後，在瀏覽器的內存中，就多了一個vue的構造函數（就能夠new出來）
<script>
var vm=new Vue({
//表示當前咱們new的這個實列，要控制頁面上的哪一個區域
el:'#app',
//控制數據
data:{
msg:'歡迎學習vue'
msg2:'<h1>歡迎學習vue</h1>'
mytitle:'這是一個自定義的屬性'
},
//控制事件，定義當前vue實列的全部可用的方法
#在vm實列中想要獲取data中的數據，或者調用method中的方法，必須經過 this.數據屬性名 或 this.方法名 這裏的this就表示咱們new出來的vm實列對象
methods:{
show(){
alert("我是一個事件")
}
},
filters:{},//過濾器
directives:{},//自定義
components:{}//組件
})
</script>
複製代碼
2.指令學習
1，v-cloak,v-text,v-html的基本使用java
-
v-cloaknode
#能夠解決插值表達式閃爍的問題 <p v-clock>{{msg}}</p> <style> [v-clock]{ display:none; } </style> 複製代碼 -
v-textreact
#和v-clock做用相同， <p v-text="msg"></p> //二者區別 1，插值表達式先後能夠聽任何內容 2，v-text會替換元素中的本來的內容，插值表達式不會 複製代碼 -
v-htmljquery
#輸出時不會帶標籤 <p v-text="msg2"></p> 複製代碼
2,v-bind(綁定屬性)webpack
-
v-bind綁定屬性 (只能實現數據單行綁定 從vm---->v)
#後面能夠任意拼接，如123 <input type="button" value="按鈕" v-bind:title="mytitle+'123'"> #簡寫形式':' <input type="button" value="按鈕" :title="mytitle+'123'"> 複製代碼 -
v-on（綁定事件）
#method找show方法 <input type="button" value="按鈕" v-on:click="show'"> #縮寫形式「@」 #若是給事件加了小括號就能夠傳參了 <input type="button" value="按鈕" @click="show'"> <input type="button" value="按鈕" @click="show（）'"> 複製代碼 -
v-model(雙向數據綁定)
#能夠實現「表單」的雙向數據綁定，，，只能運用到表單元素中。列select,checkbox,textarea <input type="button" value="按鈕" v-model="msg'"> 複製代碼 -
v-for(for循環)
#i是下標值,item和i本身能夠任意定義 #:key=「」能夠防止出現問題進行數據綁定（key值是數字類型） //遍歷數組 <p v-for="(item,i) in list" :key="item.id"> <input >索引值： {{item}}---下標值：{{i}} </P> data:{ list:[1,2,3,4,5] } //遍歷對象 <p v-for="(value,key,i) in user"></P> data:{ user:{ id：1， name:"名字"， gender:'男' } } #注意事項 //還能夠遍歷一個方法search是一個方法(經過執行for循環，把全部符合搜索關鍵的數據，保存到類表中) <p v-for="item in search(keywords)" :key="item.id"></P> 複製代碼 -
v-if和v-show
#至關於刪除（性能消耗比較高，元素頻繁的切換最好不要使用） <h3 v-if="flag">v-if控制的元素</h3> #至關於display:none（） <h3 v-show="flag">v-show控制的元素</h3> #data中 flag:true 複製代碼 -
padStart(用於時間的補足) 字符串的方法不是字符串的要先.tostring（）
#padStart(補充的位數,用什麼來補充)-----在前面補充 obj.toSring().padStart(2,'0') #padEnd(補充的位數,用什麼來補充)-----在後面補充 obj.toSring().padStart(2,'0') 複製代碼 -
定時器
var vm=new Vue({ //表示當前咱們new的這個實列，要控制頁面上的哪一個區域 el:'#app', //控制數據 data:{ intervalId:null }, //控制事件，定義當前vue實列的全部可用的方法 #在vm實列中想要獲取data中的數據，或者調用method中的方法，必須經過 this.數據屬性名 或 this.方法名 這裏的this就表示咱們new出來的vm實列對象 methods:{ action(){ this.intervalId=setInterval(()=>{ if(this.intervalId!=null) return; 執行的代碼段... },500) } //清除定時器 stop(){ clearInterval(this.intervalId) this.intervalId=null } } }) 複製代碼
3.事件修飾符
- @click.stop="" ------阻止事件冒泡
- @click.prevent='' ----- 阻止默認行爲 如
- @click.capture="" -----捕獲觸發機制（即先出發父級元素的事件，再觸發子元素的事件，給父元素加此屬性）
- @click.self=""------只有點擊本身才能觸發事件
- @click.prevent.once=""-------只觸發一次
4.vue中使用樣式
class方式：
#方法一直接傳遞一個數組
<h1 :class="['第二個class類名','第二個class類名']"></h1>
#方法二(三元表達式？：)
#flag沒有加單引號，說明他是vm中定義的data中的數據flag:true（flag爲true會應用到頁面。否之不會）
<h1 :class="['第二個class類名','第二個class類名',flag?'active':'']"></h1>
#方法三(在數組中使用對象的方式，提升代碼的可讀性)
<h1 :class="['第二個class類名','第二個class類名',{'active':flag}></h1>
#方法四
<h1 :class="{類名：true，類名：true}"></h1>
等價於下面
<h1 :class="classobj"></h1>
var vm=new Vue({
el:'#app',
data:{
classobj:{類名：true，類名：true}
},
複製代碼內聯樣式：（style）
#font-weight帶有「-」因此要用引號引發來（同理能夠寫成在vm中定義）
<h1 :style="{color:"red","font-weight":"200"}"></h1>
#方法二應用多個
<h1 :style="[styleobj1,styleobj1]"></h1>
複製代碼5,過濾器
- 能夠用做常見的文本格式化，能夠用在兩個地方：mustachc插值和v-bind表達式。過濾器應該被添加在javascript表達式的尾部，由「管道」符指示
- 能夠替換或者匹配內容
-
全局過濾器：過濾器調用時候的格式{{ name | 過濾器名稱（「過濾器參數 」） }}
#定義過濾器的語法 //「|」就是管道符 //第一個參數已經被固定死了，永遠都是過濾器，通道符前面傳過來的數據 Vue.filter('過濾器的名稱'，function（msg，過濾器參數）{ 獲取的是一個傳過來的數據 }) 複製代碼 -
私有過濾器
#在methods下中定義 //filters能夠定義多個過濾器 dataFormate就是其中一個過濾器 //過濾器採用就近原則，若是全局和私有重名，就會調用私有的 filters:{ dataFormate:function(){} } 複製代碼
6.自定義/鉤子/生命週期
-
自定義
1.x #自定義按鍵修飾符（使用：列/按回車時，綁定事件） //系統修飾鍵，按鍵修飾符有不少能夠查文檔 @keyup.鍵盤碼或按鍵修飾符 @keyup.enter="add()" #自定義全局按鍵修飾符(下面113是鍵盤碼) Vue.config.keyCodes.f2=113---------->@keyup.f2="add()" 2.x 複製代碼 -
自定義全局指令（v-bind相似）
#使用Vue.directive()定義全局指令 //參數1：指令的名稱，注意在定義的時候前面能夠不加v-前綴,但調用時必須加v- //參數2：是一個對象，是和指令相關的函數 // Vue.directive('focus'，{ ----------->調用時是v-focus //鉤子函數 bind:function(el){ ---------當綁定到元素上時會自動執行此函數 （一次） //第一個參數永遠都是el，這個el就是原生的js對象 //一個元素只有插入DOM中以後，才能獲取焦點 #通常只有樣式的纔會寫在這裏 el.style.css.color="red" }, inserted：function(el){ el.focus() #通常js方法會寫在這裏 }--------當插入到DOM中時。，執行此函數（執行一次） updated:function(){} --------當vnode更新時（執行屢次 ） }) 複製代碼 -
鉤子函數
#自定義指令的時候，如何拿到參數值 <h1 :class="classobj" v-color="'blue'"></h1> bind:function(el,binding){ //第一個參數永遠都是el，這個el就是原生的js對象 //一個元素只有插入DOM中以後，才能獲取焦點 #通常只有樣式的纔會寫在這裏 el.style.css.color=binding.value }, #私有的指令 //在method中 directive：{ //和過濾器同理 bind:{ } } 生命週期 複製代碼
7.生命週期
-
生命週期鉤子=生命週期函數=生命週期事件
#這是第一步 beforeCreat(){} //這是遇到的第一個生命週期函數，實列徹底建立出來以前，執行他 //在這個函數建立的時候，data和method尚未被初始化 #這是第二步 created(){} //這是遇到的第二個生命週期函數，在這個函數中，data和method已經被初始化好了 #這是第三步 // 這裏表示vue開始編輯模板 //把vue的代碼中的那些命令進行執行，最終在內存中生成一個編譯好的最終模板字符串 //而後把這個模板渲染到內存的dom中 //此時只是渲染到內存中，但並無渲染到頁面 #這是第四步 beforeMonent(){ } //這是遇到的第三個生命週期函數，表示模板已經 在內存中渲染完成，但並無渲染頁面 //頁面中的元素尚未真正被替換過來 #這是第五步 mounted(){} //這是第四個生命週期函數，已經渲染到頁面 //這是生命週期的最後一個函數，沒有操做的話，就會在內存中一動不動 複製代碼 -
運行階段的鉤子函數
#第一個 beforeUpdate(){} //只要界面上有數據更新就會執行這個函數， //執行此函數時，頁面中現實的數據仍是舊的，data中的數據是最新的，頁面還沒有和最新的保持同步 #第二個 updated(){} //界面中和data中的數據都是最新的 複製代碼 -
銷燬鉤子函數
#第一個 beforeDestroy(){} //此時從運行階段進入銷燬階段 //實列身上的data,method以及過濾器均可用，尚未執行銷燬過程 #第二個 destroy(){} //組件已經被徹底銷燬了，實列身上的data和方法都不可使用了 複製代碼
8.VUE-resource（獲取數據）
-
用於數據的請求，還可使用"axios"的第三方包實現數據請求
-
首先須要安裝vue-resource(先有vue)，而後導入
#get請求的列子method中定義此方法 //.then返回的數據result中的數據在result.body中 //url是請求的服務器地址 { this.$http.get(url,option).then(success(result)) } //emulateJSON:time設置表單提交格式爲，普通表單格式 this.$http.post(url,{},{emulateJSON:time}).then 複製代碼
//設置全局做用域 #若是咱們經過全局配置了，請求了數據接口根域名，則，每次單獨發起http請求的時候，請求的url路徑，應該以相對路徑開頭，前面不能帶/，不然不會啓用根路徑拼接 1.Vue.http.options.root='viruxkjv.com/'(請求的地址相對路徑)
//全局啓用emulateJSON選項 Vue.http.options.emulateJSON=true;
9.動畫
1. 元素的顯示隱藏
```javascript
#不帶過分效果的動畫
data:{
flag:false
}
<input type="button" value="顯示隱藏" @clic="flag=!flag">
<h3 v-if="flag">這是一個須要作動畫的元素</h3>
#vue提供的動畫
//第一步
//使用transition,把須要被動畫的元素控制起來(name是用來控制不一樣的transition塊)
<transition name="v">
<h3 v-if="flag">這是一個須要作動畫的元素</h3>
</transition>
//第二步
自定義兩組樣式，來控制transition內部元素實現動畫
<style>
.v-enter,
.v-leave-to{
opacity:0px
}
.v-enter-active,
.v-leave-active{
transition:all 0.4s ease;
}
複製代碼
9.1.使用animate.css
#方法一
<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
</transition>
#方法二 設置時間:duration（enter：200，leave:400）
<transition enter-active-class=" bounceIn" leave-active-class="bounceOut" :duration="200">
<h3 v-if="flag" calss="animated">這是一個須要作動畫的元素</h3>
</transition>
複製代碼
9.2.使用鉤子函數實現半場動畫
#javaScript鉤子
//html中
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<div class="" v-show="flag"></div>
</transition>
//注意：動畫鉤子函數的第一個參數：·el·,表示要執行動畫的哪一個DOM元素，是個原生js對象
//能夠認爲，el,是dodocument.getelementById('')方式獲取的原生js對象
methods:{
//動畫以前的初始樣式，動畫未開始
beforeEnter(el){el.style.transform="translate(0,0)"},
//動畫開始以後的樣子
enter(el,done){
#el.offsetWidth沒有實際做用，但若是不寫沒有過渡效果(只要是和offset相關的均可以)
el.offsetWidth
el.style.transform="translate(150px,150px)"
#元素會當即消失，不會出現等一會的結果
//done()就是afterEnter的引用
done()
},
//動畫結束以後
afterEnter(){}
}
複製代碼
9.3列表動畫
//在列表過分的時候，若果過分的元素，是經過v-for循環渲染出來的，不能使用transition包裹，須要使用transitionGroup
<style>
.v-enter,
.v-leave-to{
opacity:0px;
transform:translateY(80px);
}
.v-enter-active,
.v-leave-active{
transition:all 0.4s ease;
}
//下面兩個屬性配合使用，會讓列表漸漸消失的結果
.v-move{
transition:all 0.6s ease
}
.v-leave-active{
position:absolute;
}
</style>
#appear，tag爲設置渲染出來是什麼元素,不設置爲默認的span
//html，加入appear屬性能夠實現頁面初始出現的動畫效果
<transitionGroup appear tag="ul">
<li v-for="item:list" :key="item.id"
</li>
</transitionGroup>
複製代碼
10.組件
-
什麼是組件？組件的出現是爲了拆分vue實列的代碼量的，可以讓咱們以不一樣的組件，來劃分不一樣的功能，須要什麼組件直接去調用就行
- 模塊化：是從代碼邏輯的角度劃分
- 組件化：是從UI界面的角度劃分的
-
組件的建立方式1
//html中 <my-com1></my-com1> //js中 #1.1 var com1=Vue.extend({ //經過template屬性，指定組件要展示的HTML結構 template:'<h3>這是veu.extend建立出來的</h3>' }) #1.2 //Vue.component('組件名'，建立出來的組件模板對象)，組件名在定義時用的駝峯命名，到HTML中須要使用’-‘，列my-con1,若是沒有用駝峯，那麼直接是mycon1 Vue.component('myCon1',com1)----------<my-com1></my-com1> Vue.component('mycon1',com1)----------<mycom1></mycom1> || || Vue.component('myCon1',Vue.extend({ template:'<h3>這是veu.extend建立出來的</h3>' })) 複製代碼 -
組件的建立方式2
注意：不管是哪一種方式建立出來的組件，組建的template屬性，只能有一個根元素包裹，如
div//html <mycom2></mycom2> //js Vue.component('mycon2',{ template:'<h3>這是veu.component建立出來的</h3>' ) 複製代碼 -
組建的建立方式3
//html中 <template id="temp1"> <div>//這是包裹 <h1> 這是經過template元素，這個方式，代碼只能提示和高亮 </h1> </div> </div> //js中 Vue.component('mycon3',{ template:'#temp1' ) 複製代碼
10.1.私有組件
//html
<login></login>
//js----下方也可利用建立方式3抽離出去
components:{
login:{
template:'<h3>這是私有組件</h3>'
}
}
複製代碼
10.2.組件中的data
- 組件中能夠有本身的data數據
- 組件中的data和實列中的data,不同，實列中的data能夠是一個對象，組件中的data必須是一個方法
- 組件中的data除了必須爲一個方法以外，這個方法內部，還必須返回一個對象才行
<script>
//組件
Vue.component('mycom1',{
tempalte:'<h3>這是全局組件{{msg}}</h3>',
data:function(){
return {
msg:'這是組件本身的數據'
}
}
methods:{}
})
//建立vue實列，獲得viewMoodel
var vm=new vue({
el:'#app',
data:{},
methods:{}
})
</script>
複製代碼
10.3.組件切換
- HTML中
#方法1（缺點只能是兩個切換）
<div class="app">
<a href='' @click.prevent="flage=true">登陸</a>
<a href="" @click.prevent="flage=true">註冊</a>
<login v-if="flag"></login>
<register v-else="flag"></register>
</div>
#方法2（vue提供）
<a href='' @click.prevent="conName=‘login'">登陸</a>
<a href="" @click.prevent="conName=‘register'">註冊</
//component是一個佔位符。:is屬性，能夠用來指定要顯示的組件名稱
<component :is="'conName'"></component>
複製代碼
-
js中
Vue.component('login',{ template:"登陸組件" }) Vue.component('register',{ template:"登陸組件" }) //建立vue實列，獲得viewMoodel var vm=new vue({ el:'#app', data:{ conName:''//當前component中:is綁定的組件名稱 flag:true }, methods:{} }) 複製代碼
10.4父組件向子組件傳值
- 父組件，能夠在引用子組件的時候。經過（v-bind）的形式，把須要傳遞給子組件的數據，以屬性綁定的形式，傳遞到子組件內部，供子組件使用
<div id="app">
<com1 v-bind:parentmsg="msg"></com1>
</div>
複製代碼
//建立vue實列，獲得viewMoodel
var vm=new vue({
el:'#app',
data:{
msg:'我是父組件'
},
methods:{},
components:{
com1:{
//子組件中的data數據，是子組件本身全部，經過ajax，請求回來的數據，均可以放在這裏（可讀可寫）
data(){
return{}
},
template:"我是子組件{{parentmsg}}",
props:['parentmsg'],
//把父組件傳遞過來的parentmsg屬性，先在props數組中，定義一下，才能使用這個數據
//注意：組件中的全部props中的數據，都是經過，父組件傳遞給子組件的（只可讀）
directives:{},
filters:{},
components:{},
menthod:{
}
}
}
})
複製代碼
- 子組件傳遞事件
<div id="app">
//父組件向子組件 傳遞 方法，採用事件綁定機制v-on，當咱們自定義一個屬性以後
<com2 v-on:func="show"></com2>
</div>
<template id="tmp1">
<div>
<h1>這是子組件</h1>
<input type="button" @click="myclick">
</div>
<template>
//js
<script>
var com2={
template:'#tmp1',
method:{
myclick(){
//emit願意 發射調用
this.$emit('func')
}
}
}
//建立vue實列，獲得viewMoodel
var vm=new vue({
el:'#app',
data:{
conName:''//當前component中:is綁定的組件名稱
flag:true
},
methods:{
show(){
console.log("我是父組件的方法"),
}
}
components:{
com2
}
})
</script>
//傳參數的狀況
show(data,data2)------------this.$emit('func',參數1內容，參數2內容)
複製代碼
10.5.ref獲取DOM和組件引用
ref
//html
<h3 id="myh3" ref="myh3">獲取DOM</H3>
//js
methods:{
getElement(){
console.log(this.$refs.myh3.innerText)
//原生：document.getElementById('myh3').innerText
//ref就是單詞 reference; 值類型和引用類型 reference
}
}
複製代碼
11.路由
- 後端路由：全部超連接都是url地址，全部url地址都對應服務器上的資源
- 後端路由：對於單頁面應用程序來講，主要經過url中的hash(#號)來實現不一樣頁面之間的切換，同時，hash有一個特色：http請求中不會包含hash相關的內容；因此，單頁面程序中的頁面跳轉主要用hash實現
11.1vue-router路由安裝
//安裝方式1(會自動安裝)
<script src='/path/to/vue.js'></script>
<script src='/path/to/vue-router.js'></script>
//安裝方式2
//若是在模塊化的工程中使用它（如：webpack）,必須經過Vue.use()（手動安裝）明確安裝路由功能
npm install vue-router
import Vue form 'vue'
import VueRouter form 'vue-router'
Vue.use(VueRouter)
複製代碼
11.1.1獲取數據
複製代碼
11.2.使用
在建立一個路由對象以後，導入vue-router包以後，window全局對象中，就有了一個 構造函數，叫作VueRouter, 在 new 路由對象的時候，能夠爲構造函數，傳遞一個配置對象
<div id="app">
//必須帶#（這種方式麻煩，官方提供router-link）
<a href="#/login">登陸</a>
//router-link控制跳轉(tag="span"---改變標籤屬性)
<router-link to ="/login">登陸</router-link>
//vue-router提供的，專門用來當佔位符的
<router-view></router-view>
</div>
複製代碼
<script>
#組件模板對象
var login={
template:'登陸組件模板對象'
}
#組件應用名稱
// Vue.component('login',{
//template:'登陸組件應用名稱'
// })
#配置路由
var routerObj = new VueRouter({
//route//這個配置對象中的route表示【路由匹配規則】的意思
routes:[
//每一個路由規則，都是一個對像，必須有兩個屬性
//屬性1：是path,表示監聽的哪一個路由連接地址
//屬性2：是component,表示path對應的component（組件必須是組件模板對象 不能是組件應用名稱）
{path:'/login',component:login}
]
})
//建立vue實列，獲得viewMoodel
var vm=new vue({
el:'#app',
data:{},
methods:{}
router:routerObj//將路由規則註冊到vm實列上，用來監聽url地址改變
)
</script>
複製代碼
11.3.重定向
初始化界面展現哪一頁面
routes:[
//這裏的redirect和node中徹底不一樣
{path:'/',redirect:'/login'}
]
複製代碼
11.4.默認高亮的方式
#方式1 style默認屬性
默認a標籤有一個<router-link>屬性默認屬性`router-link-active`css樣式
#方式2 路由構造選項`linkActiveClass`
routes:[],
linkActiveClass:'myactive'-----配置完這個會在標籤上多出這個類
複製代碼
11.5.路由切換動畫
#第一步（）包裹
-----mode表示過分效果
<transition mode="out-in">
<router-view></router-view>
</transition>
#第二部
style中寫入類
複製代碼
11.6.路由傳參
- query方式傳參
//在路由中，使用查詢字符串，給路由傳遞參數，則不須要修改，路由規則的path屬性
var login={
template:'登陸組件模板對象{{$route.query.id}}'
//組件中的生命週期鉤子函數
created(){
console.log(this.$route.query.id)----獲取到的id
}
}
複製代碼
-
params方式傳參
//html <router-link to ="/login/12">登陸</router-link> //js routes:[ {path:'/login:id',component:login} ] //組件對象中 created(){ console.log(this.$route.params.id)----獲取到的id } 複製代碼
11.7路由嵌套
組件中包含路由跳轉：
#html
<template>
<router-link to ="/count/login/">登陸</router-link>
</template>
routes:[
{path:'/count',
component:login,
//子路由 前面不加斜線，不然永遠以根路徑進行請求
children:[
path:'login'
]
}
]
複製代碼
11.8.使用命名視圖
//放置對應name的組件
<router-view></router-view>
<router-view name="left"></router-view>
<router-view name="main"></router-view>
複製代碼
var header ={
template:'頭部區域'
}
var leftBox={
template:'左側區域'
}
var mainBox={
template:'主體區域'
}
var router = new VueRouter({
//route//這個配置對象中的route表示【路由匹配規則】的意思
routes:[
{path:'/',components:{
'default':header,
'left':leftBox,
'main':mainBox
}
}
]
})
//建立vue實列，獲得viewMoodel
var vm=new vue({
el:'#app',
data:{},
methods:{}
router//將路由規則註冊到vm實列上，用來監聽url地址改變
)
複製代碼
11.9.監聽事件/監聽路由
- keyup事件監聽輸入框
@keyup="getfullname"
<input type="text " v-model="firstname">
複製代碼
- watch監聽文本框數據改變
var vm = new Vue({
data:{
firstname='',
lastname='',
fullname=''
}
#方法1
watch:{//使用這個屬性，能夠監聽data中的指定數據的變化，而後觸發watch指定函數
//監聽屬性名 有橫線必須加引號 'first-name'，沒有橫線能夠不加
//下面是監聽firstname改變
firstname:function(){
this.fullname=this.firstname+'-'+this.lastname
}
}
#方法2
watch:{
'first-name':function(newvalue,oldvalue){
this.fullname=newvalue+'-'+this.lastname
}
}
})
複製代碼
-
監聽路由
watch監聽路由改變
$route.path
watch:{
'$route.path':function(newVal,oldVal){
if(newVal==='/login'){
console.log("登陸界面")
}else if(oldVal==='/register'){
console.log("註冊界面")
}
}
}
複製代碼
-
computed屬性
這個屬性和
methods同級 ，computed中能夠定義一些屬性，這些屬性，叫作【計算屬性】，計算屬性的本質。就是一個方法，只不過，咱們在使用時是把他們的名稱看成屬性來使用
//把data上面的fullname刪掉,在computed定義
#注意1：計算屬性，在引用的時候，必定不要加（），當普通屬性使用就行
#注意2：任何data中的屬性發生改變，就會從新計算
#注意3：計算的結果會被緩存起來，方便下次使用
computed:{
'fullname':function(){
return this.firstname+'-'+this.la
}
}
複製代碼
- watch , computed , methods對比
- ·
computed會被緩存起來，看成屬性使用，簡單操做 methods方式表示一個具體操做，主要寫業務邏輯watch是computed和methods結合體
- ·
11.10.nrm工具使用
-
安裝：npm i nrm -g--------全局安裝包
-
使用：nrm ls能夠查看鏡像列表，看當前使用的是哪一個鏡像
-
使用：nrm use
鏡像名切換不一樣的鏡像源地址注意 ：nrm只是提供了幾個經常使用的安裝包地址，他只是改變下載報的URL地址 安裝時仍是用
npm
二，其餘知識點
-
1. 箭頭函數做用 - 改變this指向 2. 定時器 this的指向問題 3. switch（this.opt）{ case'+': this.result=parseInt(this.n1)+parseInt(this.n2) break; case'-': this.result=parseInt(this.n1)-parseInt(this.n2) break; } 4. some(function(item,i){}):遍歷返回一個boolean，（能夠隨時終止），返回true時就終止 findIndex(function(item,i){})找索引 5. foreach適用於只是進行集合或數組遍歷，for則在較複雜的循環中效率更高。 6. indexOf() 若是要檢索的字符串值沒有出現，則該方法返回 -1。 7. foreEach some filter findIndex這些都屬於數組的新方法（遍歷）使用方式有點區別-------------ES6的新方法 8. jquery中搜索 :contains 9. replace(參數1，參數2) 第一個參數除了寫字符串以外，還能夠寫正則 10. new Data()---------當前事件，當傳入參數，就是參數的時刻 11. 模板字符串`${y}-${m}-${d}`字符串拼接（tab鍵上面的的符號包裹起來``） 複製代碼
網頁報Cannot get
npm remove request
npm install requset
複製代碼
三，輔助小工具
1，vuedevtools
- 本地安裝包放在一個文件夾中（不須要隨便刪掉）
- 瀏覽器中更多工具—>擴展程序—>勾選開發者模式--->而後能夠選者擴展（選擇文件）---->勾選容許訪問文檔
- day2--17
四，第三方類庫
- mintui
- mui
相關文章
- 1. 什麼是vue？
- 2. VUE是什麼
- 3. vue是什麼
- 4. 什麼是vue？爲什麼用vue？
- 5. Vue Loader是什麼
- 6. 什麼是VUE-CLI
- 7. vue-cli是什麼？
- 8. 什麼是Vue-CLI?
- 9. 什麼是vue-cli
- 10. Vue Vuex 是什麼
- 更多相關文章...
- • Hibernate是什麼 - Hibernate教程
- • MyBatis是什麼 - MyBatis教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • ☆技術問答集錦（13）Java Instrument原理
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 什麼是vue？
- 2. VUE是什麼
- 3. vue是什麼
- 4. 什麼是vue？爲什麼用vue？
- 5. Vue Loader是什麼
- 6. 什麼是VUE-CLI
- 7. vue-cli是什麼？
- 8. 什麼是Vue-CLI?
- 9. 什麼是vue-cli
- 10. Vue Vuex 是什麼