vue安装命令

使用cmd输入以下命令

npm install -g @vue/cli
# 验证是否安装成功
vue --version

创建一个项目

xxxxxxxxxx
#项目名称my-project不能出现大写但是可以用“-”进行连接
vue create my-project

创建项目

xxxxxxxxxx
vue create vue-demo

项目名称不要出现大写

npm运行项目

cd到项目里，然后使用

xxxxxxxxxx
npm run serve

文本插值

v-html

v-html是原始html

​x
<template>
  <h3>模板语法</h3>
  <p>直接赋值：{{msg}}</p>
  <p>数字运算：{{ number + 1 }}</p>
  <p>三目运算符：{{ok? "yes" : "no"}}</p>
  <p>调用函数：{{ message.split("").reverse().join("") }}</p>
  <!-- 注意花括号内不支持换行表达式，只支持单行表达式 -->
  <!-- <p>{{ if (ok) {return message} }}</p> -->
  <!-- 以上if就是本身需要换行的，即使不写else也是不支持的 -->
  <p>{{ rawHtml }}</p>
  <p v-html = "rawHtml"></p>
</template>

<script>
export default{
  data(){
    return{
      msg : "神奇的语法",
      hello : "hello world",
      number : 10,
      ok : true,
      message: "大家好",
      rawHtml: "<a href = 'https://www.xiaoyangtongzhi.cn'>软件编程学习Y</a>"
    }
  }
}
</script>

属性绑定

v-bind

xxxxxxxxxx
<template>
  <!-- 由于v-bind非常常用所以v-bind可以省略直接在前面加: -->
  <div v-bind:id="dynamicId" :class="dynamicClass" :title="dynamicTitle">测试</div>
  <button :disabled="isButtonDisabled">Button</button>
  <!-- 动态绑定多个值 -->
  <div v-bind="objectOfAttrs">测试</div>
</template>

<script>
export default{
  data(){
    return{
      dynamicClass:"appClass",
      dynamicId:"appid",
      dynamicTitle: undefined,//属性值为null/undefined值会被移除
      isButtonDisabled: true,
      objectOfAttrs: {//动态绑定多个值：一次性绑定多个属性
        class: "appClass",
        id: "appID",
      }
    }
  }
}
</script>

<style>

.appClass{
  color:red;
  font-size:30px;
}

</style>

条件渲染

v-if

xxxxxxxxxx
<template>
    <h3>条件渲染</h3>
    <!-- 如果flag为真则"你能看见我吗"显示，如果为假则下面"那你还是看看我吧"显示 -->
    <!-- 相当于if else语句 -->
    <div v-if="flag">你能看见我吗</div>
    <div v-else>那你还是看看我吧</div>
</template>

<script>
export default{
    data(){
        return{
            flag:false,
        }
    }
}
</script>

v-else-if

xxxxxxxxxx
<template>
    <h3>条件渲染</h3>    
    <!-- 下面相当于if else-if else语句 -->
    <div v-if="type ==='A'">A</div>
    <div v-else-if="type ==='B'">B</div>
    <div v-else-if="type ==='C'">C</div>
    <div v-else>Not A/B/C</div>
</template>

<script>
export default{
    data(){
        return{
            type:"D" //显示Not A/B/C
        }
    }
}
</script>

v-show

xxxxxxxxxx
<template>
    <h3>条件渲染</h3>
    <!-- flag为真则能看见，为假则看不见 -->
    <!-- v-show是基于CSS的display: none;实现的 -->
    <div v-show="flag">你能看见我吗</div>
</template>

<script>
export default{
    data(){
        return{
            flag:false,
        }
    }
}
</script>

列表渲染

v-for

作用和python的for i in list1一样

以下for xxx in xxx中的in可以替换成of效果一样

xxxxxxxxxx
<template>
    <h3>列表渲染</h3>
    <!-- index是索引的下标 -->
    <p v-for="(item,index) in names">{{ item }}-{{ index }}</p>
</template>

<script>
export default{
    data(){
        return{
            names:["小杨", "小李", "小琪"]
        }
    }
}
</script>

执行结果：

在网页源代码中生成三个便利的p标签

v-for解析json数据

xxxxxxxxxx
<template>
    <h3>列表渲染</h3>
    <!-- index是索引的下标 -->
    <div v-for="(item,index) in result">
        <p>{{ item.title }}-{{ index }}</p>
        <img v-bind="objectOfAttrs" :src="item.imgLink" :alt="item.id"></img>
    </div>
</template>

