Vue学习笔记（三）

最新推荐文章于 2024-11-06 09:59:41 发布

xingxindrst

最新推荐文章于 2024-11-06 09:59:41 发布

阅读量49

点赞数 1

文章标签： vue.js 学习笔记

本文链接：https://blog.csdn.net/xingxindrst/article/details/132392741

版权

组件（Vue2）

.vue文件就是一个组件，每个.vue文件就是每个页面

html的时候，每个页面都是一个html文件、

App.vue是根组件

components:常用的组件，公共的组件

views:用来存放页面的（单独一个）

父子传值:

1.父组件向子组件传值：props

（1）父组件定义变量：msg="message"并赋值

(2)子组件 props接收值

2.子组件向父组件传值：emit （自定义事件）

（1）自定义事件进行触发

（2）找到$emit事件传递两个参数

App.vue：

<template>
  <div class="">这是App.vue组件
    <children  :msg="message" @hhhh="recieve"></children>
   </div>
</template>

<script>
import children from './components/children.vue';  //还可以用@/components/children.vue@是路径的别名
export default {
  name: 'App',
  data(){
    return{
      message:"这是App.vue父组件的值"
    }
  },
  components:{
    children
  },
  methods:{
   recieve(value){  //value为子组件传过来的值
    console.log(value);
   }
    
   },
   
  }
</script>
<style></style>

children.vue：

<template>
    <div class="">{{msg}}
        <br>
        <button @click="emit" >子组件向父组件进行传值</button>
    </div>
  </template>
  
  <script>
  export default {
    name: 'App',
    props: {
        msg:{          //v-bind绑定的那个名称 ：msg    有两个属性
            type:String,           //传过来的数据类型 
            default:'这是默认的值' //父组件没有传值过来默认的值 
        }
    },
    data(){
      return{
       
      }
    },
    methods:{
        emit(){
            //第一个参数是自定义事件名字，第二个参数是想传的值
            this.$emit('hhhh','子组件向父组件传的值'); 
        }
     },
     
    }
  </script>
  <style></style>

效果图：

组合式API（Vue3）

vue3创建项目指令：npm init vite@latest (Vue2 :vue create 项目名 )

vue3不需要写this

ref可以创建响应式的数据，ref里面可以是基本数据类型，可以是复杂数据类型（引用类型）

1.reactive:只能定义复杂数据类型

2.reactive不需要.value 直接引用对象的属性

reactive能做到的事情，ref都能做到

<template>
  <div>
    {{ msg.name }}
    <button @click="fn">Button_ref</button>
    <br>
    {{ msg1.name }}
    <button @click="fn1">Button_reactive</button>
  </div>
</template>
<script setup>//vue3的写法
//shallowRef可以监听到值的改变但是不能修改DOM（console可以变化，界面不会）
//triggerRef可以改变
import { ref,shallowRef,triggerRef,reactive,shallowReactive} from 'vue';
let msg = shallowRef({
  name: 'Sandy',
  age: 30
});
let msg1 = shallowReactive({
  name: 'Cheeks',
  age: 18,
  obj:{
    title:'Vue3'
  }
})
const fn=()=>{
  console.log(msg.value.name);
  msg.value.name = '这是改变了的值'
  triggerRef(msg)
}
const fn1=()=>{
  msg1.obj.title = '这是改变了的值'
}
</script>

<style></style>

箭头函数=>

箭头函数和普通函数的区别：

1.写法的不同

(1)箭头函数没有参数的话，（）不可以省略；只有一个参数的时候，（）可以省略

(2) 函数体只有一行的话，{}可以省略，return也可以省略

2.this指向的不同

(1)普通函数它的this指向它外层的第一个对象,箭头函数的this指向定义的时候，外层第一个普通函数的this

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <!-- <div id="app"></div> -->
    <script type="module">
      let obj={
        fn() {
        console.log(this);
      }
  }
      obj.fn()
      //箭头函数
     function fn1() {
      return ()=>{
        console.log(this); //this指向外层函数指向的，这里是指向window

      }
     }
     fn1()()
    </script>
  </body>
</html>