Vue2.x全家桶的基礎知識點整理

再此說明：這篇文章寫的很粗糙，這都是我在學習Vue全家桶時寫的學習代碼，這麼粗那爲何還要寫，由於我如今的公司在使用React棧，不太使用Vue，我不想再學習React的時候忘記了Vue，因此想隔段時間就拿出來看看，而後再優化這篇文章，由於這篇文章很基礎，技術大佬請點擊返回，不用浪費時間。

任何人，沒有本人容許不得轉載這篇文章。

• v-cloak

<!-- 使用 v-cloak 可以解決 插值表達式閃爍的問題 -->
<p v-cloak>======{{msg}}=======</p>
<!--不會覆蓋原有的數據   須要藉助於css覆蓋原有的數據-->
複製代碼

• v-text

<h4 v-text="msg">=========</h4>
<!--覆蓋原有的數據-->
<!-- 默認 v-text 是沒有閃爍問題的 -->
<!-- v-text會覆蓋元素中本來的內容，可是 插值表達式
只會替換本身的這個佔位符，不會把 整個元素的內容清空 -->
複製代碼

• v-html

<div v-html="msg">1122121</div>
<!--覆蓋原有的數據-->
//該指令能夠將帶有html標籤的字符串，渲染到網頁中
複製代碼

• v-bind

<!-- 完整語法 -->
<a v-bind:href="url">...</a>

<!-- 縮寫 -->
<a :href="url">...</a>

<!-- v-bind: 是 Vue中，提供的用於綁定屬性的指令 -->
<!-- v-bind 中，能夠寫合法的JS表達式 -->
<input type="button" value="按鈕" :title="msg +'13'">
複製代碼

• v-on

<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>

<!-- 縮寫 -->
<a @click="doSomething">...</a>

<!--不能這樣寫，它會認爲alert是一個變量-->
<input type="button" value="按鈕"  v-on:click="alert('hello')"> 
複製代碼

• v-for

v-for 迭代數字
<p v-for="count in 10">這是第 {{ count }} 次循環</p>

v-for 循環遍歷對象
<p v-for="(val,key,i) in user">屬性爲：{{key}}-值爲：{{val}} - 索引：{{i}}</p>	

v-for 遍歷對象數組
<!--user:至關於item，每一項-->
<p v-for="(user,i) in list"> 索引：{{i}}-id爲:{{user.id}}-name爲:{{user.name}}</p>

v-for 遍歷普通數組
<!--item:是每一項的元素-->
<!--i:是索引-->
<p v-for="(item,i) in list">索引：{{i}}-每一項：{{item}}</p>

v-for 中使用key屬性
<!-- 注意： v-for再循環的時候，key屬性只能使用 number類型或者String類型 -->
<!-- 注意： key 在使用的時候，必須使用 v-bind 屬性綁定的形式，指定 key 的值 -->
<p v-for="(item,i) in list" v-bind:key="item.id"> 
<input type="checkbox">{{item.id}} --- {{item.name}}
</p>

複製代碼

• v-model

<!-- v-bind 只能實現數據的單向綁定，從 M 自動綁定到 V， 沒法實現數據的雙向綁定-->
<input type="text" v-bind:value="msg" style="width:100%;">
<!-- 使用  v-model 指令，能夠實現 表單元素和 Model 中數據的雙向數據綁定 -->
<!-- 注意： v-model 只能運用在 表單元素中 -->
<!-- input(radio, text, address, email....)select checkbox textarea   -->

<h4>{{ msg }}</h4>
<input type="text" v-model="msg" style="width:100%;">
const vm=new Vue({
el:'#app',
data:{
    msg: '你們都是好學生，愛敲代碼，愛學習，愛思考，簡直是完美，沒瑕疵！'
},
methods:{}
});
複製代碼

• v-if 和 v-show

<input type="button" value="toggle" @click="flag=!flag">
<!--v-if：特色，每次切換都會刪除或建立元素-->
<!--v-show:特色，每次不會進行dom的刪除和建立操做，只是切換樣式display：none 的樣式-->
<!-- v-if 有較高的切換性能消耗 -->
<!-- v-show 有較高的初始渲染消耗 -->
    
    		
<!--若是元素涉及到頻繁的切換，最好不要使用v-if，推薦使用v-show-->
<!--若是原素可能永遠都不會顯示出來被用戶看到，則推薦使用v-if-->
<h3 v-if="flag">這是用v-if控制的元素</h3>
<h3 v-show="flag">這是用v-show控制的元素</h3>

new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {
        /* toggle() {
          this.flag = !this.flag
        } */
      }
    });
複製代碼

• v-if v-else v-else-if

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>
複製代碼

• v-slot

