首页 > 其他分享 >Vue 3.0的使用

Vue 3.0的使用

时间：2023-04-19 13:22:06浏览次数：50  
标签：game1 Vue name setup reactive game2 3.0 使用 属性

目录

创建项目

vue_cli创建项目

vue_cli的安装见：https://www.cnblogs.com/smyz/p/17309086.html
使用vue_cli创建项目与创建vue2.0项目步骤相同

# 1. 进入到相关目录
# 2. 使用下面的命令进行创建
vue create 项目名称

vite创建项目

官网：http://www.vitejs.net/
npm工具的安装见：https://www.cnblogs.com/smyz/p/17309086.html

  1. 安装vite
# 1. 使用npm安装
npm init vue@latest  # 如果安装了cnpm也可以使用  cnpm init vue@latest 会更快
  1. 安装vuex

vuex分3.x版本和4.x版本，分别对应vue2.0与3.0，也就是,vue2.0只能安装vuex3.x版本，而vue3.0才能装vuex4.x版本。
vuex4.x版本安装官网：https://vuex.vuejs.org/zh/installation.html

# 使用-S参数，仅安装在此项目中
npm install vuex@next -S
# 在src目录中创建index.js，并添加如下内容：
import { createApp } from 'vue'
import { createStore } from 'vuex'
import App from "../App.vue";

// 创建一个新的 store 实例
const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

const app = createApp({App})

// 将 store 实例作为插件安装
app.use(store)

export default store

# 3. 在src/main.js中注册
import store from './store'
app.use(router, store)
  1. 启动项目
npm run dev

常用API

setup()

  1. 在新的vue3项目中，不再推荐使用vue2.x配置方法。
  2. setup为Vue3.0中一个新的配置项，值为一个函数.
  3. setup是所有Composition API（组合API）编写的位置(组件中所用到的：数据、方法等等，均要配置在setup中)
  4. setup函数的返回值：返回一个对象，对象中的属性、方法, 在模板中均可以直接使用
  5. 注意：
    • 尽量不要与vue2.x配置的方法混用。
      • vue2.x中的配置(data,methods等)可以访问到setup中定义的属性和方法
      • vue3.x中setup定义的属性方法无法访问vue2.x中的配置

基本使用示例

<template>
  <div class="home">
    <p>姓名:{{ username }}</p>
    <p>年龄:{{ age }}</p>
    <button @click="btnFunc">点我年龄加1</button>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  // 所有的内容都定义在setup函数中
  setup() {
    // 这种写法只能将内容放到页面中，但是并没有做双向数据绑定。也就是说，数据变了，页面中的内容不会发生变化
    let username = 'Jack'
    let age = 10
    let btnFunc = () => {
      age = age + 1
      console.log(age)
    }
    // 定义的所有变量、函数都需要在return中返回
    return {username, age, btnFunc}
  }
}
</script>
  • 根据下图可以看到，点击按钮后，值发生了改变，但页面却未发生变化。

ref与reactive

  • ref函数主要用于“字符串、数字”的双向数据绑定，但ref也可以用于“对象、数组”的双向数据绑定，但写起来会麻烦点
  • reactive函数主要用于“对象、数组”的双向数据绑定
  • 在使用前需要先导入，注意不要把import命令写到export中，会报错

ref与reactive

toRef与toRefs

  • 作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。
  • 语法：const name = toRef(person,'name')
  • 应用: 要将响应式对象中的某个属性单独提供给外部使用时。
  • 扩展：toRefs 与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)
<template>
  <div class="home">
    <p>name: {{ name }}</p>
    <p>age: {{ age }}</p>
    <p>name2: {{name2}}</p>
    <p>age2: {{age2}}</p>
  </div>
</template>

<script>
// 导入ref和reactive方法，目的是作双向数据绑定
// ref函数主要用于“字符串、数字”的双向数据绑定
// reactive函数主要用于“对象、数组”的双向数据绑定
// toRefs为解构赋值
import {ref, reactive, toRefs} from 'vue'  // import命令注意不要写到export中

export default {
  name: 'HomeView',
  setup() {
    let person = reactive({
      name: 'JACK',
      age: 19
    })
    let person2 = reactive({
      name2: 'rose',
      age2: 18
    })
    // 使用toRefs后，页面中调用时直接使用{{key}}即可，不需要{{person.name}}这种了
    // 多个键不能冲突
    return {...toRefs(person), ...toRefs(person2)}
  }
}
</script>

计算属性computed

  • 计算属性在vue2.x中是写到computed中
  • 计算属性定义：https://www.cnblogs.com/smyz/p/17308948.html
  • 监听属性在vue2.x中是写到watch中
  • 在vue3.x中需要使用import导入computed方法【 import {computed} from 'vue' 】

示例

