vue.js基礎

vue實例的創建

該實例中的內容將和和下面的例子相對應

 var vm = new Vue({
  	el:'',
    data:{
        msg:"我的信息",
        msg1:"<span>我是一個html</span>",
        mytitle:'title',
        list:[
            {id:1,name:'zhangsan'},
            {id:2,name:'lisi'},
            {id:3,name:'wangmazi'},
        ],
        obj:{
            id:1,
            name:'orange',
            age;18
        },
        flag:'true' ，
        style1:{
        color:'pink',
        'font-size':'30px'
   		 },
         style2:{
             font-family: monospace;
        }
    },
     methods:{
         click(){}
     }，
     filters:{
         filter1:function(data){
             //代碼塊
         }
     }
})

基本指令

1.v-cloak

解決閃爍問題。閃爍問題原因使用插值表達式時若vue還未加載完成則會直接將插值表達式當作文本內容顯示

<h1 v-cloak>{{ msg }}</h1>

2.v-text

標籤內部的文本會被mag變量的值所覆蓋

<h1 v-text="msg"></h1>

v-html 當作html頁面元素解析

如果msg1的值是一個html標籤字符串，則會將其解析爲html元素

<h1 v-text>{{ msg1 }}</h1>

3.v-bind

綁定數據,可以簡寫成:

<input type="button" value="btn" v-bind:title="mytitle">

4.v-on

綁定事件可以簡寫成@

<input type="button" value="btn" v-on:click="click">

5.v-for

在組件中使用v-for循環或者在一些特殊情況中，如果v-for出現問題，則必須綁定唯一的key（值爲字符串或者數字）

1.迭代數組

<ul>
    <li v-for="(item,index) in list" :key="item.id">index----{{ index }}--{{ item.id }}--{{ item.name }}</li>
<ul>

2.迭代對象

<div v-for="(value,key,index) in obj">{{value}}----{{key}}----{{index}}</div>

3.迭代數字

<p v-for="i in 10">這是第{{i}}個p標籤</p>

6.v-if

如果flag爲false則dom中不會出現這個h1標籤

<h1 v-if="flag">這是一個if控制的h1標籤</h1>

7.v-show

如果flag爲false則僅僅是將h1的display設置爲none

<h1 v-show="flag">這是一個if控制的h1標籤</h1>

如果頁面中的dom元素需要頻繁顯示隱藏建議使用v-show指令

8.v-model

實現數據的雙向綁定常應用於表單中,在下面這個表單輸入值,msg的數據發生改變同時p標籤裏面的內容也會同步渲染到頁面中

<input type='text' v-model='msg'>
<p>{{ msg }}</p>

自定義指令

Vue中的指令都已v-開頭

自定義全局指令

第一個參數爲指令的名稱，第二個參數爲對象，在對象裏有一些相關的鉤子函數，在不同的階段執行不同的鉤子函數

bind:只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數可定義一個在綁定時執行一次的初始畫動作
inserted:被綁定元素插入父節點時調用（父節點存在時即可調用，不必存在於document中）
update: 所在組件的VNode更新時調用，但是可能發生在其孩子的VNode更新之前。指令的值可能發生了改變也可能沒有。但可通過比較更新後的值來忽略不必要的模板更新
componentUpdated: 所在組件的VNode及其孩子的VNode全部更新時調用。
unbind: 只調用一次，指令於元素解綁時調用。

鉤子函數的參數(el, binding, vnode, oldVnode)

鉤子函數參數的解釋

Vue.directive('focus',{
    bind:function(el,binding){},
    inserted:function(){el.focus()},
    update:function(){}
})

樣式相關寫在bind裏面就行，於js行爲相關的寫在inserted裏面防止其不生效，例如上面的獲取焦點就寫在了inserted中

Vue.directive('color',{
    bind:function(el,binding){
        el.style.color=binding.value
    },
   
})

使用定義好的focus指令和color指令

<input type="text" v-focus v-color="'red'">

自定義私有指令

var vm2 = new Vue({
    el:'',
    data:{},
    directives:{
        'fontWeight':{
            bind:function(el,binding){
                el.style.fontWeight = binding.value
            }
        }
    }
})

使用定義好的fontWeight指令

<input type="text" v-focus v-fontWeight="'500'">