縮寫： #
2.6+ 新指令，插槽

<div id="app">
       <zizujian>

           <template v-slot:head>
               <h1 >這個是name爲head的插槽</h1>
           </template>
           <template v-slot:default>
               <h2>這個是默認名字的插槽,默認的插槽能夠不寫v-slot:default</h2>
           </template>
           <template v-slot:scope = 'scope'>
               {{scope.msg.msg1}}
           </template>
       </zizujian>
    </div>
    <template id="zi">
        <div>
            <header>
                <slot name="head"></slot>
            </header>
            <nav>
                <slot></slot>
            </nav>
            <slot name="scope" v-bind:msg = 'msg'>
                {{msg.msg1}}
            </slot>
        </div>


    </template>


<script>

    // 子組件
    var zizujian = {
        template:'#zi',
        data () {
            return {
                msg: {
                    msg1:'做用域插槽,父組件訪問子組件內部的數據'
                },
            }
        }
    };

    // 建立vm實例
    var vm = new Vue({
        el: '#app',
        data: {

        },
        components:{
            zizujian
        }
    });

</script>
複製代碼

• v-pre

跳過這個元素和它的子元素的編譯過程。
能夠用來顯示原始 Mustache 標籤。跳過大量沒有指令的節點會加快編譯。

<span v-pre>{{ this will not be compiled }}</span>
複製代碼

• v-once

只渲染元素和組件一次。隨後的從新渲染，
元素/組件及其全部的子節點將被視爲靜態內容並跳過。這能夠用於優化更新性能。

<!-- 單個元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 組件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>
複製代碼

• ref

//  ref  是 英文單詞 【reference】   值類型 和 引用類型  referenceError
<div id="app">
		<input type="button" v-bind:value="msg" v-on:click="getelement" />
		<h2 ref="h2">這是一個h2標籤</h2>
		<zi ref="zi"></zi>
</div>
		
		
<template id="zi">
	<div>
		<h1>這是子組件</h1>
	</div>
			
</template>
		
		
<script>
			
			
			//建立一個子組件
var zi={
		data(){
			return{
				msg:'這是子組件的msg',
			};
			},
		template:'#zi',
			methods:{
				show(){
				console.log('這是子組件的show方法');
				},
			},
			};
	//建立vm實例
	new Vue({
		el:'#app',
		data:{
			msg:'點擊使用ref獲取DOM元素',
		},
		methods:{
			getelement(){
				console.log(this.$refs.h2.innerHTML);
				console.log(this.$refs.zi.msg);
				this.$refs.zi.show();
				
			},
		},
		components:{
			zi,
		},
	});
			
</script>
複製代碼

• vue 的異步組件

<!--
爲何要使用異步組件？
1.用不到的組件不會加載，所以網頁打開速度會特別快，當你用到這個組件的時候纔會
經過異步請求加載	2.緩存組件，經過異步加載的組件會被緩存下來，當下一次再用到這個組件的時候，絲絕不會
有任何遲疑，組件很快就會從緩存中加載出來-->
<!--一般有兩種方式實現異步組件-->


//第一種方式建立異步組件	//在組件中,咱們經過再components屬性中使用import()函數返回一個promise()
components:{
	'hot-component':()=>import('./路徑--文件.vue'),
	'nav-component':()=>import('./路徑--文件.vue')
	},
	
//第二種方式建立異步組件	//在router中,咱們也能夠這樣作,---可是也可使用node.js中的require函數來實現
//返回一個resolve
{
	path:'./login',
	name:'login',
	component:(resolve)=>{require(['./路徑---文件.vue'],resolve)}
}
或者
{
	path:'./login',
	name:'login',
	component:()=>import('./路徑--文件.vue')
	}
}	
複製代碼

• watch 方法

<div id="app">
<router-link to="/login">登陸</router-link>
<router-link to="/register">註冊</router-link>
		
<!-- 容器 -->
	<router-view></router-view>
</div>

// 2. 建立子組件
 var login = {
template: '<h3>這是登陸子組件，這個組件是 奔波霸 開發的。</h3>'
}
		
var register = {
 template: '<h3>這是註冊子組件，這個組件是 霸波奔 開發的。</h3>'
 }
		
// 3. 建立一個路由對象
var router = new VueRouter({
routes: [ // 路由規則數組
{path: '/login', component:login},
{path:'/register',component:register}
],
linkActiveClass: 'myactive' // 和激活相關的類
 })
 
 
new Vue({
el:'#app',
data:{},
methods:{},
router:router,
watch:{ //能夠監聽一些非dom的------好比路由
	'$route.path':function(newval,oldval){
			console.log(this.$route);
			console.log(newval + ' --- ' + oldval)
			if(newval==='/login'){
                console.log('歡迎進入登陸頁面')
				}else if(newval==='/register'){
				console.log('歡迎進入註冊頁面')
						}
						
					},
					
				},
				
			});
