vue3.0-基本特性和用法

>> 欢迎您客人: 登录 | 注册 | 在线 | 搜索 | 风格 | 帮助 | 统计 | 文章

返回首页

>>分享Web前端开发技术，并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持

书籍支持

卫琴直播

品书摘要

在线测试

资源下载

联系我们

Java技术网站 → 『 Java开发技术』 → 『 Web前端开发技术专题』 → vue3.0-基本特性和用法

您是本文章第 20662 个阅读者

* 贴子主题: vue3.0-基本特性和用法

点赞(0) 收藏

作者:mary 发表时间：2021-09-05 01:51:10

消息

查看

搜索

好友

邮件

复制

引用

1.路由配置

vue3.0使用createRouter来创建Vue Router实例

之前用构造函数的方式

createRouter, createWebHashHistory
const router = createRouter({
  history: createWebHashHistory(),
  [
{
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
  ]
})
export default router

2.初始化状态

vue3.0通过setup方法初始化状态

调用ref()方法返回一个响应式的对象

在setup中对ref返回的数值进行操作时，需要通过.value来获取

// value1只有一个value属性
setup() {
    let value1 = ref('disk')
    let ienter = () => {
      console.log(value.value);
    }
    let addValue1 = () => {
      value1.value ++
    }
    return {
      value, ienter,addValue1
    }
  }

3.计算属性computed方法和监听器watch方法

watch方法包含两个参数，两个参数都是function

import { ref, toRefs, computed, watch } from 'vue'

setup() {
    let value1 = ref('disk')
    let ienter = () => {
      console.log(value.value);
    }
    let addValue1 = () => {
      value1.value ++
    }
    let douValue1 = computed(() => value1.value * 2)
    watch(() => value1.value, val=>{
      console.log(val)
    })
    return {
      value, ienter,addValue1, douValue1
    }
  }

4.获取路由

vue3.0通过getCurrentInstance方法获取当前组件的实例

通过getCurrentInstance方法的ctx属性获得当前上下文

通过计算computed获取store.state.name的值

import { ref, toRefs, computed, watch, getCurrentInstance } from 'vue'

setup() {
    let value1 = ref('disk')
    let ienter = () => {
      console.log(value.value);
    }
    let addValue1 = () => {
      value1.value ++
    }
    let douValue1 = computed(() => value1.value * 2)
    watch(() => value1.value, val=>{
      console.log(val)
    })
    const { ctx } = getCurrentInstance()
    // 当前路由信息
    // ctx.$router.currentRoute.value

    return {
      value, ienter,addValue1, douValue1
    }
  }

5. Vuex使用

import Vuex from 'vuex'
export default Vuex.createStore({
  state: {
    name: 'licky'
  },
  mutations: {
    setName(state, payload) {
      state.test.a = payload
    }
  },
  actions: {
  },
  modules: {
  }
})

setup() {
    let value1 = ref('disk')
    let ienter = () => {
      console.log(value.value);
    }
    let addValue1 = () => {
      value1.value ++
    }
    let douValue1 = computed(() => value1.value * 2)
    watch(() => value1.value, val=>{
      console.log(val)
    })
    const { ctx } = getCurrentInstance()
    // 当前路由信息
    // ctx.$router.currentRoute.value

    let name = computed(() => ctx.$store.state.name)

    let editName = () => {
      ctx.$store.commit('setName', 'new Name zzz')
    }

    return {
      value, ienter,addValue1, douValue1, name, editName
    }
  }

----------------------------
原文链接:https://www.jianshu.com/p/fdffd1d2a12a

程序猿的技术大观园：www.javathinker.net

[这个贴子最后由 flybird 在 2021-09-11 10:29:03 重新编辑]

Java精品书籍推荐