【VUE3】保姆级基础讲解（二）计算属性，vue组件，vue-cli脚手架，组件通讯，插槽slot

目录

计算属性computed

侦听器watch

对象监听

组件

注册全局组件

注册局部组件

Vue-CLI脚手架

安装和使用

.browserslistrc

main.js

 jsconfig.json

组件通讯

父组件传递给子组件

props基础

非prop的attribute

子组件传递给父组件

插槽slot

基础使用

 具名插槽

 动态插槽名

 作用域插槽

---

计算属性computed

如果我得到了socre，希望根据这个判断是否及格，可以这么做：

{{score>=60?'及格':'不及格'}}

 但是这么做的弊端是，需要在插值语法中放置过于复杂的逻辑，不易于维护

有一种方法是在methods中放置函数:

    

        
{{gett()}}
    
    
    

但是我们希望不要调用函数，而是直接用变量名，就可以使用计算属性computed

对于任何包含响应式数据的复杂逻辑，都应该使用计算属性

    

 
        
{{gett}}
    
    
    

在调用时直接写函数的名字，而不用写()

 计算属性的优势

• 计算属性直接放函数名字，比较简洁
• 计算属性具有缓存

      
  
          
  {{gett}}
          
  {{gett}}
          
  {{gett}}
          
  {{gett1()}}
          
  {{gett1()}}
          
  {{gett1()}}
      
  

              methods:{
                  gett1(){
                      console.log('11--------11');
                      return this.score>=60?'及格':'不及格'
                  }
              },
              computed:{
                  gett(){
                      console.log('22--------22');
                      return this.score>=60?'及格':'不及格'
                  }
              }

  结果是

 

 也就是说计算属性执行一次后会将结构放在缓存中，下次再使用时不用重新调用

侦听器watch

可以侦听数据的改变

    

        
{{gett}}
        
    
    
    

watch里用变量的名字定义了一个函数，定义了这个变量发生变化时，执行哪些操作

这个函数可以调用此变量的 新旧值

对象监听

这个方法对于对象也可以监听，但是只能监听对象整体赋值

            methods:{
                change(){
                    this.score = {name:'1232'};
                }
            },
            watch:{
                score(newvalue,old){
                    console.log('score has been changed');
                },

上面这个可以监听到

            methods:{
                change(){
                    this.score.name = '1233'
                }
            },
            watch:{
                score(newvalue,old){
                    console.log('score has been changed');
                },

上面这个不行，因为watch默认不会进行深度监听、

如果要进行深度监听:

            watch:{
                score:{
                    handler(newvalue,oldvalue){
                        console.log('score has been changed')
                    },
                    deep:true
                }
            }

如果在最开始渲染界面时就想运行这个监听函数，使用 immediate:true

            watch:{
                score:{
                    handler(newvalue,oldvalue){
                        console.log('score has been changed')
                    },
                    deep:true,
                    immediate:true
                }
            }

做一个小案例

    
    
    
    
    



    

        

            
序号
            
书籍名称
            
出版日期
            
价格
            
购买数量
            
操作
        
        

            
{{index+1}}
            
{{value}}
            
-{{counter[index]}}+
            
移除
        
        
总价：¥{{sum}}
        
{{alert}}
    
    
    

组件

注册全局组件

这里分三步创造全局组件product-item，在使用时直接使用即可使用模板内容 

template写在这里感觉不是很方便，也可以写在上面再用id引入，并且在app中，之前所有的方法一样适用

当然也可以注册多个全局组件

这里定义了两个全局组件   product-item   和   nav-item

全局组件可以在任意组件的template中使用

例如下面这种写法是允许的：

注册局部组件

一般开发时很少注册全局组件

局部组件是在app中采用components api设置：

局部组件不可以在任意组件的template中使用

Vue-CLI脚手架

但是上述的开发模式很繁琐，将js vue  css html都写在一起

 一般使用脚手架搭建项目模板

安装和使用

在命令行：

npm i @vue/cli -g

使用脚手架创造项目，这种方法基于webpack

vue create project_name

会问你一堆问题，具体什么意思这里不赘述了

创建好之后可以运行项目

npm run serve 

这里还有第二种方法创建vue项目，这个是基于vite工具

npm init vue@latest

 其过程是：

• 安装一个本地工具：create-vue
• 使用create-vue创建项目

.browserslistrc

这里解释一下 .browserslistrc

> 1%
last 2 versions
not dead
not ie 11

•  只适配市场占有率大于百分之1的浏览器，通过 caniuse 网站
• 适配浏览器的最后两个版本
• 不适配 没有维护 的浏览器
• 不适配 ie 11

main.js

在src文件夹下有main.js文件

import { createApp } from 'vue/dist/vue.esm-bundler'
import App from './App.vue'
createApp(App).mount('#app')

这里说的是在 App.vue 中引入App组件并渲染

说一下下来两者的区别

import { createApp } from 'vue'
import { createApp } from 'vue/dist/vue.esm-bundler'

第一个是 runtime 模式

第二个是  runtime＋compile 模式

具体是体现在