<script>
export default{
    data(){
        return{
            objectOfAttrs:{
                class: "imgClass",
                id: "imgID"
            },
            result:[//模拟json格式数据
                {
                    "id":1001,
                    "title":"西红柿鸡蛋打卤面",
                    "imgLink": "https://xiaoyangtongzhi.cn/link/food/img_food/xihongshijidandalumian.png"
                },
                {
                    "id":1002,
                    "title":"黄花菜木耳打卤面",
                    "imgLink": "https://xiaoyangtongzhi.cn/link/food/img_food/huanghuacaimuerdalumian.png"
                },
                {
                    "id":1003,
                    "title":"茄汁大虾",
                    "imgLink": "https://xiaoyangtongzhi.cn/link/food/img_food/qiezhidaxia.png"
                }
            ]
        }
    }
}
</script>

<style>
.imgClass{
    width:200px;
    height: 150px;
}
</style>

运行结果：

v-for便利对象的所有属性

遍历对象有三个值，value key index 顺序不能改

xxxxxxxxxx
<template>
    <h3>列表渲染</h3>
    <div>
        <!-- 使用v-for遍历对象,value是值,key是键名,index是下标 -->
        <p v-for="(value,key,index) in userInfo">{{ value }}-{{ key }}-{{ index }}</p>
    </div>
</template>

<script>
export default{
    data(){
        return{
            userInfo:{//对象
                name:"小杨",
                age:20,
                sex:"男"
            }
        }
    }
}
</script>

运行结果：

通过key管理状态

key

xxxxxxxxxx
<template>
    <h3>key属性添加到v-for中</h3>
    <p v-for="(item,index) in names" :key="index">{{ item }}</p>
</template>

<script>
export default {
    data(){
        return {
            names:["小杨","小李","小张"],
        }
    }
}
</script>

注：一般不会把index付给key，key应该是不会变动的，如果往names列表中间加了新数据，那么所有的index就变动了

因此key一般赋值给id类不会变且唯一的值，如下例子：

xxxxxxxxxx
<template>
    <h3>key属性添加到v-for中</h3>
    <div v-for="item in result" :key="item.id">
        <p>{{ item.title }}</p>
        <img v-bind="objectOfAttrs" :src="item.imgLink" :alt="item.id" />
    </div>
</template>

<script>
export default {
    data(){
        return {
            objectOfAttrs:{
                class: "imgClass",
                id: "imgID"
            },
            result:[//模拟json格式数据
                {
                    "id":1001,
                    "title":"西红柿鸡蛋打卤面",
                    "imgLink": "https://xiaoyangtongzhi.cn/link/food/img_food/xihongshijidandalumian.png"
                },
                {
                    "id":1002,
                    "title":"黄花菜木耳打卤面",
                    "imgLink": "https://xiaoyangtongzhi.cn/link/food/img_food/huanghuacaimuerdalumian.png"
                },
                {
                    "id":1003,
                    "title":"茄汁大虾",
                    "imgLink": "https://xiaoyangtongzhi.cn/link/food/img_food/qiezhidaxia.png"
                }
            ]
        }
    }
}
</script>

<style>
.imgClass{
    width:200px;
    height: 150px;
}
</style>

事件处理(v-on缩写@)

内联事件处理器

事件触发时执行的内联JavaScript语句（与onclick类似）

xxxxxxxxxx
<template>
    <h3>内联事件处理器</h3>
    <!-- v-on可以用@代替写成@click="count++" -->
    <button v-on:click="count++">Add</button>
    <p>Count is: {{ count }}</p>
</template>

<script>
export default{
    data(){
        return{
            count:0
        }
    }
}
</script>

执行结果：

点击按钮不断累加

方法事件处理器

xxxxxxxxxx
<template>
    <h3>内联事件处理器</h3>
    <!-- click是单击 -->
    <button @click="addCount">Add</button>
    <br/>
    <!-- dblclick是双击英文(double click缩写) -->
    <button @dblclick="addCount">Add</button>
    <p>Count is: {{ count }}</p>
</template>

<script>
export default{
    data(){
        return{
            count:0
        }
    },
    //以后所有的方法都放在这里
    methods: {
        addCount(){
            console.log("点击了按钮");
            //所有写在data里的值都可以用this.来访问
            this.count++;
        }
    }
}
</script>

运行结果：

事件参数

获取event对象

xxxxxxxxxx
<template>
    <h3>内联事件处理器</h3>
    <button @click="addCount">Add</button>
    <p>Count is: {{ count }}</p>
</template>

<script>
export default{
    data(){
        return{
            count:0
        }
    },
    methods: {
        addCount(e){
            console.log(e);
            console.log(e.target);
            //vue中的event对象就是原生js的event对象
            e.target.innerHTML = "Add" + this.count;
            this.count++;
        }
    }
}
</script>

