前言

昨晚讲了vue，让我惊叹于其组件的灵活之处，于是乎查阅了很多的资料，算是vue的初识之路,先来简单了解下

一、vue介绍

1、什么是vue.js

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

2、什么是渐进式框架

使用vue，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用 Vue的核心的功能，是一个视图模板引擎，但这不是说Vue就不能成为一个框架。如下图所示，这里包含了Vue的所有部件，在声明式渲染（视图模板引擎）的基础上，我们可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。更重要的是，这些功能相互独立，你可以在核心功能的基础上任意选用其他的部件，不一定要全部整合在一起。可以看到，所说的“渐进式”，其实就是Vue的使用方式，同时也体现了Vue的设计的理念

3、vue的优点

轻量级框架
简单易学
双向数据绑定
组件化
视图,数据,结构分离
虚拟DOM
运行速度更快

二、小实例之todoList

1、环境搭建

工具 vscode
全局安装vue脚手架

npm i -g @vue/cli

创建项目

vue create todolist

选择vue3.0的语法格式

2、导入文件

导入todoList文件

<template>
  <todoList/>
</template>

<script>
import todoList from './components/todoList'
export default {
  name: 'App',
  components: {
    todoList
  }
}
</script>

导入css样式文件

npm i todomvc-app-css

在main.js引入css

import 'todomvc-app-css/index.css'

3、功能的实现

利用响应式方法建立基本的框架，并且添加相关事件

export default {
  setup () {
    const state = reactive({//响应式方法
      newTodo: '',
      todos: [
        { id: '1', title: '吃饭', complated: false },
        { id: '2', title: '睡觉', complated: false }
      ]
    })

<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>

利用addTodo和removeTodo函数完成数据的添加和移除

function addTodo() {
      console.log(state.newTodo);//在数据源中输出newTodo
      let value=state.newTodo && state.newTodo.trim()//去空格
      if(!value) return
      state.todos.push({
          id:state.todos.length+1,
          title:value,
          complated:false
      })
      state.newTodo=''//清空
    }
    function removeTodo(index){
        console.log(index);
        state.todos.splice(index,1)//切割数组
    }

解构state及函数的返回值

return {
      ...toRefs(state),//解构
      addTodo,
      removeTodo
    }

效果图

三、总结

由于只是初学者，仅仅是入门了vue，可能理得不是很清晰，很多东西还没接触到，还请各位大佬多指教，vue的世界丰富而多彩，正等着我们去探索

参考资料

www.npmjs.com/package/tod…

vue3js.cn/docs/zh/

初识Vue3.0之小实例todoList

前言