函數簡寫

大多數情況下可能只想在bind和update鉤子函數上做重複的動作，不關心其他鉤子函數可以簡寫爲

Vue.directive('color-swatch',function(el,binding){
    el.style.backgroundColor =binding.value 
})

事件修飾符

.stop 阻止冒泡
.prevent 阻止默認事件
.capture 添加事件偵聽器時使用事件捕獲模式
.self 只當事件在該元素本身觸發時觸發回調
.once 事件只觸發一次

事件冒泡：觸發子元素的事件時，父級元素相同事件也會依次向上觸發 -孫子-父親-爺爺

事件捕獲：在冒泡之前會有一個事件捕獲過程和冒泡順序相反 -爺爺-父親-孫子

使用方式<input type="button" value="btn" v-on:click.once="click">

按鍵修飾符

.enter當按下enter鍵時才調用click方法，enter也可以用相應的字符編碼代替

只有少數的按鍵纔可以寫按鍵名稱 enter tab delete esc space up down left right

<input type="button" value="btn" @keyup.enter="click">

當然也可以自定義鍵盤修飾符

Vue.config.keyCodes.name = code  //name爲名稱，code爲按鍵編碼

接着就可以使用這個自定義的按鍵修飾符了

<input type="button" value="btn" @keyup.name="click">

在vue中使用樣式

使用class樣式

1.數組

<h1 :class="['class1','class2']"></h1>
<h1 :class="['class1','class2',flag?class3:'']"></h1>
    <!-- 三元表達式，如果flag爲true則有class3 -->
<h1 :class="['class1','class2',{class3:flag}]"></h1>
	<!-- 數組中也可以嵌套對象，對象鍵爲類名，值爲布爾值-->

2.對象

<h1 :class="{class1:true,class2:true}"></h1>
	<!-- 也可以是對象對象鍵爲類名，值爲布爾值-->

使用style樣式

1.直接在元素上設置

<h1 :style="{color:'pink','font-size':'30px'}">我是大橘子</h1>

2.在data中設置，通過:style引用

<h1 :style="style1">我是大橘子</h1>

3.在:style通過數組引用多個樣式對象

<h1 :style="[style1,style2]">我是大橘子</h1>

過濾器

過濾器的定義

