vue3.0快速入门的三个小实例

最新推荐文章于 2024-05-05 21:29:47 发布

秃头程序员.

最新推荐文章于 2024-05-05 21:29:47 发布

阅读量1.1k

点赞数 3

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qihaotang/article/details/115553120

版权

Vue 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

前言

之前一直在用Vue2做项目，近段时间看vue3用起来挺方便，就把之前学习Vue2的几个小案例用Vue3实现了一遍，希望能帮到大家更好的学习和了解Vue3，如果发现文章写得不好，或者有什么建议！欢迎大家指点迷津！

首先要了解Vue2和Vue3的区别，比如：
1、3.0去掉了filter, 没有有beforeCreate created,用setup取代
2、setup里没有this
3、响应式不区分数组和对象
4、新增Composition API，更好的逻辑复用和代码组织

其次要了解Vue3中常用的函数：
1、setup 函数，可以代替Vue2中的data和method属性,直接把逻辑加在setup中
2、reactive 用于为对象添加响应式状态（获取数据值的时候直接获取，不需要加.value，参数只能传入对象类型）
3、ref 用于为数据添加响应式状态（由于reactive只能传入对象类型的参数，而对于基本数据类型要添加响应式状态就只能用ref）
4、toRef 用于为源响应式对象上的属性新建一个ref，从而保持对其源对象属性的响应式连接。接收两个参数：源响应式对象和属性名，返回一个ref数据
4、toRefs 用于将响应式对象转换为结果对象，其中结果对象的每个属性都是指向原始对象相应属性的ref

下面就是最简单的小案例

1、简单计算器功能

计算器功能很简单的，只需要两个输入框，第一个输入框代表输入的第一个数字、第二个输入框代表输入的第二个数字，如果你没有输入数字或者只输入一个就直接点击加减这些按钮就给出提示

代码如下：

<html>
   <head>
      <title>Vue3 计算器</title>
      <script src="https://unpkg.com/vue@next"></script>
   </head>
   <body>
      <div id = "app" style = "text-align:center;">
          <h1>计算结果：{{numCount}}</h1>
          <div>
             第一个数字：<input type="number" v-model="form.num1"/>
          </div>
          <div style="margin:10px">
             第二个数字：<input type="number" v-model="form.num2"/>
          </div>
          <div>
              <button @click="MCK('加')">加</button>
              <button @click="MCK('减')">减</button>
              <button @click="MCK('乘')">乘</button>
              <button @click="MCK('除')">除</button>
              <button @click="MCK('清空')">清空</button>
          </div>
      </div>
      <script type = "text/javascript">
          const { createApp, reactive, toRefs } = Vue
          const state = reactive({
            numCount:0,
              form:{
                num1:'',
                num2:'',
            }
          })
          const MCK = (val) => {
              if(state.form.num1 && state.form.num2){
                  switch(val){
                      case '加':
                          state.numCount = parseInt(state.form.num1) + parseInt(state.form.num2)
                          break;
                      case '减':
                          state.numCount = parseInt(state.form.num1) - parseInt(state.form.num2)
                          break;
                      case '乘':
                          state.numCount = parseInt(state.form.num1) * parseInt(state.form.num2)
                          break;
                      case '除':
                          state.numCount = parseInt(state.form.num1)/ parseInt(state.form.num2)
                          break;
                      case '清空':
                          state.numCount = 0
                          state.form.num1 = ''
                          state.form.num2 = ''
                          break;
                  }
              }else{
                alert('请输入数字')  
              }
          }
          const app = {
            setup() {
                return {
                    ...toRefs(state),
                    MCK
                }
            }
        }   
        createApp(app).mount('#app')
      </script>
   </body>
</html>

2、日记本功能

日记本功能也很简单，首先你要在输入框v-model绑定一个字符串、然后每次输入后点击回车按钮做一些判断，判断改输入框绑定字符串是否为空，如果为空就提示输入、反之把该字符串push到数组中，如果你想删除其中某一项，在点击删除按钮时传入该项的索引然后在数组中删除指定位置元素

在这里插入图片描述