运行结果：

传递参数

xxxxxxxxxx
<template>
    <h3>内联事件处理器</h3>
    <button @click="addCount('hello')">Add</button>
    <p>Count is: {{ count }}</p>
</template>

<script>
export default{
    data(){
        return{
            count:0
        }
    },
    methods: {
        addCount(msg){
            console.log(msg);
            this.count++;
        }
    }
}
</script>

运行结果：将hello传递过去并在控制台输出

事件传参

xxxxxxxxxx
<template>
    <h3>事件传参</h3>
    <p @click="getNameHandler(name,$event)" v-for="(name,index) in names" :key="index">{{ name }}</p>
</template>

<script>
export default{
    data(){
        return{
            names:["小杨","小李","小琪"]
        }
    },
    methods:{
        getNameHandler(name,event){
            console.log(name);
            console.log(event);
        }
    }
}
</script>

效果：当点击网页上生成的p标签时，点击哪个就会把哪个的名字和event对象在控制台输出

运行结果：

事件修饰符(v-on)

在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好。

为解决这一问题，Vue 为 v-on 提供了事件修饰符。修饰符是用 . 表示的指令后缀，包含以下这些：

• .stop
• .prevent
• .self
• .capture
• .once
• .passive

阻止默认事件

xxxxxxxxxx
<template>
    <h3>事件修饰符-阻止默认事件</h3>
    <!-- @click.prevent="clickHandle"和方法里的event.preventDefault();效果等价,阻止a标签点击跳转 -->
    <a @click.prevent="clickHandle" href="https://www.xiaoyangtongzhi.cn">软件编程学习Y</a>"
</template>

<script>
export default{
    data(){
        return{
            
        }
    },
    methods:{
        clickHandle(event){
            //通过event对象阻止默认事件
            // event.preventDefault();
            console.log("点击了事件");
        }
    }
}
</script>

运行结果：点击软件编程学习Y超链接不跳转

阻止事件冒泡

什么是事件冒泡：如下例子，p在div里，p和div都有个点击函数，如果我点击p，那么会同时触发div的点击函数和p的点击函数！

xxxxxxxxxx
<template>
    <a @click.prevent="clickHandle" href="https://www.xiaoyangtongzhi.cn">软件编程学习Y</a>"
    <h3>事件修饰符-阻止事件冒泡</h3>
    <div @click="clickDiv">
        <p @click="clickP">测试冒泡</p>
    </div>
</template>

<script>
export default{
    data(){
        return{
            
        }
    },
    methods:{
        clickDiv(){
            console.log("点击了div");
        },
        clickP(){
            console.log("点击了p");
        }
    }
}
</script>

运行结果：

阻止事件冒泡1

xxxxxxxxxx
<h3>事件修饰符-阻止事件冒泡</h3>
    <div @click="clickDiv">
    <!-- @click.stop="clickP"和方法里的e.stopPropagation();效果等价,阻止事件冒泡 -->
    <p @click.stop="clickP">测试冒泡</p>
</div>

或者

阻止事件冒泡2

xxxxxxxxxx
clickP(e){
    e.stopPropagation();
    console.log("点击了p");
}

用事件参数e调用stopPropagation()函数即可

运行结果：

数组变化侦测

操作数组且不生成新数组的7种方式

vue能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些方法包括：

使用以下方法可以使原数组发生变化

• push() 从后面添加数据
• pop() 从后面删除数据
• shift() 从前面删除数据
• unshift() 从前面添加数据
• splice() 替换删除数据
• sort() 排序数据
• reverse() 反转数据

练习例子：

xxxxxxxxxx
<template>
<h3>数组变化侦测</h3>
<button @click="pushListHandle">从后面添加数据</button>
<button @click="popListHandle">从后面删除数据</button>
<button @click="shiftListHandle">从前面删除数据</button>
<button @click="unshiftListHandle">从前面添加数据</button>
<button @click="spliceListHandle">替换删除数据</button>
<button @click="sortListHandle">排序数据</button>
<button @click="reverseListHandle">反转数据</button>
<ul>
    <li v-for="(name,index) in names" :key="index">{{ name }}</li>
</ul>
</template>

<script>
export default{
    data(){
        return{
            names:['张三','李四','王五','赵六']
        }
    },
    methods:{
        pushListHandle(){
            this.names.push('小琪');
        },
        popListHandle(){
            this.names.pop();
        },
        shiftListHandle(){
            this.names.shift();
        },
        unshiftListHandle(){
            this.names.unshift('小琪');
        },
        spliceListHandle(){
            //把第一个位置替换为小琪，删除原列表从插入位置开始包含插入位置的两个数据
            this.names.splice(1,2,'小琪');
        },
        sortListHandle(){
            this.names.sort();
        },
        reverseListHandle(){
            this.names.reverse();
        }
    }
}
</script>