全局過濾器的定義：Vue.filter('filterName',(data)=>{//代碼塊})

第一個參數爲過濾器的名稱，第二個參數爲一個函數，函數的第一個參數爲要處理的變量其他參數可隨意指定

私有過濾器的定義

在最上面的vm實例中的filters對象中定義了一個名稱filter1的過濾器

過濾器的調用{{mag | filterName}}

如果全局和私有過濾器名稱一樣，則會優先調用私有過濾器

調用時傳遞的第一個參數爲定義時的第二個參數，因爲第一個參數已經被佔了

管道符前面爲傳遞的數據，管道符後面爲過濾器的名字

生命週期

生命週期中的鉤子函數有8個每個的作用都在下面代碼的註釋中

var vm2 = new Vue({
    el:'',
    data:{},
    //創建階段
    beforeCreate(){},//實例創建之前執行
    created(){},
    beforeMount(){},//模板已經在內存中完成，打包尚未渲染到頁面中
    mounted(){}, //內存中的模板已經掛載到頁面中
     //運行階段
    beforeUpdate(){},//數據被更新但尚未渲染到頁面中,數據更新時纔會調用
    updated(){},//數據已經渲染到頁面中
    //銷燬階段
    beforeDestory(){},//data methods 過濾器都是可用的還未執行銷燬過程
    destoryed(){}  //組件已經被銷燬，所有的東西已不可用
    
    
    
})

動畫

過渡類動畫

<style>
	.v-enter,
    .v-leave-to{
        opacity:0;
        transform :translateX(200px);
    }
    .v-enter-active,
    .v-leave-active{
        transition: all 0.5s ease;
    }
</style>
<div>
    <input type="button" @click="flag=!flag" value="動畫">
    <transition>
        <h1 v-if="flag">我是h1</h1>
    </transition>
</div>

使用v-的時候會爲所有的元素動畫元素都加上這個樣式，如果要給特定的樣式，只需要給transition標籤加上name屬性，然後將**v-改爲name-**即可

組件

組件的定義

組件通俗來講就是一個個小型，獨立的可複用的東西，比如我們的一個頁面是由html標籤堆積起來的，這些標籤就可以理解爲組件，當然這只是一個通俗的說法，具體概念還請查閱Vue官網。

下圖展示一個應用界面被抽象爲一個組件樹：

全局組件

第一個參數爲組件的名稱，我在這裏定義了一個comp4的組件“，第二個參數爲一個對象。template模板內容只能有一個根元素(div)

Vue.component('comph4', {
  template: '<div><h4>這是一個h4標題</h4></div>'
})

以上方法在輸入模板內容時在編輯器內無任何智能提示,所以我將template模板內容放在外面。

template我給他傳遞一個id選擇器cmp4，並在外部通過template標籤定義模板內容

<template id="cmp4">
    <div>
    	<h4>這是一個h4標題</h4>
    </div>
</template>
<script>
    Vue.component('comph4', {
  template: '#cmp4'
})
</script>

私有組件

下面這個copmh4就只能在app1下面調用，我還是使用了將模板內容放在外部的方法。

var vm = new Vue({
    el:'#app1',
    data:{},
    methods:{},
    components:{
        comph3:{
            template:'#cmp3'
        }
    }
})

組件的調用

組件調用就和寫html標籤一樣,comp4組件就可以在全局中調用，而cmp3只能在app1中調用

<body>
    <comp4><comp4>
    <div id="app1">
    	<comp3><comp3>
     </div>
	<template id="cmp4">
        <div>
            <h4>這是一個h4標題</h4>
        </div>
	</template>
    <template id="cmp3">
        <div>
            <h3>這是一個h3標題</h3>
        </div>
	</template>
</body>

組件中的其他知識

data的不同

組件和實例一樣也可以擁有自己的data數據和methods方法，和實例中data不同的是，組件中的data必須爲一個函數，且這個函數必須返回一個對象

Vue.component('comph4', {
  template: '#cmp4',
  data: function(){
      return{
          msg：'msg這是組件中data中的數據'
      }
  },
   methods:{}
})

組件的切換

eg：在Vue實例的data中定義一個變量通過同過點擊不同的按鈕給data變量賦不同的值，根據不同的值來選擇顯示哪個組件

<div id="app1">
	<input type="button" value="cmph3" @click="iscom='comph3'">
    <input type="button" value="cmph4" @click="iscom='comph4'">
    <component :is="iscom"></component>
</div>
var vm = new Vue({
    el:'#app1',
    data:{
     iscom:''   
    }
})

父子組件之間的傳值

原理：父組件在引用子組件的時候通過屬性綁定，將父組件的數據綁定給子組件，綁定方法通過事件綁定

注意：必須將綁定的屬性在子組件的props數組中定義一下，

且父組件傳過來的值是可讀的，組件自己data裏的數據是可讀可寫的。

通過屬性綁定將父組件的msg傳給子組件，並且通過事件綁定，將show方法傳遞給子組件，子組件在接收父組件的值時，在props數組中定義，

子組件傳遞給父組件通過==$emit()==,第一個參數爲綁定事件的名稱，第二個參數爲要傳遞的值，如果只是父組件向子組件傳遞方法，則不必傳遞第二個參數，

說白了子組件向父組件傳值，其實就是父組件向子組件傳遞方法的同時接收子組件反饋過來的數據罷了

<div id="app1">
	<comph4 :fromParent="msg" @fun="show"></comph4>
</div>
var vm = new Vue({
    el:'#app1',
    data:{
  		msg:'我是父組件中的msg',
		fromSon:null
    },
    methods:{
        show(data){      //父組件的show方法接收一個參數
		this.fromeSon=data; //將從子組件接收過來的data賦值給父組件的fromSon
        }
    }
    compents:{
		comph4:{
		template:'<div>
                    <h4>我是一個h4---{{fromParent}}</h4>
                    <input type="button" value="調用父組件中的方法" @click=”myclick“>
				</div>'，
          props:['fromParent'],
        data:function(){
        return {
            data:{name:'orange',age:18}
       	 }
        },
		methods:{
                myclick(){
                this.$emit('fun',this.data)  //將子組件中的data傳遞給父組件
                }
			}
		}
    }
})

Vue乾貨，學完這些就夠用了