複製代碼

• 動畫transition

<style>
.v-enter,
.v-leave-to{
	opacity: 0;
	transform: translateX(200px);
	}
			
			
.v-enter-active,
.v-leave-active{
	transition: all 0.5s ease;			
	}
	
.my-enter,
.my-leave-to{
	opacity: 0;
	transform: translateX(200px);
	}
			
			
.my-enter-active,
.my-leave-active{
	transition: all 0.5s ease;
	}
</style>

<div id="app">
	<input type="button" v-bind:value="msg" v-on:click="flage=!flage" />
	<!--不須要v-for渲染的，都用transition包裹-->
	<transition>
		<h1 v-show="flage">這是transition包裹的，實現的動畫@@@@</h1>
	</transition>
			
	<input type="button" v-bind:value="msg" v-on:click="flage1=!flage1" />
	<transition name="my">
        	<h1 v-show="flage1">這是transition包裹的，實現的動畫@@@@</h1>
	</transition>
</div>

//建立一個vm實例
new Vue({
	el:'#app',
	data:{
	flage:false,
	flage1:false,
	msg:'點擊實現動畫',
	},
	methods:{},
	});
複製代碼

• 列表動畫

<style>
	li {
      border: 1px dashed #999;
      margin: 5px;
      line-height: 35px;
      padding-left: 5px;
      font-size: 12px;
      width: 100%;
    }

    li:hover {
      background-color: hotpink;
      transition: all 0.8s ease;
    }
    
    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateY(80px);
    }

    .v-enter-active,
    .v-leave-active {
      transition: all 0.6s ease;
    }
    
    
    /*下面的 .v-move 和.v-leave-active 是固定寫法, 可以實現後續列表元素漸漸漂上來的效果*/
    .v-move{
    	transition: all 0.6s ease;
    }
    .v-leave-active{
      position: absolute;
    }
</style>

<div id="app">
<div>
<label>Id:<input type="text" v-model="id"></label>
<label>Name:<input type="text" v-model="name"></label>
<input type="button" value="添加" @click="add">
</div>
		
<ul>
<!--在實現列表過分的時候，若是須要過分的元素，是經過v-for循環渲染出來的，
不能使用transistion包裹-----應該使用transition-Group包裹-->
<!-- 若是要爲 v-for 循環建立的元素設置動畫，必須爲每個 元素 設置 :key 屬性 -->
<!--transition-Group 中添加 appear屬性 實現頁面入場效果-->
<!-- 經過 爲 transition-group 元素，設置 tag 屬性，指定 transition-group 渲染爲指定的元素，
若是不指定 tag 屬性，默認，渲染爲 span 標籤 -->		


<transition-Group appear tag="ul">
<li v-for="(item,i) in list" v-bind:key="item.id" v-on:click="del(i)">
{{item.id}}---------------{{item.name}}
</li>
</transition-Group>
</ul>
</div>
複製代碼

• 使用第三方的動畫

<!-- 使用 :duration="毫秒值" 來統一設置 入場 和 離場 時候的動畫時長 -->
<transition enter-active-class=" bounceIn" leave-active-class=" bounceOut" v-bind:duration="800">
<h3 v-if="flag" class="animated">這是一個H3</h3>
</transition>
		    
		    
		    
<!-- 使用  :duration="{ enter: 200, leave: 400 }"  來分別設置 入場的時長 和 離場的時長  -->
<transition enter-active-class=" bounceIn"
leave-active-class=" bounceOut"
v-bind:duration="{ enter:200 , leave:800}">
<h3 v-if="flag" class="animated">這是一個H3</h3>
</transition>
複製代碼

• 動畫的鉤子函數

當只用 JavaScript 過渡的時候，在 enter 和 leave 中必須使用 done 進行回調。不然，它們將被同步調用，過渡會當即完成。
<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

methods: {
  // --------
  // 進入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 當與 CSS 結合使用時
  // 回調函數 done 是可選的
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 離開時
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 當與 CSS 結合使用時
  // 回調函數 done 是可選的
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用於 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}
複製代碼

• 父組件數據的同步

<div id="app">
			<h1>使用原生js的對象引用來同步數據</h1>
			<h1>父級組件=======>{{msg.a}}</h1>
			<myzi v-bind:myzi='msg'></myzi>
		</div>
		<template id="zi">
			<div>
				<h2>子級組件========>{{this.myzi.a}}</h2>
				<input type="button" value="同步改變" @click="cg" />
			</div>
		</template>
		
		
		<script>
			
			//子組件
			var myzi={
				template:'#zi',
				props:['myzi'],
				methods:{
					cg(){
						this.myzi.a='數據改變了！！！'
					},
				},
				
			}
			new Vue({
				el:'#app',
				data:{
					msg:{
						a:'我是父級組件的數據'
					},
				},
				methods:{},
				components:{
					myzi
				},
			})
		</script>