操作数组但生成新数组的3种方式

变更方法，顾名思义，就是会对调用它们的原数组进行变更，相对地，也有一些不可变（immutable）方法，例如filter()，concat()和slice()，这些都不会更改原数组，而总是返回一个新数组，当遇到的是非变更方法时，我们需要将旧的数组替换为新的

使用以下三个方法不会使原数组发生变化，但会生成新数组保存结果

• filter() 过滤数据
• concat() 拼接一个数组
• slice() 截取数组

xxxxxxxxxx
<template>
<h3>数组变化侦测</h3>
<button @click="filterListHandle('赵六')">过滤数据</button>
<button @click="concatListHandle(['赵六','小琪'])">拼接列表</button>
<button @click="sliceListHandle(1, 3)">截取数组</button>
<ul>
    <li v-for="(name,index) in names" :key="index">{{ name }}</li>
</ul>

</template>

<script>
export default{
    data(){
        return{
            names:['张三','李四','王五']
        }
    },
    methods:{
        //不会引起UI自动更新,因为以下三个函数是生成新的数组
        //要想让UI也跟着变化就重新赋值
        filterListHandle(name){
            this.names = this.names.filter(item=>item==name);
        },
        concatListHandle(list){
            this.names = this.names.concat(list);
        },
        sliceListHandle(start,end){
            this.names = this.names.slice(start, end);
        }

    }
}
</script>

计算属性(computed)

xxxxxxxxxx
<template>
<h3>计算属性</h3>
<p>{{ itxiaoyang.name }}</p>
<!-- 模板语法中的复杂逻辑建议使用第二种方法处理，使用computed计算属性 -->
<!-- 第一种方法不易处理复杂情况 -->
<!-- 第二种方法在数据没有变动的情况下，不管调用几次，都只会执行一次 -->
<!-- 第三种函数方法，每执行一次，就会调用一次，非常浪费内存，所以不建议使用 -->
<p>第一种直接写逻辑：{{ itxiaoyang.content.length>0 ? "yes":"no"}}</p>
<p>第二种计算属性：{{ itxiaoyangContent}}</p>
<p>第三种使用函数：{{ itxiaoyangContents()}}</p>
</template>

<script>

export default {
    data() {
        return {
            itxiaoyang:{
                name:"小杨同志",
                content:["前端","Java","python"]
            }         
        }
    },
    //计算属性
    computed:{
        itxiaoyangContent(){
            return this.itxiaoyang.content.length > 0 ? "yes":"no";
        }
    },
    methods:{
        itxiaoyangContents(){
            return this.itxiaoyang.content.length > 0 ? "yes":"no";
        }
    }  
}
</script>

区别：

• 模板语法中的复杂逻辑建议使用第二种方法处理，使用computed计算属性
• 第一种方法不易处理复杂情况
• 第二种方法在数据没有变动的情况下，不管调用几次，都只会执行一次
• 第三种函数方法，每执行一次，就会调用一次，非常浪费内存，所以不建议使用

运行结果：

computed计算属性不能够传递参数，但是可以使用闭包方式实现，下面是一个例子：

xxxxxxxxxx
<template>
    <p>{{ isContainName('张三') }}</p>
</template>

<script>
    export default{
        data(){
            return{
                names:["张三","李四","王五","赵六","黄七"],
            }
        },
        computed:{
            //isContainName()这里不能接收参数，但是可以直接返回一个函数，并让这个函数接收参数，该方法称为闭包
            isContainName(){
                return function(name){
                    for(var i of this.names){
                        if(i == name){
                            return true;
                        }
                    }
                    return false;
                }
            }
        }
    }

</script>

Class绑定

xxxxxxxxxx
<template>
    <!-- 对象作为class绑定 -->
    <p :class="classObject">Class样式绑定1</p>
    <!-- 直接绑定多个class -->
    <p :class="{'active':isActive, 'text-danger':textDanger}">Class样式绑定2</p>
    <!-- 数组作为class绑定 -->
    <p :class="[arrActive, arrHasError]">Class样式绑定3</p>
    <!-- 数组三元运算符作为class绑定 -->
    <p :class="[isActive? 'active':'text-danger']">Class样式绑定4</p>
    <!-- 数组和对象一起作为class绑定,注意：只能是数组嵌套对象 -->
    <p :class="[{'active':isActive}, arrHasError]">Class样式绑定5</p>
</template>

