前端vue框架的使用

使用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()