阅读 210

初识Vue3.0之小实例todoList

image.png

前言

昨晚讲了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的语法格式

image.png

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>
复制代码
  • 利用addTodoremoveTodo函数完成数据的添加和移除
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
    }
复制代码
  • 效果图

image.png image.png image.png

三、总结

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

参考资料

www.npmjs.com/package/tod…

vue3js.cn/docs/zh/

文章分类
代码人生
文章标签