<script>
    export default {
        data() {
            return {
                isActive: true,
                textDanger: true,
                classObject:{
                    'active':true,
                    'text-danger':true
                },
                arrActive: "active",
                arrHasError:"text-danger"
            }
        }
    }

</script>

<style>
.active {
    font-size: 30px;
}
.text-danger {
    color: red;
}
</style>

运行结果：

Style绑定

xxxxxxxxxx
<template>
    <!-- 直接写法 -->
    <p :style="{color:activeColor,fontSize:fontSize}">Style绑定1</p>
    <!-- 绑定对象格式-常用写法 -->
    <p :style="styleObject">Style绑定2</p>
</template>

<script>
    export default {
        data() {
            return {
                activeColor:'green',
                fontSize:'20px',
                styleObject:{
                    color:'red',
                    fontSize:'30px'
                }
            }
        }
    }

</script>

运行结果：

侦听器(watch)

xxxxxxxxxx
<template>
    <h3>侦听器</h3>
    <p>{{ message }}</p>
    <button @click="updateHandle">修改数据</button>
</template>

<script>
export default{
    data(){
        return{
            message:"hello"    
        }
    },
    methods:{
        updateHandle(){
            this.message="world"
        }
    },
    watch:{
        message(newValue,oldValue){
            // 数据发生变化自动执行的函数
            // 函数名必须与侦听的数据对象保持一致
            console.log("新值：" + newValue, "旧值：" + oldValue);
        }
    }
}
</script>

运行结果：

表单输入绑定(v-model)

xxxxxxxxxx
<template>
<h3>表单输入绑定</h3>
<form>
    <!-- v-model有三个修饰符.lazy关闭输入一次搜索一次 .number只接受数字 .trim去除空格 -->
    <input type="text" v-model.lazy="message" placeholder="请输入信息">
    <p>{{message}}</p>
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked ? "已选中":"未选中" }}</label>
</form>
</template>

<script>
export default{
    data(){
        return{
            message:"",
            checked:false
        }
    }
}
</script>

运行结果：

模板引用(操作DOM this.$refs)

xxxxxxxxxx
<template>
    <div ref="container" class="container">{{ content }}</div>
    <input type="text" ref="username"/>
    <button @click="getElementHandle">获取元素</button>
</template>

<script>
/**
 * 内容改变：{{ 模板语法 }}
 * 属性改变：v-bind:属性名="属性值" 或者省略只写 :属性名="属性值"
 * 事件绑定：v-on:事件名="方法名"   或者省略只写 @事件名="方法名"
 * 
 * 操作DOM：this.$refs.元素ref名.元素属性名 = "属性值";
 * 注意：ref很消耗性能，没有必要不要操作DOM
 */
export default{
    data(){
        return{
            content:"hello world!"
        }
    },
    methods:{
        getElementHandle(){
            console.log(this.$refs.container);
            this.$refs.container.innerHTML = "你好世界！";
            console.log(this.$refs.username.value);
        }
    }
}
</script>

运行结果：

组件组成

组件最大的优势就是可复用性

当使用构建步骤时，我们一般会将Vue组件定义在一个单独的.vue文件中，这被叫做单文件组成（简称SFC）

App.vue

xxxxxxxxxx
<template>
    <!-- 第三步 显示组件 -->
    <MyComponent/>
</template>

<script>
// 第一步 引入组件
import MyComponent from './components/MyComponent.vue'

export default{
    //第二步 注入组件
    components: {
        MyComponent
    }
}
</script>

<style>
</style>

MyComponent.vue

xxxxxxxxxx
<template>
    <div class="container">{{ message }}</div>
</template>

<script>
export default {
    data() {
        return {
            message: '组件基础组成'
        }
    }
}
</script>

<!-- scoped 让当前样式只在当前组件中生效-->
<style scoped>
.container {
    font-size: 30px;
    color: red;
}
</style>

组件的注册方式

全局注册

在main.js中进行注册

main.js 以下为注册一个Header.vue示例

xxxxxxxxxx
import { createApp } from 'vue'
import App from './App.vue'

import Header from './pages/Header.vue'

const app = createApp(App)
//在这之间写全局组件的注册
app.component('Header', Header)
app.mount('#app')

在App.vue中就不用在script里写import导入了，但是需要在template中写引用

局部注册

以下为局部注册示例，开发中推荐使用局部注册的方式

xxxxxxxxxx
<template>
  <Header />
  <Main />
  <Aside />
</template>

<script setup>
import Header from './pages/Header.vue'
import Main from './pages/Main.vue'
import Aside from './pages/Aside.vue'
</script>

组件传递多类型数据props(父传子)

