Vue app Component basic knowledge

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}