vue3.0的简单入手学习

vite创建vue3.0

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

---

VSCode安装vue3插件：Volar

---

组件引入

只要在<script setup> 标签里面引入组件，只要不用注册就可以使用

<template>
	<HelloWorld />
</template>
<script setup>
	import HelloWorld from './componets/HelloWorld.vue'
</script>

---

数据绑定

1.静态数据展示，只要写在<script setup> 标签里面的数据和方法不用导出在view就可以使用，但他不是响应式数据

<template>
	<h1>{{msg}}</h1>
	<h1>{{revseMsg(msg)}}</h1>
</template>
<script setup>
	const msg = '你好啊！'
  function revseMsg(value) {
    return value.split('').reverse().join('')
  }
</script>

2.响应式数据 ref

需要修改其响应式对象的value属性，但不用在view上写.value

<script setup>
  import { ref } from 'vue'
	let msg = ref('你好啊！') // 创建响应式对象
  
  function setMsg() {
    msg.value = '我是某某某'
  }
</script>

3.响应式数据 reactive （推荐使用这种）

<script setup>
  import { reactive } from 'vue'
	let teacher = reactive({
    name: '老王',
    age: 12
  })
  
  function setTeacherName() {
    teacher.name = '老李'
  }
</script>

---

计算属性 computed

<script setup>
  import { ref, computed } from 'vue'
  let msg = ref('你好啊！')
	const reMsg = computed(function() {
    return msg.value.split('').reverse().join('')
  })
</script>

computed 的 get 和 set（修改computed值）

<script setup>
  import { ref, computed } from 'vue'
  let msg = ref('老李')
	const reMsg = computed({
    get: () => {
      return msg.value.split('').reverse().join('')
    },
    set: (value) => {
      msg.value = msg.value.split('').reverse().join('')
    }
  })
  
  function setReMsg() {
    this.reMsg = '老王'
  }
</script>

---

数据监听 watch

<script setup>
  import { ref, reactive, watch } from 'vue'
  let msg = ref('你好啊！')
  let user = reactive({
    name: '老王',
    age: 12
  })
  
	
  watch(msg, (newValue,oldValue) => {
    console.log(newValue)
    console.log(oldValue)
  })
  
  watch(() => user.name , (newValue,oldValue) => {
    console.log(newValue)
    console.log(oldValue)
  })
  
  //同时监听以上两种数据的写法
  watch([msg, () => user.name] , (newValue,oldValue) => {
    console.log(newValue)
    console.log(oldValue)
  })
  
</script>

---

父子传值

props（父传给子）

<script setup>
  import { defineProps } from 'vue'
  const props = defineProps({
    num: Number,
    title: String,
    article: Object
  })
</script>

自定义事件 defineEmits（子传给父）

子要修改父元素数据，不能直接修改，要通知父元素，让父元素进行修改

子组件

<script setup>
  import { defineEmits } from 'vue'
  const emit = defineEmits(['finshRead', 'reading']) //定义多个自定义事件
  
  function sendData() {
    emit('finshRead', '传送字符串数据') // 触发自定义事件
  }
</script>

父组件

<template>
	<-- 监听finshRead事件 </-->
	<ListItem @finshRead="changeTitle($event)"></ListItem>
</template>
<script setup>
  import { ref } from 'vue'
  const title = ref('这是标题！')
  function changeTitle($event) {
    //title.value = '修改标题'
    title.value = '$event'
  }
</script>

---

路由 useRoute, useRouter

import { useRoute, useRouter } from 'vue-router'
// 获取路由信息
let route = useRoute()

// 执行路由跳转
let router = useRouter()
function goAbout() {
  router.push('/about')
}

---

状态管理 vuex

安装最新版本

npm install vuex@next --save

Store/index.js

import { createStore } from 'vuex'
// 创建一个新的 store 实例
const store = createStore({
  state() {
    return {
      count: 0
    }
  },
  // 计算属性
  getters: {
    totalPrice(state) {
      return state.count * 98
    }
  },
  // 同步
  mutations: {
    increment(state, payload) {
      state.count += payload
    }
  },
  // 异步
  actions: {
    asyncAdd(store, payload) {
      setTimeout(() => {
        store.commit('increment', payload)
      }, 1000)
    }
  }
})

import default store

main.js

import store form './store/index.js'
// 全局使用
app.use(store)

使用的地方（同步：commit，异步：dispatch）

<script setup>
  import { useStore } from 'vuex'
  let store = useStore()
  function addProd() {
    store.commit('increment', 2) // 触发同步修改state
  }
  function asyncAddProd() {
    store.dispatch('asyncAdd'， 5) // 异步触发 mutations 修改state
  }
  
  // 计算属性
  console.log(store.getters.totalPrice)
</script>

---

UI 框架 Ant Design Vue

import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';

const app = createApp(App);

app.use(Antd).mount('#app');

---