preface

Last night, I talked about VUE, which made me marvel at the flexibility of its components, so I looked up a lot of information, which is the way to know VUE for the first time. Let’s have a brief understanding first

I. Introduction to VUE

1. What is vue.js

Vue (pronounced vju/curliest, similar to View) is a set of progressive frameworks for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue’s core library focuses only on the view layer, making it easy to get started and integrate with third-party libraries or existing projects. On the other hand, when combined with modern toolchains and various supporting libraries, Vue is perfectly capable of providing drivers for complex, single-page applications. The goal of vue.js is to implement data binding and composite view components for responses through the simplest POSSIBLE API.

2. What is an incremental framework

With Vue, you can implement a component or two on top of a larger system, as jQuery does. You can also use it for whole family development, when Angular uses it; You can also use its views, paired with your own design of the whole underlying Vue core functionality, as a view template engine, but that doesn’t mean that Vue can’t be a framework. As you can see below, this includes all the parts of Vue. Based on declarative rendering (view template engine), we can build a complete framework by adding component systems, client routing, and large-scale state management. What’s more, these functions are independent of each other, and you can build on top of the core function with whatever parts you want, not all of them. It can be seen that the “progressive” is actually the way Vue is used, and also reflects the design concept of Vue

3. Advantages of VUE

  • Lightweight framework
  • Easy to learn
  • Two-way data binding
  • componentization
  • View, data, structure separation
  • Virtual DOM
  • Faster operation

TodoList of small examples

1. Environment construction

  • Tool vscode
  • Global installation of VUE scaffolding
npm i -g @vue/cli
Copy the code
  • Create a project
vue create todolist
Copy the code

Select the syntax format of Vue3.0

2. Import the file

  • Import the todoList file
<template>
  <todoList/>
</template>

<script>
import todoList from './components/todoList'
export default {
  name: 'App',
  components: {
    todoList
  }
}
</script>
Copy the code
  • Import the CSS style file
npm i todomvc-app-css
Copy the code
  • Introduce CSS in main.js
import 'todomvc-app-css/index.css'
Copy the code

3. Realization of functions

  • Build a basic framework with a reactive approach and add related events
Export default {setup () {const state = reactive({newTodo: '', todos: [{id: '1', title: '', complated: False}, {id: '2', title: '1 ', complated: false}]})Copy the code
<section class="todoapp"> <header class="header"> <h1>Vue3 todos</h1> <input type="text" class="new-todo" Placeholder =" @keyup.enter="addTodo" v-model="newTodo"><! </header> </section>Copy the code
  • usingaddTodoandremoveTodoFunction to add and remove data
function addTodo() { console.log(state.newTodo); NewTodo let value= state.newtodo && state.newtodo.trim ()// Remove the space if(! value) return state.todos.push({ id:state.todos.length+1, title:value, Complated :false}) state.newTodo= "// empty} function removeTodo(index){console.log(index); State.todos.splice (index,1)// Cut array}Copy the code
  • deconstructionstateAnd the return value of the function
return { ... ToRefs (state),// addTodo, removeTodo}Copy the code
  • rendering

Third, summary

Because it is only a beginner, just a beginner of VUE, may not be very clear, a lot of things have not come into contact with, but also ask you more advice, vUE world is rich and colorful, waiting for us to explore

The resources

www.npmjs.com/package/tod…

vue3js.cn/docs/zh/