複製代碼

• 過濾器的使用

<div id="app">
			<p> {{ msg | msgFormat('第一','參數') | text}} </p>
		</div>

		<script>
			
//			定義過濾器     全局
//			過濾器能夠傳遞多個參數==============================也能夠調用多個
			Vue.filter('msgFormat',function(msg,arg ,arg2){
//				字符串 replace 中的第一個參數,能夠寫字符串也能夠寫正則
				return msg.replace(/單純/g,arg+arg2);
			});
			
			Vue.filter('text',function(date){
				return date+'+++++++++++';
			});
			var vm = new Vue({
				
				el:'#app',
				data:{
					msg: '曾經，我也是一個單純的少年，單純的我，傻傻的問，誰是世界上最單純的男人'
				},
				methods:{},
			});
複製代碼

• 按鍵修飾符

Vue.config.keyCodes.F2=113;
 <input type="text" class="form-control" v-model="name" v-on:keyup.F2="add()">
複製代碼

• 自定義指令

//使用	Vue.directive(); 自定義全局指令
//第一個參數是：指令的名稱，在定義的時候，名稱不加	v-前綴，，在調用的時候必須加 v-前綴
//第二個參數：是一個對象，這個對象上有相關的函數，這些相關的函數能夠在特定的階段，執行相關的操做

Vue.directive('focus',{
bind:function(el){
// 每當指令綁定到元素上的時候，會當即執行這個 bind 函數，只執行一次
//注意; 在每一個函數中，第一個參數永遠都是el，el表示被綁定了那個指令的元素，這個 el 參數，是一個原生的JS對象
// 在元素 剛綁定了指令的時候，尚未 插入到 DOM中去，這時候，調用 focus 方法沒有做用
//  由於，一個元素，只有插入DOM以後，才能獲取焦點
//el.focus();
},  
inserted:function(el){// inserted 表示元素 插入到DOM中的時候，會執行 inserted 函數【觸發1次】
el.focus(); // 和JS行爲有關的操做，最好在 inserted 中去執行，放置 JS行爲不生效
},  
updated:function(el){// 當VNode更新的時候，會執行 updated， 可能會觸發屢次
},	
});
複製代碼

• 計算屬性

new Vue({
	el:'#app',
	data:{
	firstname: '',
    lastname: '',
	middlename: ''
	},
	methods:{},
	computed:{// 在 computed 中，能夠定義一些 屬性，這些屬性，叫作 【計算屬性】，
	//計算屬性的，本質，就是 一個方法，只不過，咱們在使用 這些計算屬性的時候，
	//是把 它們的 名稱，直接看成 屬性來使用的；並不會把 計算屬性，看成方法去調用；
	// 注意1： 計算屬性，在引用的時候，必定不要加 () 去調用，直接把它 看成 普通 屬性去使用就行了；
    // 注意2： 只要 計算屬性，這個 function 內部，所用到的 任何 data 中的數據發送了變化，就會 當即從新計算 這個 計算屬性的值
	// 注意1：計算屬性，再引用是，不要再後面加（），只把它看成一個普通的屬性來使用
    // 注意2： 只有 這個計算屬性，function內部，所要用到的 任何數據發生改變， 都要重新計算
    // 注意3： 計算屬性的求值結果，會被緩存起來，方便下次直接使用； 若是 計算屬性方法中，因此來的任何數據，都沒有發生過變化，則，不會從新對 計算屬性求值；
	fullname:function(){
	console.log('ok')
   	return this.firstname + '-' + this.middlename + '-' + this.lastname
	},
	get(){
		console.log(`${firstname}------${lastname}`)
		}
	},
	});
複製代碼

• 子組件向父組件傳值

