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