<template>
  <div class="home">
    <p>游戏1：{{ game1.name }}，价格:{{ game1.price }}日元 购买数量：<input type="text" v-model="game1.num"></p>
    <p>游戏2：{{ game2.name }}，价格:{{ game2.price }}日元 购买数量：<input type="text" v-model="game2.num"></p>
    <p>总价格：{{ totalPrice }}日元</p>
  </div>
</template>

<script>
// 导入要使用的方法
import {reactive, computed, watch} from 'vue'

export default {
  name: 'HomeView',
  // 所有的内容都定义在setup函数中
  setup() {
    // 定义两个示例变量
    let game1 = reactive({name: '赛尔达传说:王国之泪', price: 7950, num: 0})
    let game2 = reactive({name: '皮克敏4', price: 6500, num: 0})
    // 定义计算属性，当值发生改变时，计算属性函数会自动执行，并将最终的值返回给变量，页面中只需要把值当面一个变量使用即可
    let totalPrice = computed(() => {
          return game1.price*game1.num + game2.price*game2.num
        }
    )
    // 最后不要忘记返回定义的各个变量
    return {game1, game2, totalPrice}
  }
}
</script>
  • 效果如下图

监听属性watch

  • 监听属性之前的博客：https://www.cnblogs.com/smyz/p/17309054.html
  • 监听属性就是监视一个属性，当被监听属性发生改变时，就会触发此监听属性的执行。说白了就是相当于oracle的触发器
  • 监听属性可以获取到改前的值和改后的值
  • 要使用监听属性需要导入相关函数 这【 import {watch} from 'vue' 】

示例

<template>
  <div class="home">
    <p>游戏1：{{ game1.name }}，价格:{{ game1.price }}日元 购买数量：<input type="text" v-model="game1.num"></p>
    <p>游戏2：{{ game2.name }}，价格:{{ game2.price }}日元 购买数量：<input type="text" v-model="game2.num"></p>
  </div>
</template>

<script>
// 导入要使用的方法
import {reactive, watch} from 'vue'

export default {
  name: 'HomeView',
  // 所有的内容都定义在setup函数中
  setup() {
    // 定义两个示例变量
    let game1 = reactive({name: '赛尔达传说:王国之泪', price: 7950, num: 0})
    let game2 = reactive({name: '皮克敏4', price: 6500, num: 0})
    // 定义计算属性，当值发生改变时，计算属性函数会自动执行，并将最终的值返回给变量，页面中只需要把值当面一个变量使用即可
    watch(game1,(newNum, oldNum) => {
      console.log('《赛尔达传说:王国之泪》的数量变为：',game1.num)
      console.log('我是改后的值', newNum)
      console.log('我是改前的值', oldNum)
    })
    watch(game2,(newNum, oldNum)=>{
      console.log('《皮克敏4》的数量变为：',game2.num)
      console.log('我是改后的值', newNum)
      console.log('我是改前的值', oldNum)
    })
    // 最后不要忘记返回定义的各个变量
    return {game1, game2}
  }
}
</script>
  • 可以看到，修改的值以后，触发了watch中的执行，但如果修改的值与原值相同，相当于未发生改变，就不会触发watch属性的执行。

监听属性watchEffect

  • watchEffect 不需要指定监听的属性，他会自动进行依赖收集，只要我们回调中使用了响应式的属性，那么这些属性在变更之后这个回调都会执行，不像 watch 只能监听指定的属性。
  • 在初始化页面的时候会先执行一次

示例

<template>
  <div class="home">
    <br>
    <br>
    <br>
    <br>
    <p>游戏1：{{ game1.name }}，价格:{{ game1.price }}日元 购买数量：<input type="text" v-model="game1.num"></p>
    <p>游戏2：{{ game2.name }}，价格:{{ game2.price }}日元 购买数量：<input type="text" v-model="game2.num"></p>
  </div>
</template>

<script>
// 导入要使用的方法
import {reactive, watch, watchEffect} from 'vue'

export default {
  name: 'HomeView',
  // 所有的内容都定义在setup函数中
  setup() {
    // 定义两个示例变量
    let game1 = reactive({name: '赛尔达传说:王国之泪', price: 7950, num: 0})
    let game2 = reactive({name: '皮克敏4', price: 6500, num: 0})

    // 不需要指定监听属性，只要在函数中调用了一个属性，那么这个属性发生改变就会被触发
    watchEffect(
        // 可以看到并未指定监听哪个属性
        ()=>{
          // 只是在函数体内调用了一下
          console.log('测试watchEffect的变化，game1.num改变了：', game1.num)
        }
    )
    return {game1, game2}
  }
}
</script>
  • 如下图：当刷新页面时会先执行一下watchEffect中定义的内容。
  • 当值未发生变化不会触发
  • 当值发生变化就会触发

