标签：methods 数据 head editing can sch reverse 简写 pre
根据一组数组的选项列表进行渲染
语法：value,key in items | value,key of items
变异方法
vue提供一组方法，对数组进行操作的时候，会触发视图更新。
push() pop() shift() unshift() splice() sort() reverse()
用来监听DOM事件触发代码
语法：v-on:eventName="eventHandle"
指令简写：@
事件处理函数：写在methods中统一管理
事件对象：在事件处理函数中获取
事件处理函数只有纯粹的逻辑判断，不处理DOM事件的细节。例如阻止冒泡，取消默认行为，判断按键。
修饰符的位置：v-on:eventName.修饰符
修饰符：.stop .prevent .capture .self .once
按键修饰符：.enter .tab .delete .esc .space .up .down .left .right
.ctrl .alt .shift .meta .键值
根据表达式的值，用来显示或隐藏元素
语法：v-show="表达式"（表达式值为true显示）
元素会被渲染在页面中，只根据表达式的值进行css切换
class也为元素的属性，可以使用v-bind:class
语法：v-bind:class="{className:表达式}"（表达式值为true添加className）
v-bind指令简写为：
除了vue内置的指令，可以自己设置指令
选项对象的directives属性
{
directives:{}
}
钩子函数
update被绑定元素所在的模板更新时调用
钩子函数中的参数：
el:指令所绑定的元素，可以用来直接操作DOM
binding:一个对象
value:指令的绑定值
模板是为了描述视图的结构，模板中放入太多逻辑会导致模板过重难以维护。
例如下面在模板中筛选未完成任务个数，这样的写法是不够好的：
<li> {{ list.filter(function(item){ return !item.isChecked; }).length }} 个任务未完成</li>
在计算一个属性时，vue.js更新它的依赖列表并缓存结果，只有当其中一个依赖发生了变化，缓存的结果才无效。
语法：在选项对象中
{
...
computed:{}
}
对上面的例子的改进：
computed:{ nocheckLength:function(){ return this.list.filter(function(item){ return !item.isChecked; }).length } },
todoList.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>todoList</title> <link rel="stylesheet" type="text/css" href="./index.css"> <script src="./vue.js"></script> </head> <body> <div class="page-top"> <div class="page-content"> <h2>任务计划列表</h2> </div> </div> <div class="main"> <h3 class="big-title">添加任务：</h3> <input type="text" placeholder="例如：买大房子； 提示：回车即可添加任务" class="task-input" v-on:keyup.enter="addTodo" v-model="todo" /> <ul class="task-count" v-show="list.length"> <li> {{ nocheckLength }} 个任务未完成</li> <li class="active"> <a href="#" class="active">所有任务</a> <a href="#">未完成的任务</a> <a href="#">完成的任务</a> </li> </ul> <h3 class="big-title">任务列表：</h3> <div class="tasks"> <span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span> <ul class="todo-list"> <li class="todo" :class="{completed:item.isChecked,editing:item === editorTodos}" v-for="item in list"> <div class="view"> <input type="checkbox" class="toggle" v-model="item.isChecked"> <label @dblclick="editorTodo(item)">{{item.title}}</label> <button class="destroy" @click="deleteTodo(item)"></button> </div> <input type="text" class="edit" v-model="item.title" v-focus="editorTodos === item" @blur="editorTodoed(item)" @keyup.13="editorTodoed(item)" @keyup.esc="cancelTodo(item)" /> </li> </ul> </div> </div> <script src="./app.js"></script> </body> </html>
index.css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>todoList</title> <link rel="stylesheet" type="text/css" href="./index.css"> <script src="./vue.js"></script> </head> <body> <div class="page-top"> <div class="page-content"> <h2>任务计划列表</h2> </div> </div> <div class="main"> <h3 class="big-title">添加任务：</h3> <input type="text" placeholder="例如：买大房子； 提示：回车即可添加任务" class="task-input" v-on:keyup.enter="addTodo" v-model="todo" /> <ul class="task-count" v-show="list.length"> <li> {{ nocheckLength }} 个任务未完成</li> <li class="active"> <a href="#" class="active">所有任务</a> <a href="#">未完成的任务</a> <a href="#">完成的任务</a> </li> </ul> <h3 class="big-title">任务列表：</h3> <div class="tasks"> <span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span> <ul class="todo-list"> <li class="todo" :class="{completed:item.isChecked,editing:item === editorTodos}" v-for="item in list"> <div class="view"> <input type="checkbox" class="toggle" v-model="item.isChecked"> <label @dblclick="editorTodo(item)">{{item.title}}</label> <button class="destroy" @click="deleteTodo(item)"></button> </div> <input type="text" class="edit" v-model="item.title" v-focus="editorTodos === item" @blur="editorTodoed(item)" @keyup.13="editorTodoed(item)" @keyup.esc="cancelTodo(item)" /> </li> </ul> </div> </div> <script src="./app.js"></script> </body> </html>
app.js
var list=[ { title:"学习vue", isChecked:false //状态为true，选中 }, { title:"走向人生巅峰", isChecked:true } ]; new Vue({ el:".main", data:{ list:list, todo:‘‘, editorTodos:‘‘ ,//记录正在编辑的数据 beforeTitle:‘‘ //记录正在编辑的数据的title }, computed:{ nocheckLength:function(){ return this.list.filter(function(item){ return !item.isChecked; }).length } }, methods:{ //添加任务 addTodo(ev){ //函数简写的方式，es6 this.list.push({ title:this.todo, isChecked:false }); //事件处理函数中的this指向的是当前这个根实例 this.todo = ‘‘; }, //删除任务 deleteTodo(todo){ var index = this.list.indexOf(todo); this.list.splice(index,1); }, //编辑任务 editorTodo(todo){ console.log(todo); //编辑任务的时候记录一下这条任务的title,方便在取消编辑的时候重新复制回来 this.beforeTitle = todo.title; this.editorTodos = todo; }, //编辑完成 editorTodoed(todo){ this.editorTodos = ""; }, //取消编辑 cancelTodo(todo){ todo.title = this.beforeTitle; this.beforeTitle = ‘‘; //让div显示，input隐藏 this.editorTodos = ‘‘; } }, directives:{ "focus":{ update(el,binding){ if(binding.value){ el.focus(); } } } } });
标签：methods 数据 head editing can sch reverse 简写 pre
原文地址：http://www.cnblogs.com/hpl525/p/7872053.html
