基于vue-cli工具编写的todoList-Demo

2016-11-13 本文已影响490人艾伦先生

vue 安装环境

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$  vue init webpack my-project
# 安装依赖
$ cd my-project
$ npm install
# 运行项目（可能要等十秒左右）
$ npm run dev

TODOLIST demo开发

项目结构

项目目录如上图所示，大概介绍一下本次demo涉及的目录和一些基本介绍

index.html 项目入口文件

注意：有个id为'app'的DIV，通过这个DOM节点挂载组件

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>first-project</title>
    </head>
    <body>
      <div id="app"></div>
      <!-- built files will be auto injected -->
    </body>
  </html>

src/main.js 引入组件并挂载在入口文件的DOM结构中

注意：我把这里原来引入的App.vue文件替换成了我的todoList.vue文件
```
  import Vue from 'vue'
  import App from './todoList.vue'       
  
  new Vue({
    el: '#app',
    render: h => h(App)
  })
```

src/todoList.vue 封装了一个todolist组件

  <template>
    <div id="app">
      <h1>{{title}}</h1>
      <!-- 输入控件，将输入框内的值绑定到当前组件的data.newItem中，
          同时监听回车事件-->
      <input 
        v-model="newItem" 
        v-on:keyup.enter="addNew"/>
      <!--遍历data.items数据，并给每个li绑定class和click事件-->  
      <ul>
        <li v-for="item in items" 
          v-bind:class="{finished: item.isFinished}"
          v-on:click="toggleFinish(item)">
          {{item.label}}
        </li>
      </ul>
      
      <br /><br /><br /><br /><br />
      <p><strong>下面是一组组件调用的基本演示</strong></p>   
  
       <!--调用子组件，并给子组件传递prps参数(msgFromFather)
          同时给子组件上自定义钩子函数child-tell-something,用于子组件向父组件传参
          注意：import进来的组件名，如strAstrB必须转换成str-a-str --> 
      <component-for-to-do-list 
        msgFromFather="Hi!child-component" 
        v-on:child-tell-something="listenToMyChild">
      </component-for-to-do-list>
      <h3>Main conponent hear child-component say:{{childWords}}</h3>
    </div>
  </template>
  
  <script>
  import ComponentForToDoList from './components/ComponentForToDoList'
  export default {
      // 数据
      data: function() {
        return {
          title: 'An todolist',
          items: [],
          newItem:'',
          childWords:''
        }
      },
      // 声明方法
      methods: {
        // 点击事件回调函数，切换item.isFinished的值
        toggleFinish: function(item){
          item.isFinished = !item.isFinished      
        },
        addNew: function() {
          this.items.push({
              label: this.newItem,
              isFinished: false,
          })
          this.newItem = ''
        },
        // 子组件触发事件的回调函数，
        // 将参数绑定到自身的data.childWords上
        listenToMyChild: function(msg){
          this.childWords = msg
        }
      },
      // 注册子组件
      components:{
        ComponentForToDoList 
      }
  }
  </script>
  
  <style>
  .finished {text-decoration: underline;}
  html {height: 100%;}
  
  body {display: flex;align-items: center;justify-content: center;height: 100%;}
  
  #app {color: #2c3e50;margin-top: -100px;max-width: 600px;font-family: Source Sans Pro, Helvetica, sans-serif;text-align: center;}
  
  #app a {color: #42b983;text-decoration: none;}
  
  .logo {width: 100px;height: 100px}
  h3 {color: #42b983;}
  </style>

src/components/ComponentForToDoList.vue 子组件

注意：components 目录约定为子组件的位置，下面是子组件的代码

  <template>
    <div class="hello">
      <h3>{{ 'Main-conponent call me:' + msgFromFather }}</h3>
      <button v-on:click="onClickBtn">call back for main-conponent</button>
    </div>
  </template>
  
  <script>
  export default {
    data () {
      return {
        msg: 'Nice to meet you !'
      }
    },
    // 注册父组件传递来的props,
    // 主：在当前组件内可以直接使用msgFromFather
    props:['msgFromFather'],
    methods: {
      onClickBtn: function(){
          //console.log('fff:'+this.msgFromFather);
          //debugger;   
          this.$emit('child-tell-something', this.msg)
      },
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
  h3 {
    color: #42b983;
  }
  </style>

具体的请参考注释和运行结果

运行项目

npm run dev #会自动打开默认浏览器8000端口

初始页面

分为两部分：第一部分是一个基本的todolist，可以录入事件，切换状态。第二部分是一个基本的组件间传参的演示。

操作后

写在后面

先挖个坑，慢慢填_{持续更新，感谢支持与鼓励}