Parent.vue

xxxxxxxxxx
<template>
    <h3>Parent</h3>
    <Child title="Parent数据" :demo="message" :age="age", :names="names" :userInfo="userInfo" />
</template>

<script>
import Child from './Child.vue'
export default {
    data() {
        return {
            message:'ParentHello',
            age:18,
            names:['张三','李四','王五'],
            userInfo:{
                name:'张三',
                age:18,
                sex:'男'
            }
        }
    },
    components: {
        Child
    }
}
</script>

Child.vue

xxxxxxxxxx
<template>
    <h3>Child</h3>
    <p>{{ title }}</p>
    <p>{{ demo }}</p>
    <p>{{ age }}</p>
    <ul>
        <li v-for="(item,index) in names" :key="index">{{ item }}</li>
    </ul>
    <p v-for="(item,index) in userInfo" :key="index">{{ item }}</p>
</template>

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

运行结果：

注意：props传递数据只能从父级传递给子级

组件传递Props效验

ComponentA.vue

xxxxxxxxxx
<template>
    <h3>ComponentA</h3>
    <ComponentB :title="title" :names="names" />
</template>

<script>
import ComponentB from './ComponentB.vue'
export default{
    data(){
        return{
            title:"hello world!",
            names:['张三','李四','王五']
        }
    },
    components:{
        ComponentB
    }
}
</script>

ComponentB.vue

xxxxxxxxxx
<template>
    <h3>ComponentB</h3>
    <p>{{title}}</p>
    <p v-for="(name,index) in names" :key="index">{{name}}</p>
</template>

<script>
export default{
    data(){
        return{
            
        }
    },
    props:{
        //props里是从父元素里传过来的数据是不允许被修改的
        title:{
            // 常用类型如下，可以接收多种类型，也可以接收一种
            type:[String, Number, Array, Object, Boolean],
            default:'默认值',
            required:true//必须要传入
        },
        //数字和字符串可以直接default，但是如果是数组和对象，必须通过工厂函数返回默认值
        names:{
            type:Array,
            default(){
                return ['默认值1','默认值2','默认值3']
            }
        }
    }
}
</script>

运行结果：

组件事件this.$emit（子传父数据）

ComponentEvent.vue

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

<script>
import Child from './Child.vue'
export default{
    data(){
        return{
            message:""
        }
    },
    components:{
        Child
    },
    methods:{
        getHandle(data){
            console.log("触发了",data);
            this.message = data;
        }
    }
}
</script>

Child.vue

xxxxxxxxxx
<template>
    <h3>Child</h3>
    <!-- 调用clickEventHandle函数 -->
    <button @click="clickEventHandle">传递数据</button>
</template>

<script>
export default{
    data(){
        return{
            msg:"child数据"
        }
    },
    methods:{
        clickEventHandle(){
            //传递数据，第一个参数名字，第二个是传递的数据
            this.$emit('someEvent',this.msg)
        }
    }
}
</script>

运行结果：

组件事件配合v-model使用

效果:使用watch侦听器可以使得父界面和子界面输入同步

SearchComponent.vue

xxxxxxxxxx
<template>
    <h3>Search Component</h3>
    <label>搜索：</label><input type="text" v-model="search">
    <p>SearchComponent的数据:{{ search }}</p>
</template>

<script>
export default{
    data(){
        return{
            search:''
        }
    },
    //侦听器
    watch:{
        search(newVal, oldVal){
            console.log("新值:"+newVal,"旧值:"+oldVal);
            this.$emit('sendInfo',this.search);
        }
    }
}
</script>

Main.vue

xxxxxxxxxx
<template>
    <h3>Main</h3>
    <p>Main的数据:{{data}}</p>
    <SearchComponent @sendInfo="receiveInfo" />
</template>

<script>
import SearchComponent from './SearchComponent.vue'
export default{
    data(){
        return{
            data:""
        }
    },
    components:{
        SearchComponent
    },
    methods:{
        receiveInfo(data){
            console.log(data)
            this.data=data
        }
    }
}
</script>

运行结果：

组件数据传递props(子传父)

本质是父给子传递一个函数，函数里有参数，子给参数赋值返回给父

ComponentA.vue

xxxxxxxxxx
<template>
    <h3>ComponentA</h3>
    <p>父元素：{{ message }}</p>
    <ComponentB title="标题" :onEvent="dataFn"/>
</template>

<script>
import ComponentB from './ComponentB.vue'
export default {
    data() {
        return {
            message:""
        }
    },
    components:{
        ComponentB
    },
    methods:{
        dataFn(data){
            console.log(data);
            this.message = data;
        }
    }
}</script>

