使用vue框架的步驟：
1.cnpm install -g vue-cli
2.用vue命令進行測試版本
3.vue init進行初始化
4.敲上 vue init webpack (sell)就可以進行安裝webpack打包工具

自定義指令的介紹
1.為什麼需要自定義指令，當需要DOM操作的時候，需要使用自定義指令來解決問題
2.如何註冊和使用自定義指令
(1)註冊
全域性註冊，在任何元件中都可以使用全域性註冊自定義指令
區域性註冊，只能在當前元件中使用該指令
如果需要再多個不同的元件中使用該指令，則把他定義為全域性的
非通用的，我們直接定義為區域性元件
2。註冊全域性自定義指令
(1)
指令的名字隨便起，但是在使用的時候務必加上v-字首，所以我們再加其名字的時候不要加v-字首，如果是
駝峰命名法，要把大寫轉為小寫，用連線符連線起來，否則會報錯
(2)
第二個引數就是需要配置指令的生命鉤子函式，每個鉤子函式都接受兩個引數（el,binding）
el引數指的是作用該指令的DOM物件 ，binding是指一個物件，可以獲得指令的值等資訊
(3)
指令還可以進行傳值，例如 v-show=“布林值”
3.自定義指令的寫法

Vue.directive('focus,{
//當被繫結的元素插入到DOM時，el引數是指該作用指令的DOM元素
//只調用一次，指令第一次繫結到元素時呼叫，在這裡可以進行一次性的初始化設定
//在bind中拿不到父元素
bind(el,binding){
   		console.log('bind',el.parentNode);
   	}
   	 // 被繫結元素插入父節點時呼叫 (僅保證父節點存在，但不一定已被插入文件中)。
     // 如果你需要操作作用指令的父元素，則最起碼寫到這個 inserted 中
     inserted (el) {
       console.log('inserted'
 
, el.parentNode)
     },
     update () {
       console.log('update')
     },
     componentUpdated () {
       console.log('componentUpdated')
     },
     unbind () {
       console.log('unbind')
     }
   })
})

4.用自定義指令模仿v-show

Vue.directive('my-show',{
//在bind中不能獲得父級元素，所以不是很常用
	bind(el,binding){
 

		console.log('my-show bind',el,binding);
		if(binding.value){
			el.style.display = 'block';
			
		}else{
			el.style.display = 'none';
		}
	},
	inserted(el,binding){
		console.log('my-show inserted');
		if(binding.value){
			el.style.display = 'block';
		}else{
			el.style.display = 'none';
		}
	},
	//在update中和componentUpdate中只有在指令的繫結的值發生更新的時候才會觸發呼叫
	/*
	update與componentUpdate中的區別是
	update中獲取的是更新之前的指令所在的DOM內容
	componentUpdate獲取的是更新之後的DOM內容
	如果要獲取更新之前的資料檢視，則把程式碼寫到update中，獲取之後的，寫到componentUpdate中
	
	*/
	update(el,binding){
		console.log('my-show update',el,binding);
		if(binding.value){
			el.style.display = 'block';
		}else{
			el.style.display = 'none';
		}
	}
	  componentUpdated (el, binding) {
	  	console.log('my-show   componentUpdated',el.innerHTML)
       },
       unbind () {
        console.log('my-show unbind')
      }
})

5.對於vue計算屬性computed