<div id="app">
			<!--父組件給子組件傳遞方法，是給子組件一個事件綁定機制  v-on--> 
			<!--當咱們自定義了 一個 事件屬性以後，那麼，子組件就可以，經過某些方式，來調用 傳遞進去的 這個 方法了--> 
			<log v-on:func="show"></log>
		</div>
		
		
		<template id="log">
			<div>
				<h1>這個是子組件</h1>
				<input type="button" value="這是子組件中的按鈕 - 點擊它，觸發 父組件傳遞過來的 func 方法" @click="myclick">
			</div>
		</template>
		
		
		
		
		<script>
			
			// 定義了一個字面量類型的 組件模板對象
			var log={
				data:function(){
					return {
						msg:{id:1,name:'kk'},
					};
				},
				template:'#log',// 經過指定了一個 Id, 表示 說，要去加載 這個指定Id的 template 元素中的內容，看成 組件的HTML結構
				methods:{
						myclick:function(){
							// 當點擊子組件的按鈕的時候，如何 拿到 父組件傳遞過來的 func 方法，並調用這個方法？？？
					          //  emit 英文原意： 是觸發，調用、發射的意思
					          // this.$emit('func123', 123, 456)
//							this.$emit('func','傳參');
							this.$emit('func',this.msg);
						},
				},
	
			};
	
new Vue({
	el:'#app',
	data:{
		data2:null,
	},
	methods:{
	show:function(data1){console.log('調用了父組件身上的 show 方法'+data1);
	this.data2=data1;
    console.log(this.data2)
	},
	},
	components:{
	log
	},
	});
複製代碼

• 父組件向子組件傳值

<div id="app">
			<!--父組件,能夠在引用子組件的時候,經過屬性綁定(v-bind:)的形式,把須要傳遞給子組件的數據,-->
			<!--以屬性綁定的形式,傳遞到子組件內部,供子組件使用-->	
			<com1 v-bind:parentmsg="msg"></com1>
		</div>
		
		
		
		
		<script>
			
			var vm=new Vue({
				el:'#app',
				data:{
					msg:'123123',
				},
				methods:{},
				components:{
					//結論:子組件中,默認沒法訪問到  父組件中的data 上的數據,和methods中的方法
					com1:{ 
							data:function(){
								// 注意： 子組件中的 data 數據，並非經過 父組件傳遞過來的，而是子組件自身私有的，
								//好比： 子組件經過 Ajax ，請求回來的數據，均可以放到 data 身上；
								 // data 上的數據，都是可讀可寫的；
								return {
									title: '123',
              						content: 'qqq'
								};
							},
							template:'<h1>這是子組件----{{parentmsg}}</h1>',
							// props組件中的數據，都是父組件傳遞給子組件的
							props: ['parentmsg'],// 把父組件傳遞過來的 parentmsg 屬性，先在 props 數組中，定義一下，這樣，才能使用這個數據
					},
				
				
				},
			});
		</script>
複製代碼

• 平級組件的傳值

<div id="app">
			<myaaa></myaaa>
			<mybbb></mybbb>
			<myccc></myccc>
		</div>
		
		<template id="aaa">
			<div>
				<input type="button" value="傳遞組件myaaa的數據" @click="setData" />
			</div>
		</template>
		<template id="bbb">
			<div>
				<input type="button" value="傳遞組件mybbb的數據" @click="setData" />
			</div>
		</template>
		<template id="ccc">
			<div>
				<h1>{{a}}</h1>
				<h1>{{b}}</h1>
			</div>
		</template>
		<script>
			
			/*
			傳值原理:
			就如三個數字傳值同樣;
			c=a a=b a=c
			
			vm實例就是第三方變量
			
			vm.$emit()---做用:傳遞數據
			vm.$on()-----接受數據
			*/
			
			
			
			
			
			
			
			//建立第三方vm實例----用於傳遞數據
			
			var vm=new Vue();
			
			
			
			//建立三個子組件
			
			//1.
			var myaaa={
				template:'#aaa',
				data(){
					return {
						msg:'我是組件myaaa中的數據'
					}
				},
				methods:{
					setData(){
						vm.$emit('amsg',this.msg);
					},
				},
				
			}
			//2.
			var mybbb={
				template:'#bbb',
				data(){
					return {
						msg:'我是組件mybbb中的數據'
					}
				},
				methods:{
					setData(){
						vm.$emit('bmsg',this.msg);
					},
				},
				
			}
			
			//2.
			var myccc={
				template:'#ccc',
				data(){
					return {
						a:'暫無數據',
						b:'暫無數據'
					}
				},
				mounted(){
					vm.$on('amsg',(data)=>{
						this.a=data
					})
					vm.$on('bmsg',(data)=>{
						this.b=data
					})
				}
				
			}
			//建立vm實例
			new Vue({
				el:'#app',
				data:{},
				components:{
					myaaa,
					mybbb,
					myccc
					
				},
			})
複製代碼

• 生命函數

