todoMVC_mvc框架是什么

todoMVC_mvc框架是什么依赖cssnpmitodomvc-commontodomvc-app-cssapp.component.tsimport{Component}from’@angular/core’;consttodos=[{id:1,title:’吃饭’,done:true},{id:1,title:’工作’,done:false},{id:1,title:’运动’,

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

依赖css

npm i todomvc-common todomvc-app-css

app.component.ts

import { 
   Component} from '@angular/core';


const todos = [
  { 
   
    id: 1,
    title: '吃饭',
    done: true
  },
  { 
   
    id: 1,
    title: '工作',
    done: false
  },
  { 
   
    id: 1,
    title: '运动',
    done: true
  }
]


@Component({ 
   
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { 
   
  h_title = 'todo-angular';
  public todos: { 
   
    id: number,
    title: string,
    done: boolean
  }[] = JSON.parse( window.localStorage.getItem('todos') || '[]');
  // 该函数是一个特殊的angular生命周期钩子函数
  // 它会在angular应用初始话的时候执行一次
  ngOnInit() { 
   
    window.onhashchange = () => { 
   
      this.hashChangeHandler()
      // 当用户点击了锚点的时候,我们需要获取当前的锚点标识
      // 然后动态的将根组件visibility设置为当前点击的锚点标识
      //注意 bind ,不然的话this就变成window了
      window.onhashchange = this.hashChangeHandler.bind(this)
    }
  }

  // 当angular组件数据发生改变的时候,ngDoCheck钩子被触发
  // 在钩子函数中持久化数据
  ngDoCheck(){ 
   
    window.localStorage.setItem('todos', JSON.stringify(this.todos))
  }
  public currentEditing: { 
   
    id: number,
    title: string,
    done: boolean
  } = null
// 实现导航切换数据过滤
// 1. 提供一个属性,该属性会根据当前点击的连接返回过滤后的数据 filterTodos
// 2. 提供一个属性,用来存储当前点击的连接标识 visibility all active completed
// 3. 为连接提供点击事件,当点击导航链接的时候,改变
//
  public visibility: string = 'all'

  get filterTodos() { 
   
    if (this.visibility === 'all') { 
   
      return this.todos
    } else if (this.visibility === 'active') { 
   
      return this.todos.filter((t => !t.done))
    } else if (this.visibility === 'completed') { 
   
      return this.todos.filter(t => t.done)
    }
    return null
  }

  addTodo(e): void { 
   
    const titleText = e.target.value
    if (!titleText.length) { 
   
      return
    }
    const last = this.todos[this.todos.length - 1]
    this.todos.push({ 
   
      id: last ? last.id + 1 : 1,
      title: titleText,
      done: false
    })
    e.target.value = ''
  }

  get toggleAll() { 
   
    return this.todos.every(t => t.done)
  }

  set toggleAll(val) { 
   
    this.todos.forEach(t => t.done = val)
  }

  removeTodo(index: number) { 
   
    this.todos.splice(index, 1)
  }

  saveEdit(todo, e) { 
   
    this.currentEditing = null
    todo.title = e.target.value
  }

  handleEditUp(e) { 
   
    const { 
   keyCode, target} = e
    if (keyCode === 27) { 
   
      target.value = this.currentEditing.title
      this.currentEditing = null
    }
  }

  get remainingCount() { 
   
    return this.todos.filter(t => !t.done).length
  }

  hashChangeHandler(){ 
   
    const hash = window.location.hash.substr(1)
    switch (hash) { 
   
      case '/':
        this.visibility = 'all'
        break;
      case '/active':
        this.visibility = 'active'
        break;
      case '/completed':
        this.visibility = 'completed'
        break;
    }
  }

  //清除所有
  clearAllDone() { 
   
    this.todos = this.todos.filter(t => !t.done)
  }
}



app.component.html

<section class="todoapp" ng-app="">
  <header class="header">
    <h1>待办事项</h1>
    <input class="new-todo" placeholder="What needs to be done?" autofocus (keyup.enter)="addTodo($event)" >
  </header>
  <!-- This section should be hidden by default and shown when there are todos -->
  <section class="main" *ngIf="todos.length">
    <input id="toggle-all" class="toggle-all" type="checkbox" [checked]="toggleAll">
    <!-- (change)="toggleAll = $event.target.checked"-->
    <!-- [checked]="toggleAll">-->
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
      <!-- These are here just to show the structure of the list items -->
      <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
      <li *ngFor="let todo of filterTodos; let i = index;" [ngClass]="{ editing: currentEditing === todo, completed: todo.done }">
        <div class="view">
          <input class="toggle" type="checkbox" [(ngModel)]="todo.done">
          <label (dblclick)="currentEditing = todo">{
  
  { todo.title }}</label>
          <button class="destroy" (click)="removeTodo(i)"></button>
        </div>
        <input class="edit" [value]="todo.title" (keyup.enter)="saveEdit(todo, $event)" (keyup)="handleEditUp($event)" (blur)="saveEdit(todo, $event)">
      </li>
    </ul>
  </section>
  <!-- This footer should be hidden by default and shown when there are todos -->
  <footer class="footer" *ngIf="todos.length">
    <!-- This should be `0 items left` by default -->
    <span class="todo-count"><strong>{
  
  {remainingCount}}</strong> item left</span>
    <!-- Remove this if you don't implement routing -->
    <ul class="filters">
      <li>
        <a [ngClass]="{ selected: visibility === 'all' }" href="#/">All</a>
      </li>
      <li>
        <a [ngClass]="{ selected: visibility === 'active' }" href="#/active">Active</a>
      </li>
      <li>
        <a [ngClass]="{ selected: visibility === 'completed' }" href="#/completed">Completed</a>
      </li>
    </ul>
    <!-- Hidden if no completed items are left ↓ -->
    <button (click)="clearAllDone()" class="clear-completed">Clear completed
    </button>
  </footer>
</section>

style.css

/* You can add global styles to this file, and also import other style files */
@import url('~todomvc-common/base.css');
@import url('~todomvc-app-css/index.css');

tsconfig.json

"strict": false,

app.module.ts

import { 
    NgModule } from '@angular/core';
import { 
    BrowserModule } from '@angular/platform-browser';
import { 
   FormsModule} from "@angular/forms";
import { 
    AppComponent } from './app.component';

@NgModule({ 
   
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
}) export class AppModule { 
    }

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/194860.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • google搜索引擎怎么用_日本搜索引擎

    google搜索引擎怎么用_日本搜索引擎搜索引擎命令大全!1、双引号把搜索词放在双引号中,代表完全匹配搜索,也就是说搜索结果返回的页面包含双引号中出现的所有的词,连顺序也必须完全匹配。bd和Google都支持这个指令。例如搜索:“seo方法图片”2、减号减号代表搜索不包含减号后面的词的页面。使用这个指令时减号前面必须是空格,减号后面没有空格,紧跟着需要排除的词。Google和bd都支持这个指令。

  • Pytest(16)随机执行测试用例pytest-random-order

    Pytest(16)随机执行测试用例pytest-random-order前言通常我们认为每个测试用例都是相互独立的,因此需要保证测试结果不依赖于测试顺序,以不同的顺序运行测试用例,可以得到相同的结果。pytest默认运行用例的顺序是按模块和用例命名的ASCII编码

  • vue/uniapp 如何让页面的 onLoad 在 onLaunch 之后执行[通俗易懂]

    app.vue里的onLaunch中如果有异步方法(比如:登录),返回结果可能会在页面的onLoad之后,但onLoad中的方法需要登录回调的结果。为了让页面的onLoad在onLaunch之后执行,解决方案:1.main.js添加代码Vue.prototype.$onLaunched=newPromise(resolve=>{Vue.prototype.$isResolve=resolve;})2.在App.vue的onLau

  • Spring StoredProcedure for Oracle cursor

    Spring StoredProcedure for Oracle cursorhttp://forum.springsource.org/archive/index.php/t-24915.htmlPDAViewFullVersion:SqlReturnResultSetvs.SqlOutParameter  lvmMay12th,2006,12:33PMIspentsometimeyest

  • android程序员简历模板

    android程序员简历模板Android程序员简历模板地址https://github.com/geekcompany/ResumeSample/blob/master/android.mdSkiptocontentSignup SigninThisrepository ExploreFeaturesEnterprisePricing

  • vue 设置定时执行函数

    vue 设置定时执行函数varapp=newVue({el:’#app’,data:{},filters:{},created:function(){setInterval(this.timer,1000);…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号