/*
對於事件處理函式，還是得寫到方法當中
但是對於屬性來說，而可以寫到computed當中，計算屬性是存放屬性的地方，屬性不用呼叫，如果多次要用到這個方法，可以當成屬性來用，這樣可以提高效能

*/
window.app = new Vue({
		el:"#app",
		data:{
			//獲得本地資料，如果沒有資料，則獲得空陣列
			//資料持久化
			todos:JSON.parse(window.localStorage.getItem('todos')||'[]'),
			currentEditing:null,
			filterText:'all'

		},
		computed:{
			//該成員就是一個方法，但是必須當成屬性來用，不能進性重複呼叫
			//這樣只執行，不用重複呼叫
			remainCount(){
				return this.todos.filter(t=>!t.completed).length;
			},
			toggleAllStat:{
				get(){
					//計算屬性依賴於todos,todos發生變化，其他也發生變化
					//要麼返回true,要麼返回false
					return this.todos.every(t=>t.completed)
				},
				//表單控制元件雙向繫結，checkbox地呼叫
				//1.得到當前地checkbox地選中狀態
				//2.把所有地任務項地都變成toggleAllStat的選項
				set(){
					const checked = !this.toggleAllStat;
					this.todos.forEach(item=>{
						item.completed = checked;
					})
				}
			},
			//這個還沒搞定
			//對於切換功能這裡，沒有完全搞懂，就是顯示全部、已完成、未完成的
			filterTodos(){
				//如果all return todos
				//active todos.filter(t=>!t.completed)
				//completed  todos,fliter(t=>t.completed)
				//直接用switch語句進性判斷
				switch (this.filterText){
					case 'all':
						return this.todos;
						break;
					case 'active':
						return this.todos.filter(t=>!t.completed);
						break;
					case 'completed':
						return this.todos.filter(t=>t.completed)
				}
			}
		},

6.這是基於github上面的todolist來做的

//方法應當寫在methods當中
methods:{
			//使用方法可以把這個複雜邏輯封裝起來,每使用一次就呼叫一次，重複效率不高
			//使用計算屬性，也是方法，不讓模板邏輯太重，解決效能問題
			pushLi(e){

				//獲得文字框的內容
				const value = e.target.value.trim(); //獲取文字框
				if(!value.length){
					return;
				}
				console.log(value);
				//資料校驗
				//新增資料到列表中
				const todos = this.todos;
				//新增元素
				this.todos.push({
					//進行判斷，如果有，就進行新增，陣列為空就為1
					id:todos.length?todos[todos.length-1].id+1:1,
					title:value,
					completed:false,
				});
				const target = e.target;
				target.value = '';//在新增資料之後清空文字框
			},
			handleChange(e){
				//繫結 input 的change事件
				//獲取checkbox的選中狀態
				//直接迴圈所有的自迴圈的選中狀態
				console.log(e.target);
				const checked = e.target.checked;//獲取選項checked的所有選中狀態
				this.todos.forEach(item=>{
						item.completed = checked;//為true就全選中，為false就全不選
				})


			},
			//刪除
			handleRemove(index){
				console.log(index);
				this.todos.splice(index,1)
			},
			//雙擊獲得編輯樣式
			handleEditing(todo){
				//把這個變數等於當前雙擊的todo
				this.currentEditing = todo; //把item傳入進todo，把當前的todo給當前的currentEditing
			},
			//當失去焦點的時候或者敲回車的時候直接儲存編輯
			//新增任務列表
			handleSaveEdit(todo,index,e){
				//拿到文字框的裡面的值
				//資料校驗，如果資料是空的，則直接刪除該元素，否則儲存編輯
				const target = e.target;
				const value = target.value.trim()
				if(!value.length){
					//如果資料為空，就直接刪除
					//需要傳入引數，item,index,$event
					this.todos.splice(index,1);//回車的時候直接刪除

				}else {
					todo.title = value;//把值給當前的title
					this.currentEditing = null;//再把其他的全部設定為不編輯模式
				}
			},
			//當按下esc時，直接取消編輯，什麼也不做
			handleCancelEdit(){
				//取消編輯，回到原來的狀態，全部的樣式置為空

				this.currentEditing = null;
			},
			//清除已完成的選項
			handleClearCompleted(){
				// //獲取已完成的選項
				for(var i=0;i<this,todos.length;i++){
					//選中已完成的選項
					if(this.todos[i].completed){
						this.todos.splice(i,1);//根據下標刪除陣列

						i--;//刪除之後，讓我們遍歷元素的索引倒退一次
					}
				}
				//還有一種辦法把需要的結果進行過濾重新賦值到todos
				//this.todos = this.todos.filter(t =>{!t.completed});
			},
			//顯示沒有完成的數目，直接用fliter進性過濾
			//todos.filter(item=>!item.completed).length
			//獲取剩餘的任務數量
			getRemianingCount(){
				return this.todos.filter(t=>!t.completed).length;
			},
			// //過濾掉其他已完成的選項，選出正在完成的選項
			handleActive(){
				//把已完成的過濾掉，然後賦值給當前的陣列
				this.todos = this.todos.filter(t=>!t.completed);


			},
			handleCompleted(){
				//把未完成的過濾掉，把已完成的賦值給todos
				//filter方法是把完成的符合條件的過濾出來然後賦值給陣列
				this.todos = this.todos.filter(t=>t.completed);
				//需求是如果現在沒有已完成的，應該不做操作

			},
			handleAll(){
				return this.todos;
			},
			//註冊點選事件，修改vue例項的filterText

		}
	})

7.錨點的使用，錨點又叫做hash，切換錨點就像node的切換路由一樣

//註冊錨點事件(hash)改變事件
//該方法只有change的時候才會執行，頁面初始化不會執行
function handleChangeHash(){
	app.filterText = window.location.hash.sunstr(2);//獲取錨點的字串
}
window.onhashchange = handleHashChange;
//在頁面初始化進行呼叫
handleHashChange()