在经过阅读vue的文档（https://cn.vuejs.org/v2/guide/installation.html）之后，开始坎坷的学习之路。看着不难 [“真挚”的笑脸]
一、 跟着教程将vue和vue-cli进行安装
大概就是以下命令：
npm install vue
npm install vue-cli
二、搭建项目
vue init webpack todolist
根据提示选择需要的部分，像eslint（测试）、vue-route（路由设置）
项目结构目录
- 我没有使用vue-route，过于复杂了，使用eslint时，由于使用的是编译器的格式化，但与测试的代码的格式不同会频繁warning
三、开始编（踩）码（坑）
实现的基本功能
1、实现输入并且能够展示在下方区域
2、点击按钮或者回车实现1功能
3、点击列表样式进行修改
-
在
template标签内构建HTML结构
//完成输入功能
<template>
<div>
<input type="text"/>
<button>确认</button>
</template>
与react相似的，在template内只能有一个子元素，所以应用一个div将所有内容进行包含
-
实现点击/回车事件
<input type="text" v-on:keyup.enter="addTask" v-model="newTask"/>
vue中使用v-on指令进行对时间的监听，使用v-model绑定数据变量
-
将输入的内容进行展示
<template>
<div>
……
<div>
<ul>
<li v-for="task in tasks" }</li>
</ul>
</div>
</div>
</template>
v-for将一个数值对应为一组元素，进行列表渲染
-
增加CSS样式
<li v-for="task in tasks" v-bind:class={finished:task.isFinished} v-on:click="finish(task)">
{{task.content}}
</li>
使用v-bind:class,更具变量数值的true/false 来决定是否渲染该样式
-
使用
export default将对象进行导出,包括组件中的数据及事件
export default {
name: 'Content',
data() {
return {
tasks: [
{
content: "read books",
isFinished: false
}
],
newTask: ''
}
},
methods: {
addTask() {
this.tasks.push({content: this.newTask, isFinished: false});
this.newTask = '';
},
finish(task) {
task.isFinished = !task.isFinished;
}
}
}
这个对象导出作为 new Vue()的参数
-
在主文件中调用
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
使用new vue（）接受参数DOM元素及相应的组件创建实例，组件
效果图
至此，结束。