new Vue({
				
				el:'#app',
				data:{
					msg:'ok',
				},
				methods:{
					show:function(){
						console.log('執行了show方法');
					},
				},
				
				beforeCreate:function(){
					//第一個生命週期函數，表示實例被建立出來以前會執行它
					//console.log(this.msg);
					//this.show();
					//報錯------注意:在 beforeCreate函數執行時， msg，show，數據都尚未被初始化
				},
				
				created:function(){
					//第二個生命週期函數， 表示實例已經被初始化好了
					//console.log(this.msg);
					//this.show();
					//表示 data 和 methods 已經初始化完畢了
					//若是想要調用 methods中的方法 或者 想要操做 data中的數據，最先也獲得 created 中操做
				},
				
				beforeMount:function(){
					//第三個生命週期函數 ，表示模板已經在內存中渲染完畢，可是還沒有把 模板渲染到 頁面中
					//console.log(document.getElementById('h3').innerText)
					//在 beforeMount執行的時候,內存中的元素尚未渲染到頁面中,只是以前寫的一些模板字符串
				},
				
				mounted:function(){
					//第四個生命週期函數，表示，內存中的模板已經掛載到頁面上，用戶已經能夠看到渲染好的頁面
					//console.log(document.getElementById('h3').innerText)
					//注意：mounted，已是函數建立期間最後一個生命週期函數，當執行完mounted就表示，
					//實例已經徹底被建立好了
				},
				
				// 接下來的是運行中的兩個事件
				
				beforeUpdate:function(){
					//第五個生命週期函數 ，表示 界面尚未被更新，可是數據已經被更新完了
					//console.log('界面上元素的內容：' + document.getElementById('h3').innerText)
        			//console.log('data 中的 msg 數據是：' + this.msg)
        			
        			//注意：當執行到beforeUpdate中的時候，頁面上的數據仍是舊數據，沒有被更新，
        			//可是內存中的數據已經被更新了  頁面還沒有和 最新的數據保持同步
				},
				
				updated:function(){
					//第六個生命週期函數 ------------ 頁面已經和 最新的數據保持同步
					console.log('界面上元素的內容：' + document.getElementById('h3').innerText)
        			console.log('data 中的 msg 數據是：' + this.msg)
        			// updated 事件執行的時候，頁面和 data 數據已經保持同步了，都是最新的
				},
				
				//還有兩個實例銷燬階段的函數	
			});
複製代碼

• vue-router 路由使用

<div id="app">
			<router-link to='/login'>login</router-link>
			<router-link to='/denglu/22/zhang'>denglu</router-link>
			<router-view></router-view>
		</div>
		<template id="login">
				<div>
				<h1>這是login組件</h1>
				</div>
		</template>
		
		<template id="deng">
			<div>
				<h1>這是登錄的組件,傳遞的參數爲：id:{{this.$route.params.id}}===name:{{this.$route.params.name}}</h1>
			</div>
		</template>
		<script>
			//建立組件
			var login={
				data(){
					return{
						
					};
				},
				template:'#login',
			};
			
			var denglu={
				data(){
					return{

					};
				},
				template:'#deng',
				created(){
					console.log(this.$route.params.id);
				},
				
				
			};
			
			
			//建立路由
			var router=new VueRouter({
				routes:[
					
					{path:'/',redirect:'/login'},
					{path:'/login',component:login},
					{path:'/denglu/:id/:name',component:denglu}
				
				
				],
			});
			//建立vm實例
			var vm =new Vue({
				el:'#app',
				data:{
					
					msg:'sdfasd'
				},
				methods:{
					
				},
				components:{
					login,
					denglu
				},
				router,
			});
複製代碼

• 路由傳參 解耦

<div id="app">
			<!--若是再路由中，使用查詢字符串，給路由傳遞參數，則不須要更改路由規則中的path屬性-->
			<router-link to="/login/12/zhangsan">登錄</router-link>
			<router-link to="/zhuce">註冊</router-link>
			<router-view></router-view>
		</div>
		<script>
			//建立模板對象
			var login={
				props: ['id','name'],
				template:'<h1>登錄組件-----{{ this.id }}-------{{$route.params.name}}</h1>',
				created:function(){
					// console.log(this.$route)
        			//console.log(this.$route.query.id);
        			console.log(this.$route.params.id);
				},
			};
			var zhuce={
				template:'<h1>註冊組件</h1>'
			};
			
			
			var router=new VueRouter({
				
				routes:[
				{path:'/login/:id/:name',component:login, props: true},
				{path:'/zhuce',component:zhuce}
				],
				
			});
			var vm=new Vue({
				el:'#app',
				data:{},
				methods:{},
				router:router,
			});
		</script>
複製代碼

• 路由傳參 2