ComponentB.vue

xxxxxxxxxx
<template>
    <h3>ComponentB</h3>
    <p>{{ onEvent("传递数据") }}</p>
</template>

<script>
export default {
    data() {
        return {
            
        }
    },
    props:{
        title:String,
        onEvent:Function
    }
}</script>

运行结果：

插槽Slots

Slot传递div

App.vue

xxxxxxxxxx
<template>
    <SlotsBase>
        <!-- 将整个div传递给SlotsBase子组件 -->
        <div>
            <h3>插槽标题</h3>
            <p>插槽内容</p>
        </div>
    </SlotsBase>

</template>

<script>
import SlotsBase from './components/SlotsBase.vue'
export default{
    components:{
        SlotsBase
    }
}
</script>

<style>
</style>

SlotsBase.vue

xxxxxxxxxx
<template>
    <h3>插槽基础知识</h3>
    <slot>
        <!-- 插槽传递过来的div将会在这里显示 -->
    </slot>
</template>

<script>
</script>

运行结果：

Slot默认值

xxxxxxxxxx
<template>
    <h3>SlotsTwo</h3>
    <slot>插槽默认值</slot>
</template>

如果没有东西传过来那么slot里就会显示默认值

多个Slot命名

使用v-slot进行命名 v-slot:可以写成#号

传递slot

xxxxxxxxxx
<SlotsTwo>
    <!-- v-slot:可以写成#号-->
    <template v-slot:header>
        <h3>{{ message }}</h3>
    </template>
    <template #main>
        <p>内容</p>
    </template>
</SlotsTwo>

接收slot

使用name = ""对多个slot指定接收的名称

xxxxxxxxxx
<template>
    <h3>SlotsTwo</h3>
    <slot name = "header">插槽默认值</slot>
    <hr>
    <slot name="main"></slot>
</template>

多个插槽传递和返回数据

App.vue

xxxxxxxxxx
<template>
    <SlotsAttr>
          <template #header="slotProps">
                <h3>{{ currentTest }}-{{ slotProps.header }}</h3>
          </template>
          <template #main="slotProps">
                <h3>{{ slotProps.job }}</h3>
          </template>
    </SlotsAttr>

</template>

<script>
import SlotsAttr from './components/SlotsAttr.vue'
export default{
    data(){
        return{
            currentTest:"测试内容"
        }
    },
    components:{
        SlotsAttr
    }
}
</script>

SlotsAttr.vue

xxxxxxxxxx
<template>
    <h3>SlotsAttr</h3>
    <hr>
    <slot name="header" :header="childMessage"></slot>
    <slot name="main" :job="jobMessage"></slot>
</template>

<script>
export default {
    data(){
        return{
            childMessage:"子组件数据",
            jobMessage:"xiaoyangtongzhi"
        }
    }
}
</script>

运行结果：

组件生命周期

xxxxxxxxxx
<template>
    <h3>组件的生命周期</h3>
    <p>{{ msg }}</p>
    <button @click="updateHandle">更新</button>
</template>

<script>
    /** 八个生命周期
     * 1.创建期：beforeCreate created
     * 2.挂载期：beforeMount mounted
     * 3.更新期：beforeUpdate updated
     * 4.销毁期：beforeUnmount unmounted
     */
export default{
    data(){
        return{
            msg:'更新之前'
        }
    },
    methods:{
        updateHandle(){
            this.msg = '更新之后';
        }
    },
    beforeCreate(){
        console.log('组件创建之前');
    },
    created(){
        console.log('组件创建之后');
    },
    beforeMount(){
        console.log('组件挂载之前');
    },
    mounted(){
        console.log('组件挂载之后');
    },
    beforeUpdate(){
        console.log('组件更新之前');
    },
    updated(){
        console.log('组件更新之后');
    },
    beforeUnmount(){
        console.log('组件销毁之前');
    },
    unmounted(){
        console.log('组件销毁之后');
    }
}

</script>

组件生命周期的应用

xxxxxxxxxx
<template>
    <h3>组件生命周期的函数应用</h3>
    <p ref="name">小杨同志</p>
    <ul>
        <li v-for="(item,index) in banner" :key="index">
            <h3>{{item.title}}</h3>
            <p>{{item.content}}</p>
        </li>
    </ul>
</template>

<script>
export default{
    data(){
        return{
            banner:[]
        }
    },
    beforeMount(){
        console.log(this.$refs.name);//undefined
    },
    //组件挂在之后
    mounted(){
        console.log(this.$refs.name);//可以读取到name这个组件
        //模拟网络请求
        this.banner=[
            {
                title:"标题1",
                content:"内容1"
            },
            {
                title:"标题2",
                content:"内容2"
            },
            {
                title:"标题3",
                content:"内容3"
            }
        ]
    },

}
</script>