新的生命周期钩子函数

  • Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：
    • beforeDestroy改名为 beforeUnmount
    • destroyed改名为 unmounted
  • Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
    • beforeCreate     ===>       setup()
    • created              ===>       setup()
    • beforeMount     ===>       onBeforeMount
    • mounted            ===>       onMounted
    • beforeUpdate     ===>       onBeforeUpdate
    • updated              ===>       onUpdated
    • beforeUnmount ===>       onBeforeUnmount
    • unmounted        ===>       onUnmounted

使用vite创建的项目

  • 使用vite创建的项目，在script标签中有一个属性为 setup，当有了这个属性后，就不再需要写setup函数，上面所有的内容都可以直接写到script中，直接使用即可。也不需要再return出去

标签：game1,Vue,name,setup,reactive,game2,3.0,使用,属性
From： https://www.cnblogs.com/smyz/p/17329864.html

相关文章

  • vue3微信公众号商城项目实战系列（8）商品展示页面
    本篇实现在首页展示商品功能，表结构如下：表名字段功能goodsgoods_id(int)商品编号goods_name(varchar)商品名称photo(varchar)商品图片price(decimal)价格商品表页面呈现效果如下： 第1步：在api.js中加入获取首页商品信息和加购物车的接口方法，如下......
  • 在MacOS下使用Unity3D开发游戏
    第一次发博客，先发一下我的游戏开发环境吧。去年2月份买了一台MacBookPro2021M1pro(以下简称mbp)，这一年来一直在用mbp开发游戏。我大致分享一下我的开发工具以及使用体验。1、Unity官网链接：https://unity.cn/releases我一般使用的Applesilicon版本的，支持M1芯片,无需转译。Un......
  • 设计模式-模板模式在Java中的使用示例-悍马模型制造示例
    场景设计模式-模板模式在Java中的使用示例：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/130230732上面整理了模板模式的使用示例，为加强理解特记录另一个使用示例，以下示例摘自设计模式之禅第二版。模板方法模式定义一个操作中的算法的框架，而将一些步骤延迟到......
  • APISIX Ingress 如何使用 Cert Manager 管理证书
    ApacheAPISIXIngressController是一款以ApacheAPISIX作为数据面的KubernetesIngressController开源工具，目前已经更新到v1.3版本，实现了如证书管理、负载均衡、金丝雀发布等功能。长久以来，证书管理都不是一件简单的事情，虽然ApacheAPISIXIngressController支持从......
  • lammps的rerun命令使用——通过读取已跑完的轨迹文件，补充新的或者漏算的计算（rdf、msd
    一、参考资料：1. lammps已跑完，不想重跑，如何补充新的计算 （来自小马老师，https://mp.weixin.qq.com/s/pDWaxcdq75hmMOdbG9hSNQ ）2.lammps通过rerun进行rdf分析，来自： https://zhuanlan.zhihu.com/p/524055663 二、自己的算例当lammps计算完后，我们发现遇到如下问题时：（1）有些性质......
  • Vue进阶（六十二）：理解$nextTick()
    一、实例介绍有一个div，默认用了v-if隐藏，点击按钮之后，改变v-if的值让他显示出来，并且取到div中的值:<divid=app><divid="div"v-if="showDiv">我是显示文本</div><button@click="showAndGetText">获取内容</button></div><script>va......
  • errno 的使用
    经常在调用linux系统api的时候会出现一些错误，比方说使用open()、write()creat()之类的函数有些时候会返回-1，也就是调用失败。这个时候使用errno这个全局变量就相当有用了。例如：#include<stdio.h>#include<string.h>#include<errno.h>intmain(void){intfd;......
  • vue+ant中input输入框校验，不符合条件的输入无效
    1.只能输入数字/小数点/负号2.只能有一个负号，只能有一个小数点3.第一位不能直接输入小数点，输入负号后不能直接跟随小数点4.第一位输入为0时或-0时，只能跟随小数点，不能跟随数字例如01095.小数点后只能输入两位数字，不可输入其他，并且最后一位不能为0 6.因为是实时校验......
  • 塔猫之ChatPPT 国内一个AI自动生成PPT效率工具【使用后一点想法】
    我有个同事为了肝PPT熬夜到天明，结果第二天就生病了，抵抗力一落千丈啊！ 做PPT可真是够折磨人的。我有个同事为了肝PPT熬夜到天明，结果第二天就生病了，抵抗力一落千丈啊！这种情况也真的很常见，毕竟制作一个好的演示文稿需要大量思考、设计、排版和修图等等工序，全程手动操作不仅费时费......
  • sql server的cube操作符使用详解[转]
    sqlserver的cube操作符使用详解cube操作符  要使用cube，首先要了解groupby  其实cube和rollup区别不太大，只是在基于groupby子句创建和汇总分组的可能的组合上有一定差别，  cube将返回的更多的可能组合。如果在groupby子句中有n个列或者是有n个表达式的话，  sqlserv......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99