Vue3基础指令

1.在vscode终端新建项目

1）npm init vue@lastest

2）使用cnpm install代替npm install以求更快的速度（出现cnpm错误使用npm install -g cnpm下       载，在管理员终端中使用Set-ExecutionPolicy Unrestricted解锁执行策略）

3）npm run dev启动项目

2.几种常用的v-方法

指令	描述
v-bind	用于将 Vue 实例的数据绑定到 HTML 元素的属性上。
v-if	用于根据表达式的值来条件性地渲染元素或组件。
v-show	v-show 是 Vue.js 提供的一种指令，用于根据表达式的值来条件性地显示或隐藏元素。
v-for	用于根据数组或对象的属性值来循环渲染元素或组件。
v-on	用于在 HTML 元素上绑定事件监听器，使其能够触发 Vue 实例中的方法或函数。
v-model	用于在表单控件和 Vue 实例的数据之间创建双向数据绑定

3.操作数据发生变化

UI随之改变：push()  pop()  shift()  unshift()  splice()  reverse()

UI不会改变：fiter()  concat()  slice()

4.计算属性缓存(computed，调用不加括号)和方法/函数(methods，调用加括号)区别

计算属性：计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重 新计算。

方法：方法调用总是会在重渲染发生时再次执行函数

5.组件之间传递数据的方案

1）父传子：props   数据在父中定义，子通过props接收

//父中定义
<template>
    <h3>ComponetA</h3>
   <ComponetB :title="title" :age="age" :names="names"/>
</template>


<script>
import ComponetB from "./ComponetB.vue"

export default{
    data(){
        return{
            title:20,
            age:10,
            names:["iwen","ime"]
        }
    },
    components:{
        ComponetB
    }
}


</script>


//子中抓取，指定类型抓取
<template>
<h3>ComponetB</h3>
<h3>{{ title }}</h3>
<h3>{{ age }}</h3>
<p v-for="(item, index) of names" :key="index">{{ item }}</p>
</template>

<script>
export default{
    data(){
        return{

        }
    },
    props:{
        // 必选项，必须传递参数
        title:{
            type:Number,
            required:true
        },
        age:{
            type:Number,
            default:20
        },
        // 数字和字符串可以直接default，但是如果是数组和对象，必须通过工厂函数返回默认值
        names:{
            type:Array,
            default(){
                return ["流程"]
            }
        }

    }
}
</script>


//父中定义
<template>
    <h3>Parent</h3>
    <Child :title="message" demo="测试" :age="age" v-bind:names="name" :userinfo="userinfo"/>
</template>



<script>
import Child from './Child.vue';

export default {
    data(){
        return{
            message:"Parentweaske数据",
            age:20,
            name:["iwen","wewe","dwdsd"],
            userinfo:{
                name:"流畅",
                age:25,
            }
        }
    },
    components:{
        Child
    }
}
</script>

//子中继承
<template>
    <h3>Child</h3>
    {{ title }}
    {{ demo }}
  {{ age }}

  <ul>
    <li v-for="(item,index) of names" :key="index">{{ item }}</li>
  </ul>
  <p> {{ userinfo.name }}</p>
  <p> {{ userinfo.age }}</p>
</template>

<script>
export default {
    data(){
        return{
            
        }
    },
    props:["title","demo","age","names","userinfo"]
}
</script>

2）子传父：自定义事件(this.$emit)

//父级元素
<template>
    <h3>组件事件</h3>
    <Child @someEvent="getData"/>
    <p>父元素{{ message }}</p>
</template>

<script>
import Child from './Child.vue';

export default{
    data(){
        return{
            message:"",
        }
    },
    components:{
        Child
    },
    methods:{
        getData(data){
            this.message = data
        },
    }
}

</script>

//子级元素
<template>
    <h3>Child</h3>
    <button @click="clickEventHandle">传递数据</button>
</template>

<script>
export default{
    data(){
        return{
            msg:"数据"
        }
    },
    methods:{
        clickEventHandle(){
            // 自定义事件
            this.$emit("someEvent",this.msg)
        }
    }
}
</script>