极品vue3,你必须学会的东西

Posted 2021-07-09 秃头萌新_Ma

// 程序的主入口文件,ts文件,是main.ts
// 引入createApp函数,创建对应的应用,产生应用的实列对象
import { createApp } from 'vue'
// 引入App组件(所有组件的父级组件)
import App from './App.vue'
// 创建App应用返回对应的实列对象,调用mount方法进行挂载
createApp(App).mount('#app')

<template>
<!-- vue2中html模板中必须要有一对跟标签,vue3组件的html模板中可以没有跟标签 -->
  <img alt="Vue logo" src="./assets/logo.png">
  <!-- 使用这个子组件 -->
  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</template>

<script lang="ts">
// 这里可以使用ts代码

// defineComponent函数，目的是定义一个组件，内部可以传入一个配置对象
import { defineComponent } from 'vue';

// 引入一个子组件
import HelloWorld from './components/HelloWorld.vue';
// 暴露出去一个定义好的组件
export default defineComponent({
  // 当前组件的名字是App
  name: 'App',
  // 注册组件
  components: {
    // 注册一个子级组件
    HelloWorld
  }
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

vue3 ref
作用: 定义一个数据的响应式
语法: const xxx = ref(initValue):
创建一个包含响应式数据的引用(reference)对象
js中操作数据: xxx.value
模板中操作数据: 不需要.value
一般用来定义一个基本类型的响应式数据

<template>
  <button @click="unclick">点击改变</button>
  <div>{{con}}</div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  name: 'App',
  components: {  },

  setup(){
    let con = ref(0)
    function unclick(){
      con.value++
    }
    return{
      con,
      unclick
    }
  }
});
</script>

<style>

</style>