vue3基础使用

vue3的创建

 npm init vite vue3demo02

使用vue3合成api进行基础赋值和事件操作，使页面更简洁，维护更方便

<template>

  <div>

    <h1 @click="changeMsg">计数：{{msg}}</h1>

    <h1>名字{{name}}</h1>

    <h1 @click="changeAge">年龄 {{age}}</h1>

    <h1>转换以后：{{reversrAge}}</h1>

  </div>

</template>

<script>

// ref定义单个数值使用，

// reactive定义对象使用

// toRefs抛出对象使用

// computed计算属性

// watchEffect捕捉监听属性  watch 使用属性监听

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

export default {

    setup(){

      // 不需要定义声明使用

      const msg = ref(0)

      // 定义方法

      function changeMsg(){

        msg.value +=10

       }

      //  定义对象

      const user = reactive({

        name:'张三',

        age:'18',

        // 使用计算属性，反正字符串

        reversrAge:computed (() =>{

           return user.age.split('').reverse().join('')

        })

      })

      // 定义方法

      function changeAge(){

        user.name = '20'

      }

      // 捕捉监听

      watchEffect(() =>{

        console.log(user.age);

        console.log('监听属性，自动捕捉监听的属性，有改变就触发');

      })

      // 使用属性监听

      watch([msg,user],(newMsg,prevMsg) =>{

        console.log('最新的值',newMsg,'修改以后的',prevMsg);

        console.log('属性监听的使用');

      })

      // 返回值   ...toRefs把对象转换成可以直接使用名字，也可以不转抛出对象，使用时user.age

      return {msg,changeMsg,...toRefs(user),changeAge}

    }

};

</script>

传参可以使用vue2的传参方式，在标签上传参（不知道为什么传对象穿不过去，只可以传过去单个参数），如

声明参数，返回值

  setup() {

    // 不需要定义声明使用

    const name = ref(

      '张三'

    );

    const age = ref(

      18

    ); 

    return { name,age };

  },

标签里传参

 <User :names="name"  :ages="age" class="aaa"  />

子组件接收

使用props接收使用时正常使用

  props: ["names",'ages'],

    <h1>传过来的参数：{{names  }}{{ages}}</h1>

    <h1>传过来的参数：{{data}}</h1>

如需要操作传过来的参数，则需要在setup（props,content） // content父元素的所有属性如calss名

操作传过来的参数则不是this。而是props

 const data = ref(props.names +'今年'+props.ages)

使用provide注入式传参

引入

import { ref, reactive, provide } from "vue";

  setup() {   

    // 创建一个对象

    const obj = reactive({

      name:'provide传参',

      age:'第一次传'

    })

    // provide传参方式

    provide('obj',obj)

  },

使用页面

  <h1>  provide传参方式</h1>

  <h1>{{name}}</h1>

  <h1>{{age}}</h1>

引入

import { inject,toRefs } from "vue";

  setup() {

// 传过来的参数注入方法什么页面使用什么页面引入inject使用就可以了

    const data = inject('obj')

    return {...toRefs(data) };

  },

使用less语法,安装less。嵌套样式

npm i less -D

全局注册组件，局部注册组件，在局部引入

1，新建组件在components


2.main.js

const app = createApp(App)
// 1,引入
import HelloWorldone from './components/HelloWorldone.vue'


// 2，调用
app.component('HelloWorldone',HelloWorldone)


3.使用页面使用标签形式


局部注册组件使用

components:{
'HelloWorldone':HelloWorldone,
}
以标签形式使用

组件样式冲突问题可以通过scoped解决

 <style lang="less" scoped>
   .box{
     h1{
       color: blue;
     }
   }
   </style>
scoped代表单页面