<html>
   <head>
      <title>Vue3 小目标日记本</title>
      <script src="https://unpkg.com/vue@next"></script>
   </head>
   <body>
      <div id = "app" style = "text-align:center;">
          <h1>小目标列表</h1>
          <ul v-for="(item,index) in addList" :key="index">
              <ol>
                  {{item}}
                  <a style="color:red;margin:15px;cursor:pointer" @click="delBtn(index)">删除</a>
              </ol>
          </ul>
          <input type="text" v-model="message" @keyup.enter="add" placeholder="输入小目标后，按回车确认"/>
          <h2>共有{{addList.length}}个小目标</h2>
      </div>
      <script type = "text/javascript">
          const { createApp, ref, reactive,toRefs } = Vue
          const message = ref('')
          const state = reactive({
              addList:[]
          })
          const add = () => {
              if(message.value){
                  state.addList.push(message.value)
                  message.value = ''
              }else{
                  alert('没有输入小目标')
              }
          }
          const delBtn = (index) => {
            state.addList.splice(index,1)  
          }
          const app = {
            setup() {
                return {
                    message,
                    ...toRefs(state),
                    add,
                    delBtn
                }
            }
        }   
        createApp(app).mount('#app')
      </script>
   </body>
</html>

3、增删查改

增删查改功能就不用说了，看一下就行，数据都是写死的

在这里插入图片描述


<html>
   <head>
      <title>学生增删查改</title>
      <script src="https://unpkg.com/vue@next"></script>
   </head>
   <body>
      <div id = "app" style = "text-align:center;">
          <button @click="detailBtn('add')" v-if="hidden">添加</button>
          <table align="center" border cellpadding="10" cellspacing="0" v-if="hidden">
              <tr>
                  <th>ID</th>
                  <th>姓名</th>
                  <th>年龄</th>
                  <th>性别</th>
                  <th>操作</th>
              </tr>
              <tr v-for="(item,index) in list" :key="index">
                  <td>{{item.id}}</td>
                  <td>{{item.name}}</td>
                  <td>{{item.age}}</td>
                  <td>{{item.sex == 0 ? '男' : '女'}}</td>
                  <td>
                    <button @click="detailBtn(item)">修改</button>&nbsp
                    <button @click="delBtn(index)">删除</button>
                </td>
              </tr>
          </table>
          <div style="border:1px solid #CCC;margin:70px" v-if="!hidden">
              <div>
                  姓名：<input type="text" v-model="form.name"/>
              </div>
              <div>
                    年龄：<input type="number" v-model="form.age"/>
              </div>
              <div>
                  性别：<select v-model="form.sex">
                          <option value = "0">男</option>
                          <option value = "1">女</option>
                         </select>
              </div>
              <div>
                  <button @click="updateBtn">确定</button>&nbsp
                  <button @click="hidden = true">取消</button>
              </div>
          </div>
      </div>
      <script type = "text/javascript">
          const { createApp, reactive, toRefs } = Vue
          const state = reactive({
            hidden:true,
              list:[
                {id:1,name:'张三',age:18,sex:0},
                {id:2,name:'李四',age:23,sex:0},
                {id:3,name:'王五',age:25,sex:1},
            ],
            form:{},
            id:3
          })
          const delBtn = (index) => {
            state.list.splice(index,1)
          }
          const detailBtn = (item) => {
            state.hidden = false
            if(item != 'add'){
                state.form.name  = item.name
                state.form.age  = item.age
                state.form.sex  = item.sex
                state.form.id  = item.id
                state.form.addIsUpdate = 'update'
            }else{
                state.form = {}
            }
          }
          const updateBtn = () => {
              if(state.form.name != '' && state.form.age > 0 && state.form.sex != 2){
                  if(state.form.addIsUpdate == 'update'){
                      state.list.forEach((item,index) => {
                        if(state.form.id == item.id){
                            item.name = state.form.name
                            item.age = state.form.age
                            item.sex = state.form.sex
                            state.hidden = true
                        }
                      })
                  }else{
                      state.form.id =  ++state.id
                      state.list.push(state.form)
                      state.hidden = true
                  }
                  state.form = {}
              }else{
                  alert('请正确输入！')  
              }
          }
          const app = {
            setup() {
                return {
                   ...toRefs(state),
                    delBtn,
                    detailBtn,
                    updateBtn
                }
            }
        }   
        createApp(app).mount('#app')
      </script>
   </body>
</html>