<div id="app">
			<!--若是再路由中，使用查詢字符串，給路由傳遞參數，則不須要更改路由規則中的path屬性-->
			<router-link to="/login?id=10&name=zs">登錄</router-link>
			<router-link to="/zhuce">註冊</router-link>
			<router-view></router-view>
			
		</div>
		<script>
			//建立模板對象
			var login={
				template:'<h1>登錄組件-----{{ $route.query.id }}-----{{$route.query.name}}</h1>',
				created:function(){
					// console.log(this.$route)
        			console.log(this.$route.query.id);
				},
			};
			var zhuce={
				template:'<h1>註冊組件</h1>'
			};
			var router=new VueRouter({
				
				routes:[
				{path:'/login',component:login},
				{path:'/zhuce',component:zhuce}
				],
				
			});
			var vm=new Vue({
				el:'#app',
				data:{},
				methods:{},
				router:router,
			});
		</script>
複製代碼

• 路由的基本使用

<style>
.router-link-active,
.myActive {
color: red;
font-weight: 800;
font-style: italic;
font-size: 80px;
text-decoration: underline;
background-color: green;
}
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(140px);
}

.v-enter-active,
.v-leave-active {
transition: all 0.5s ease;
}
</style>
	</head>
	<body>
		
		<div id="app">
			<!-- 這是 vue-router 提供的元素，專門用來 看成佔位符的，未來，路由規則，匹配到的組件，就會展現到這個 router-view 中去 -->
    <!-- 因此： 咱們能夠把 router-view 認爲是一個佔位符 -->
    <!--<a href="#/login">登錄</a>-->
    <!--<a href="#/zhuce">註冊</a>-->
    
    		<!-- router-link 默認渲染爲一個a 標籤 -->
    		<router-link to="/login">登錄</router-link>
    		<router-link to="/zhuce">註冊</router-link>
			<transition mode="out-in">
		      <router-view></router-view>
		    </transition>
			
			
		</div>
		
		
		
		
		<script>
			//建立模板對象
			var login={
				template:'<h1>登錄組件</h1>'
			};
			var zhuce={
				template:'<h1>註冊組件</h1>'
			};
			
			// 2. 建立一個路由對象， 當 導入 vue-router 包以後，
			//在 window 全局對象中，就有了一個 路由的構造函數，叫作 VueRouter
			
			var routerObj=new VueRouter({
				routes:[
				// 路由匹配規則 
		        // 每一個路由規則，都是一個對象，這個規則對象，身上，有兩個必須的屬性：
		        //  屬性1 是 path， 表示監聽 哪一個路由連接地址；
		        //  屬性2 是 component， 表示，若是 路由是前面匹配到的 path ，則展現 component 屬性對應的那個組件
		        // 注意： component 的屬性值，必須是一個 組件的模板對象， 不能是 組件的引用名稱；
				//{path:'/',component:login}------默認跳轉到login組件
				{path:'/',redirect:'/login'},//重定向
				{path:'/login',component:login},
				{path:'/zhuce',component:zhuce}
				
				],
				linkActiveClass:'myActive',
			});
			var vm=new Vue({
				el:'#app',
				data:{},
				methods:{},
				router:routerObj,// 將路由規則對象，註冊到 vm 實例上，用來監聽 URL 地址的變化，而後展現對應的組件
			});
		</script>
複製代碼

• 路由的嵌套

<div id="app">
			<router-link to="/account">Account</router-link>

    		<router-view></router-view>
		</div>
		
		
		
		<template id="teml">
			<div>
				<h1>這是 Account 組件</h1>
				<router-link to="/account/login">登陸</router-link>
				<router-link to="/account/zhuce">註冊</router-link>
				
				<router-view></router-view>
			</div>
		</template>
		
		
		<script>
			
			var login={
				template:'<h3>登陸組件</h3>'
			};
			var zhuce={
				template:'<h3>註冊組件</h3>'
			};
			var account={
				template:'#teml',
			};

			var router=new VueRouter({
				routes:[
				// 使用 children 屬性，實現子路由，同時，子路由的 path 前面，不要帶 / ，
				//不然永遠以根路徑開始請求，這樣不方便咱們用戶去理解URL地址
				{path:'/account',
				component:account,
				children:[
				{path:'login',component:login},
				{path:'zhuce',component:zhuce}
				]}
				
				],
			});
			var vm=new Vue({
				el:'#app',
				data:{},
				methods:{},
				router:router,
			});
		</script>
複製代碼

• 命名視圖--路由

<div id="app">
			<router-view></router-view>
			<div class="container">
				<router-view name="left"></router-view>
				<router-view name="main"></router-view>
			</div>
		</div>
		<script>
			
			var header={
				template:'<h1 class="header">Header頭部區域</h1>'
			};
			var leftBox={
				template:'<h1 class="left">Left側邊欄區域</h1>'
			};
			var mainBox={
				template:'<h1 class="main">mainBox主體區域</h1>'
			};
			//建立路由
			var router=new VueRouter({
				
				routes:[
				
				{path:'/',components:{
					'default':header,
					'left':leftBox,
					'main':mainBox
				}}
				]
			});
			var vm=new Vue({
				el:'#app',
				data:{},
				methods:{},
				router:router,
			});
			</script>