组件的切换(:is)

ComponentA.vue

xxxxxxxxxx
<template>
    <h3>ComponentA</h3>
</template>

ComponentB.vue

xxxxxxxxxx
<template>
    <h3>ComponentB</h3>
</template>

App.vue

xxxxxxxxxx
<template>
    <!-- <UserComponent /> -->
    <component :is="tabComponent"></component>
    <button @click="changeHandle">切换组件</button>
</template>

<script>
import ComponentA from './components/ComponentA.vue'
import ComponentB from './components/ComponentB.vue'
export default{
    data(){
        return{
            tabComponent:"ComponentA"
        }
    },
    components:{
        ComponentA,
        ComponentB
    },
    methods:{
        changeHandle(){
            if(this.tabComponent == "ComponentA"){
                this.tabComponent = "ComponentB"
            }else{
                this.tabComponent = "ComponentA"
            }
        }
    }
}
</script>

通过点击切换组件按钮进行切换

组件保持存活(keep-alive)

ComponentA.vue

xxxxxxxxxx
<template>
    <h3>ComponentA</h3>
    <p>{{ msg }}</p>
    <button @click="updateHandle">更新数据</button>
</template>

<script>
export default{
    data(){
        return{
            msg:"老数据"
        }
    },
    beforeUnmount(){
        console.log("组件被卸载")
    },
    unmount(){
        console.log("组件被卸载")
    },
    methods:{
        updateHandle(){
            this.msg = "新数据"
        }
    }
}
</script>

ComponentB.vue

xxxxxxxxxx
<template>
    <h3>ComponentB</h3>
</template>

App.vue

xxxxxxxxxx
<template>
    <!-- keep-alive用于保持组件存活，当组件被切换时，不会销毁，而是缓存起来，当组件重新被显示时，会重新显示，不会重新创建 -->
    <keep-alive>
        <component :is="tabComponent"></component>
    </keep-alive>
    <button @click="changeHandle">切换组件</button>
</template>

<script>
import ComponentA from './components/ComponentA.vue'
import ComponentB from './components/ComponentB.vue'
export default{
    data(){
        return{
            tabComponent:"ComponentA"
        }
    },
    components:{
        ComponentA,
        ComponentB
    },
    methods:{
        changeHandle(){
            if(this.tabComponent == "ComponentA"){
                this.tabComponent = "ComponentB"
            }else{
                this.tabComponent = "ComponentA"
            }
        }
    }
}

</script>

运行效果：

当点击更新数据的时候，A的老数据会变成新数据，点击切换组件，正常组件会被销毁，但是加了<keep-alive>进行包裹后，点击切换回去同样还是新数据

<keep-alive>用于保持组件存活，当组件被切换时，不会销毁，而是缓存起来，当组件重新被显示时，会重新显示，不会重新创建。

异步组件(defineAsyncComponent)

ComponentA.vue

xxxxxxxxxx
<template>
    <h3>ComponentA</h3>
    <p>{{ msg }}</p>
    <button @click="updateHandle">更新数据</button>
</template>

<script>
export default{
    data(){
        return{
            msg:"老数据"
        }
    },
    beforeUnmount(){
        console.log("组件被卸载")
    },
    unmount(){
        console.log("组件被卸载")
    },
    methods:{
        updateHandle(){
            this.msg = "新数据"
        }
    }
}
</script>

ComponentB.vue

xxxxxxxxxx
<template>
    <h3>ComponentB</h3>
</template>

App.vue

xxxxxxxxxx
<template>
    <!-- keep-alive用于保持组件存活，当组件被切换时，不会销毁，而是缓存起来，当组件重新被显示时，会重新显示，不会重新创建 -->
    <keep-alive>
        <component :is="tabComponent"></component>
    </keep-alive>
    <button @click="changeHandle">切换组件</button>
</template>

<script>
import ComponentA from './components/ComponentA.vue'
// import ComponentB from './components/ComponentB.vue'
import {defineAsyncComponent} from 'vue'
//异步加载组件
const ComponentB = defineAsyncComponent(() =>
    import('./components/ComponentB.vue')
)
export default{
    data(){
        return{
            tabComponent:"ComponentA"
        }
    },
    components:{
        ComponentA,
        ComponentB
    },
    methods:{
        changeHandle(){
            if(this.tabComponent == "ComponentA"){
                this.tabComponent = "ComponentB"
            }else{
                this.tabComponent = "ComponentA"
            }
        }
    }
}

</script>