vue.js 开发环境安装成功。
http://localhost:8080/ 使用vue.js双向绑定实现类似这样一个任务清单页面。
下面是我的学习笔记。
//app.vue页面
<template>
<div id="app">
<h1 v-text="title"></h1>
<input v-model="newItem" v-on:keyup.enter="addNew">
<ul>
<li v-for="item in items" v-bind:class="{finished: item.isFinished}" v-on:click="toggleFinish(item)">
{{item.label}}
</li>
</ul>
</div>
</template>
<script>
import Store from './store'
export default{
data(){
return{
title: "每 日 任 务",
items: Store.fetch(),
/*
[
{"label":"俯卧撑10个","isFinished":true}
{"label":"背单词10个","isFinished":false}
]
*/
newItem:''
//liclass:"thisisliclass" //赋值class名称
}
},
watch:{
items:{
handler:function(items){
Store.save(items)
},
deep:true
}
},
methods:{
toggleFinish:function(item){
item.isFinished = !item.isFinished
},
addNew:function(){
this.items.push({
label: this.newItem,
isFinished:false
})
this.newItem=''
}
}
}
</script>
<style>
#app{width:400px;margin:0 auto;}
.finished{text-decoration:line-through;}
</style>
/*
1. export default 理解是,这是一个模块,export导出,导出的是一个对象。
2. data(){} 相当于 data:function(){},ES6语法。
data是一个函授,函数返回一个对象
3. <h1 v-text="title"></h1> 的简写方式为 <h1>{{title}}</h1>
4. v-text 和 v-html 是常用的数据渲染指令,text是纯文本,html会渲染html标签
5. v-for 可以渲染列表,v-for 指令需要以 item in items 形式的特殊语法
6. v-bind:class="[liclass]"
创建一个class,需要在retrun中添加liclass:"thisisliclass" ,赋值class名称
7. v-bind:class="{finished: item.isFinished}"
添加一个finished的class,创建一个对象,item.isFinished, 对应isFinished字段
如果为true就显示这个finished的class,否则就不显示
8. v-on:click="toggleFinish(item)"
v-don 是事件处理器,这里添加了click事件,在 data 里面添加toggleFinish(item)函数
item.isFinished = !item.isFinishe , item.isFinished此时的值是布尔值
!item.isFinishe 是对 item.isFinished 的值进行取反,双向绑定,实现点击切换
9. v-model 在表单控件上创建双向绑定,<input> , <select> , <textarea>
v-on:keyup.enter="addNew" 添加键盘事件,指定enter键值,调用addNew
this.items.push 在items数组末尾添加元素
label: this.newItem 新添加的lable值和input输入的值绑定
isFinished:false 默认行为是false
this.newItem='' input值输入之后,清空
10. watch 观察 Vue 实例变化的一个表达式或计算属性函数,items 指的是观察的对象
handler:function(items) 传进handler这个函数里
Store.save(items) 调用store.js里面的方法,并自动保存到 window.localStorage
deep:true 设置为true,会在页面刷新时更新 isFinished 状态,否则就不会更新
Store.fetch() 调用store.js里面的方法,把存储的值给到 items
*/
//store.js页面
const STORAGE_KEY = 'todos-vuejs'
export default{
fetch(){
return JSON.parse(window.localStorage.getItem(
STORAGE_KEY) || '[]')
},
save (items){
window.localStorage.setItem(
STORAGE_KEY,JSON.stringify(items))
}
}
/*
1.const 是 es6 的语法, 是不会被重新赋值的变量。
2.export default 可以理解为一套模板,导出两个方法,也是es6的语法
*/