複製代碼

• 按需引入Vuex

//main.js中的代碼==========================================
		
		import Vue from 'vue'
		import Vuex from 'vuex'
		Vue.use(Vuex)
		
		var store=new Vuex.Store({
		state:{
			cun:0
		},
		mutations:{
			add(state){
				state.cun++;
			}
		},
		actions:{
			addd({commit}){
				commit("add");
			}
		},
		getters:{
			getcun(state){
				return "當前cun的值是"+state.cun;
			}
		}
	})
//App.vue===========================================
		<template>
		  <div>
		   <h1>{{getcun}}</h1>
		   <input type="button" value="加加" @click="addd" />
		  </div>
		</template>
		
		<script>
			import {mapGetters,mapActions} from ' '
			//按需引用vuex的數據
		export default {
		  name: 'App',
		  computed:mapGetters(['getcun']),
		  methods:mapActions(['addd']),
		  	//mapGetters-->getters-----mapGetters通常都定義在computed中，按需引入
		  	//mapActions-->actions----mapActions,事件，通常定義到methods中，按需引入
		}
		</script>
複製代碼

• 調用使用Vuex

main.js-----------------中的vuex的定義
		
		import Vuex from 'vuex'
		Vue.use(Vuex)
		var store=new Vuex.Store({
		state:{
			//state至關於---data,是專門存儲數據的地方----這裏的數據不能夠直接修改，
			//只能藉助mutations中的方法進行修改
			
			//若是想直接調用state中的數據-------this.$store.state.想要調用數據的名字
			cun:0
		},
		mutations:{
			// 注意： 若是要操做 store 中的 state 值，只能經過 調用 mutations 提供的方法，
				//才能操做對應的數據，不推薦直接操做 state 中的數據，由於 萬一致使了數據的紊亂，
				//不能快速定位到錯誤的緣由，由於，每一個組件均可能有操做數據的方法；
			add(state){
				state.cun++;
			},
//若是想要調用mutations中的方法------this.$store.commit("被調用的方法名字")
			  subtract(state, obj) {
			      // 注意： mutations 的 函數參數列表中，
			      //最多支持兩個參數，其中，參數1： 是 state 狀態； 
			      //參數2： 經過 commit 提交過來的參數；
			      console.log(obj)
			      state.cun -= (obj.c + obj.d)
			    }
		},
		getters:{
			//這裏的getters只負責對外提供數據，不會修改state中的數據，
			//若是想要修改 state 中的數據，請 去找 mutations
			getcun(state){
				return "當前cun的值是"+state.cun;
			}
			// 通過我們回顧對比，發現 getters 中的方法， 和組件中的過濾器比較相似，
			//由於 過濾器和 getters 都沒有修改原數據， 都是把原數據作了一層包裝，
			//提供給了 調用者；
    // 其次， getters 也和 computed 比較像， 只要 state 中的數據發生變化了，
    //那麼，若是 getters 正好也引用了這個數據，那麼 就會當即觸發 getters 的從新求值；
    
//  若是想調用getters中的數據-----this.$store.getters.被調用的方法名字
    
		}
	})
	// 總結：
// 1. state中的數據，不能直接修改，若是想要修改，必須經過 mutations
// 2. 若是組件想要直接 從 state 上獲取數據： 須要 this.$store.state.***
// 3. 若是 組件，想要修改數據，必須使用 mutations 提供的方法，須要經過 this.$store.commit('方法的名稱'， 惟一的一個參數)
// 4. 若是 store 中 state 上的數據， 在對外提供的時候，須要作一層包裝，那麼 ，推薦使用 getters, 若是須要使用 getters ,則用 this.$store.getters.***

	
	/* eslint-disable no-new */
	new Vue({
	  el: '#app',
	  router,
	  components: { App },
	  template: '<App/>',
	  store
	})
		
//App.vue中的調用==================================
		
	<template>
  <div>
   <h1>Vuex的--state--調用======this.$store.state.***===調用</h1>
   <h1>{{this.$store.state.cun}}</h1>
   <h1>Vuex的--mutations--調用======this.$store.commit("方法名")===調用</h1>
   <input type="button" value="加加" @click="add" />
   	<h1>Vuex的--getters--調用======this.$store.getters.***===調用</h1>
   	<h1>{{this.$store.getters.getcun}}</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
  	//想要使用mutations中的方法，必須在本身的methods中定義一個方法進行調用
  	add(){
  		this.$store.commit("add");
  	}
  }
}
複製代碼