npm install -g create-vite-app
create-vite-app projectName
cd projectName
npm install / npm run dev
Vue 3.0 Basic
<template>
<div>
<p>{{msg}}</p>
<button @click="myFunc()">button</button>
<form>
<input type="text" v-model="tempStudent.id">
<input type="text" v-model="tempStudent.name">
<input type="text" v-model='tempStudent.age'>
<input type="submit" @click="addStudent">
</form>
<ul>
<li v-for="(stud,index) in students" :key="stud.id" @click="removeStudent(index)">
{{stud.id}} -- {{ stud.name}}
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
msg: "pengnf",
students: [
{
id: 1,
name: '1', age: 18
},
{
id: 2,
name: '2', age: 20
},
{
id: 3,
name: '3', age: 21
},
],
tempStudent: {
id: 0,
name: '',
age: ''
}
}
},
methods: {
myFunc() {
alert('click myFunc')
},
removeStudent(index) {
this.students = this.students.filter((stu, idx) => idx !== index);
},
addStudent(e) {
e.preventDefault();
const stu = Object.assign({}, this.tempStudent)
this.students.push(stu)
}
}
}
</script>
:key = "stud.id" and copy Object with "Object.assign({}, this.tempStudent)"
setup() {
let count = ref(0)
function func() {
count.value += 1
}
return {count, func} // no need to put variables and function into methods
}
ref is only for premitive types, what if you would like to for complicated type Array & Object, we have to use "reactive" to wrapper
import {reactive} from 'vue'
let state = reactive({
stus : [
{id:'',
name:'1',
age:10},
{id:'',
name:'2',
age:10},
{id:'',
name:'3',
age:10},]
})
return {state}