脚本宝典收集整理的这篇文章主要介绍了Vue做的ToDo小例子,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev
安装vue init webpack my-project的时候会出现几条命令,都选择no就可以了
译者注:对于大陆用户,建议将 npm 的注册表源设置为国内的镜像,可以大幅提升安装速度。可以用中国淘宝的镜像cnpm
<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>
<p>child tells me: {{ childWorlds }}</p>
<component-a msgfromfather = "you die!!"
v-on:child-tell-me-something="listenToMyBoy"></component-a>
</div>
</template>
<script>
import Store from './store'
import ComponentA from './components/componentA'
export default {
data: function(){
return {
title: 'this is a todo list',
items: Store.fetch(),
newItem:'',
childWorlds: ''
}
},
components: { ComponentA },
watch:{
items: {
handler: function(items){
Store.save(items)
},
deep: true
}
},
events: {
'child-tell-me-something': function (msg) {
this.childWorlds = msg;
}
},
methods:{
toggleFinish:function(item){
item.isFinished =! item.isFinished
},
addNew: function(){
this.items.push({
label: this.newItem,
isFinished:false
})
this.newItem=''
this.$broadcast('onAddnew',this.items)
},
listenToMyBoy: function (msg) {
this.childWorlds = msg;
}
}
}
</script>
<style>
.finished{
text-decoration:underline;
}
p{
color:blue;
}
h1{
color:green;
}
</style>
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h1>{{ msgfromfather }}</h1>
<button v-on:click="onClickMe">open mouse!</button>
</div>
</template>
<script>
export default {
name: 'hello',
data: function () {
return {
msg: 'hello from component a!'
}
},
props:['msgfromfather'],
events: {
'onAddnew':function (items){
}
},
methods: {
onClickMe: function () {
this.$emit('child-tell-me-something', this.msg);
}
}
}
</script>
const STORAGE_KEY = 'todos-vuejs'
export default{
fetch: function () {
return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
},
save: function (items) {
window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items))
}
}
以上是脚本宝典为你收集整理的Vue做的ToDo小例子全部内容,希望文章能够帮你解决Vue做的ToDo小例子所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。