vue初识

在经过阅读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元素及相应的组件创建实例，组件

 

效果图

至此，结束。