• vue-cli开发todoList


    vue官网:https://cn.vuejs.org/

    接着上一篇,使用vue-cli创建项目后,然后用vscode打开项目,vscode感觉跟其他的IDE不同,它对项目的管理较松散,更多是靠各类插件去完成工作。下图是vscode打开vue-cli创建的项目的项目结构截图:

      其实从这个结构上可以看出,主页面就是index.html位于项目根目录下,src目录下就是程序员需要关注的目录,在这下面有一个main.js ,根据使用其他语言的经验,显然这个文件就是程序的入口。

    import Vue from 'vue'
    import App from './App'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      components: { App },
      template: '<App/>'
    })

    果然,里面创建了一个Vue的实例,也就是整个程序的一个主组件, 从代码上可知这个组件名字是App组件,当前目录下的App.vue就是该组件的代码, 这个代码包含三部分:

    1. 模板部分<template></template>

        决定要展示和渲染的内容

    2 .逻辑部分 <script></script>

        js 交互处理的代码

    3. 样式部分 <style></style>

    <template>
      <div id="app">
        <todo-list/>
      </div>
    </template>
    
    <script>
    import TodoList from './components/TodoList'
    
    export default {
      name: 'App',
      components: {
        'todo-list': TodoList
      }
    }
    </script>
    
    <style>
    #app {
      
    }
    </style>

    为了亲自体验下,所以先把这三部分默义生成的代码删除, 按照todoList的需求写了一个最简单的Demo:

    1. 编写一个TodoList组件,在src/components目录下创建一个TodoList.vue文件

    <template>
      <div>
        <div>
          <input value="" v-model="inputValue"/>
          <button  @click="handleAddItem">添加</button>
        </div>
        <div>
          <ul>
            <li @click="handleDelItem(index)" v-for="(item,index) of items"  :key = "index">{{item}}</li>
          </ul>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'TodoList',
      props: [],
      data(){
         return {
           inputValue:'',
           items:[]
         }
      },
      methods:{
         handleAddItem(){
           this.items.push(this.inputValue)
           this.inputValue = ''
         },
         handleDelItem(index){
           this.items.splice(index,1)
         }
      }
      
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    
    </style>

    指令说明:v-bind 简写为:    v-on 简写为 @

    所有的todolist的功能都在该组件内部实现了,下面是App组件对该组件的使用:

    <template>
      <div id="app">
        <todo-list/>
      </div>
    </template>
    
    <script>
    import TodoList from './components/TodoList'
    
    export default {
      name: 'App',
      components: {
        'todo-list': TodoList
      }
    }
    </script>
    
    <style>
    #app {
      
    }
    </style>

    这里说一个知识点:

    export default {
     data(){
         return {
           inputValue:'',
           items:[]
         }
      }
    }
    这个exprot default中的data 为可不写如下方式:
    export default {
      data: {
         inputValue:'',
         items:[]
      }
    }
    这是因为return方式有点象是java中的new 的方式,每次返回的是新初始化的对象值,而 data对象的方式有点象java中static的方式,会返回对象上次被修改后的情况。

    执行 npm run dev ,显示效果如下:

    点击添加按钮可以把文本框的内容添加到下面列表中,双击列表的其中一项可以把它从列表中删除

    第一个vue的小案例,在此记录一下,可以帮着日后一步步深入去理解vue

  • 相关阅读:
    【转】numpy.random.randn()与rand()的区别
    【转】numpy.random.randn()与rand()的区别
    春节一顿饭,吃懂了分布式资源调度
    春节一顿饭,吃懂了分布式资源调度
    ASP.NET 分页类 简单好用 支持 AJAX 自定义文字
    系统设计摘录CAP
    webapi上传文件
    webuploader上传工具
    Js学习文件上传
    K-means算法Java实现
  • 原文地址:https://www.cnblogs.com/hzhuxin/p/14819523.html
Copyright © 2020-2023  润新知