npm install -g @vue/cli
# OR
yarn global add @vue/cli
vue create my-project
npx create-nuxt-app <my-project>
# OR
yarn create-nuxt-app <my-project>
npm init vite@latest
# OR
yarn create vite
<section class="main" *ngIf="todoStore.todos.length > 0">
<input type="checkbox"
*ngIf="todoStore.todos.length"
[checked]="todoStore.allCompleted()"
(click)="todoStore.setAllTo(toggleall.checked)">
<ul class="todo-list">
<li *ngFor="#todo of todoStore.todos" [class.completed]="todo.completed" [class.editing]="todo.editing">
<div class="view">
<input class="toggle" type="checkbox" (click)="toggleCompletion(todo)" [checked]="todo.completed">
<label (click)="editTodo(todo)">{{todo.title}}</label>
<button class="destroy" (click)="remove(todo)"></button>
</div>
<input class="edit"
*ngIf="todo.editing"
[value]="todo.title"
(blur)="stopEditing(todo, editedtodo.value)"
(keyup.enter)="updateEditingTodo(todo, editedtodo.value)"
(keyup.escape)="cancelEditingTodo(todo)">
</li>
</ul>
</section>
<section class="main" v-if="todoStore.todos.length > 0">
<input type="checkbox"
v-f="todoStore.todos.length"
:checked="todoStore.allCompleted()"
@click="todoStore.setAllTo(toggleall.checked)">
<ul class="todo-list">
<li v-for="todo in todoStore.todos" :class="{completed: todo.completed, editing: todo.editing}">
<div class="view">
<input class="toggle" type="checkbox" @click="toggleCompletion(todo)" :checked="todo.completed">
<label @click="editTodo(todo)">{{todo.title}}</label>
<button class="destroy" @click="remove(todo)"></button>
</div>
<input class="edit"
v-if="todo.editing"
:value="todo.title"
@blur="stopEditing(todo, editedtodo.value)"
@keyup.enter="updateEditingTodo(todo, editedtodo.value)"
@keyup.esc="cancelEditingTodo(todo)">
</li>
</ul>
</section>
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
import { ref } from "vue";
export default {
setup() {
const state = ref("");
const handleSubmit = (event) => {
event.preventDefault();
alert("A name was submitted: " + state.value);
};
const handleChange = (event) => {
state.value = event.target.value;
};
return () => (
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" value={state.value} onChange={handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
},
};
<script>
export default {
data() {
return {
headerColor: 'red',
}
},
}
</script>
<template>
<h1 class="title">Smashing Workshop: Lesson 1</h1>
</template>
<style>
.title {
color: v-bind(headerColor);
}
</style>
<style lang="scss">
.user-wrapper {
& > .user {
&:hover {
// ...
}
}
}
</style>