Vue3学习笔记-07

最新推荐文章于 2024-07-18 08:30:50 发布

原创最新推荐文章于 2024-07-18 08:30:50 发布 · 354 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #前端 #javascript

学习笔记同时被 3 个专栏收录

7 篇文章

订阅专栏

vue学习笔记

7 篇文章

订阅专栏

Vue

6 篇文章

订阅专栏

本文详细探讨了Vue3中的组件嵌套、VueComponent的原理、组件间的内在关系，以及单文件组件（SFC）的使用，包括知识点、练习、脚手架的应用和配置。重点讲解了main.js中的render函数、props配置及其限制，同时介绍了如何通过ref属性访问DOM。

Vue3学习笔记-07

一、组件嵌套

在实际开发中，可以定义一个app组件来管理其他所有的组件

<div id="root">
        <school></school>
    </div>

    <script>
        //创建user组件
        const user = Vue.extend({
            template:`
                <div>
                    <h2>{{name}}</h2>
                    <h2>{{age}}</h2>
                    <h2>{{sex}}</h2>
                    <button @click="addAge">点击我年龄加1</button>
                </div>
            `,
            data(){
                return{
                    name:'张三',
                    age : 18,
                    sex:'男'
                }  
            },
            methods:{
                addAge(){
                    this.age++
                }
            }
        })

        //创建school组件
        const school = Vue.extend({
            template:`
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <user></user>
            </div>
            `,
            // el:'#root',  //在创建组件时，不要写el配置项，因为最终所有的组件都要被一个vm所管理，由vm决定服务于哪一个容器
            data(){
                return {
                    schoolName:'lyu',
                    address:'兰山区'
                }
            },
            components:{
                user:user
            }
        })

        new Vue({
            el:'#root',
            data:{

            },
            components:{
                school:school
            }
            
        })
    </script>

二、关于VueComponent

①之前定义的组件，本质上是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。

②我们只需要写<school></school> 或者 <school/> ,Vue解析的时候会帮我们创建school组件的实例对象，即Vue帮我们执行的: new VueComponent(options)。

③特别注意的是：每一次调用 Vue.extend , 返回的都是一个全新的VueComponent。

④关于this的指向：

（1）.组件配置中：

data函数、methods中的函数、watch中的函数、computed中的函数，他们的this都是 VueComponent 的实例对象

（2）.new Vue()配置中：

data函数、methods中的函数、watch中的函数、computed中的函数，他们的this都是 Vue的实例对象

⑤VueComponent 的实例对象，以后简称 vc（也可以称之为：组件实例对象）。

Vue的实例对象，可以简称为vm

三、一个重要的内置关系

<script>
    //定义一个构造函数
	function Demo(){
        this.a = 1
        this.b = 2
    }
    //创建一个Demo的实例对象
    const demo = new Demo()
    
    console.log(Demo.prototype)  //这里的Demo.prototype中的prototype是Demo的显式原型属性
    console.log(demo.__proto__) //这个是隐式原型属性, 注意：前后都是两个下划线
    //上面的两个属性都指向了原型对象，统称为原型对象，原型对象只有一个，上面所说的只是对属性的一个修饰
</script>

通过显示原型属性操作原型对象，追加一个X属性，值为：99

Demo.prototype.x = 99

console.log('@',d.__proto__.x)

console.log(Demo.prototype === d.__proto__) 输出的值为 true

一个重要的内置关系是： VueComponent.prototype.__proto__=== Vue.prototype
**为什么要有这个关系：**让组件实例对象( vc ) 可以访问到 Vue原型上的属性、方法。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tyNlo9UP-1627036126498)(C:\Users\20901\AppData\Roaming\Typora\typora-user-images\image-20210723103706244.png)]

四、单文件组件

1.知识点

别的地方要想使用该组件，那么该组件必须公开暴露。暴露的方法有三中方式。
第一种：分别暴露：直接在const school = Vue.extend({}) 的前面加上一个 export
第二种：统一暴露：直接在const school = Vue.extend({}) 的后面加上一个 export{school}。花括号中是组件的名称
第三中：默认暴露：直接在const school = Vue.extend({}) 的后面加上一个 export default school 建议使用默认暴露。
第三种方式可以简写为： export default Vue.extend({ name:'', data(){ return{} }}) 或者是 export default{ name:'', data(){ return{} }}

2.练习例子

<template>
    <div class="root">
        <!---->
        <h2>学校的名称:{{schoolName}}</h2>
        <h2>学校的地址:{{address}}</h2>
        <button @click="showName">点击我提示信息</button>
    </div>
</template>

<style>
    /*组件的样式*/
    .root{
        background-color: orangered;
    }
</style>

<script>
    //组件交互相关的代码
    const school = Vue.extend({
        data(){
            return {
                schoolName:'lyu',
                address:'兰山区'
            }
        },
        methods:{
            showName(){
                alert(this.schoolName)
            }
        }
    })
    
    // export default{
    //     name:'School', 
    //     data(){ 
    //         return{
    //             schoolName:'lyu',
    //             address:'兰山区'
    //         } 
    //     }
    // }
</script>

<template>
    <div class="root">
        <!---->
        <h2>学生的姓名:{{name}}</h2>
        <h2>学生的年龄:{{age}}</h2>
        <button @click="showName">点击我提示信息</button>
    </div>
</template>

<style>
    /*组件的样式*/
    .root{
        background-color: orangered;
    }
</style>

<script>
    //组件交互相关的代码
    export default{
        name:'Student',
        data(){
            return {
                name:'张三',
                age:18
            }
        },
        methods:{
            showName(){
                alert(this.name)
            }
        }
    }
</script>

<template>
    <div>
        <School></School>
        <Student></Student>
    </div>
</template>

<script>
    //引入组件
    import School from './School.vue'
    import Student from './Student.vue'
    export default {
        name:'app',
        components:{
            School,
            Student
        }
    }
</script>

import  App from './App.vue'

new Vue({
    el:'#root',
    components:{App}
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>练习单文件的语法</title>
</head>
<body>
    <div id="root">
        <App></App>
    </div>
    <script src="./main.js"></script>
</body>
</html>

注意：当然，上面的代码确实是整个组件使用的逻辑，但是在main.js中的，使用了import App from './App.vue' ，不能被浏览器所解析，需要借助脚手架才能够正确使用。

3.脚手架的使用

Vue脚手架是Vue官方提供的标准化开发工具（开发平台）

Vue脚手架官方文档：https://cli.vuejs.org/zh/

CLI : command line interface

脚手架的安装：

在cmd中输入npm install -g @vue/cli

参考资料：https://cli.vuejs.org/zh/guide/installation.html

mian.js 中：

//引入Vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'

//关闭vue的生产提示
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

1.在assets文件中放的是静态资源

2.如果浏览器不支持js的时候，中的元素就会被渲染出来。当支持js的时候，标签中的元素不做渲染

例子：

<noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>

4. main .js 中的 render

使用：

new Vue({
  render: h => h(App),
}).$mount('#app')

//引入残缺版的vue, 其中没有模板解析器，不能解析<template>。但是可以使用render函数可以解决这个问题
import Vue from 'vue'

//引入完整版的vue, 可以使用 <template>
//import Vue from 'vue/dist/vue'

new Vue({
    el:'#app',
    render(createElement){
        console.log(typeof(createElement))//输出的结果是function, 也就是createElement的类型是一个函数
        return createElement('h1','你好啊')// 在页面上会显示 “你好啊”, 而且格式是标题1一(<h1>)
    }
    //可以简写为： rander: q => q('h1','你好啊')
    
   /*
   render(createElement){ return createElement('h1','你好') }
   
   =>  render:createElement =>{ return createElement('h1','你好') } 
   
   =>  render:createElement => createElement('h1','你好')
   
   =>  render: q => q('h1','你好')
   */ 
   
})

5.关于不同版本的Vue-render函数的使用

1.vue.js 与 vue.runtime.xxx.js 的区别在于：

① vue.js 是完整版的vue，包含：核心功能和模板解析器

② vue.runtime.xxx.js 是运行版的vue，只包含：核心功能，没有模板解析器

2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement 函数去指定具体内容

6.脚手架的配置

1.使用 vue inspect > output.js 可以把配置文件导出来，但是会报错，原因是导出来的配置文件是一个对象，需要用一个变量接收：可以使用 const a = {……} 或者使用 export default {}

不能修改的一些配置：

①就是public文件名不要改

②favicon.ico 的名字不要改

③ src 路径不能改

④ main.js不能改

⑤ public下面的index.html 不能改

在Vue官网 https://cn.vuejs.org/ 里面的中的 -> 生态系统 -> Vue CLI -> 配置参考项 (网址：https://cli.vuejs.org/zh/config/) 里面可以查看相关的配置参考项。在官网中左边栏的参考项都是可以修改的。可以参考着查看。

关闭语法检查：

在配置文件中用 lintOnSave 的值为false就可以解决这个问题（要和pages同级）

vue.config.js (配置文件) 文件内容：（该文件要和package.json 文件在同一级目录下)

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    lintOnSave:false,//关闭语法检查
      
    // 当使用只有入口的字符串格式时，
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话，就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
    subpage: 'src/subpage/main.js'
  }
}

7.脚手架基本结构

在这里插入图片描述

8. ref属性

在Vue中通过ref可以获取原生DOM对象，ref 在Vue中相当于id的作用

<div>
    <h1 v-text="msg" ref="title"></h1>
    <button @click="showDOM">点击我输出上方的DOM元素</button>
</div>
<script>
	export default{
        name:'App',
        components:{
            
        },
        data(){
            return {
                msg:'好好学习，天天向上！'
            }
        }
        methods:{
            showDOM(){
                console.log(this.$refs.title)//输出的值为: h1
                //如果给组件添加ref的话，就是获取加ref的组件的实例对象
            }
        }
    }
</script>

五、配置项 props 配置

1. props作为数组类型使用

<!--这个是app.vue-->
<template>
	<div>
        <Student name="张三" sex="女" :age="18"/>
    </div>
</template>
<script>
	import Student from './components/Student'
    
    export default{
        name:'App',
        components:{Student}
    }
</script>

<!--这个是Student.vue-->
<template>
	<div>
        <h1>{{msg}}</h1>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>
        <h2>学生年龄：{{age+1}}</h2>
    </div>
</template>
<script>
    export default{
        name:'Student',
        data(){
            return {
                msg:'我是一个LYU的学生'
            }
        },
        props:['name','sex','age']
    }
</script>

注： <Student name="张三" sex="女" :age="18"/> 这里如果不加 " : " 就传的就是字符串，不能执行+1操作。加上 " : " 之后，其 " " 里面的东西就作为表达式，所以可以进行计算了。

2. props可以写成对象类型

<!--这个是Student.vue-->
<template>
	<div>
        <h1>{{msg}}</h1>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>
        <h2>学生年龄：{{age+1}}</h2>
    </div>
</template>
<script>
    export default{
        name:'Student',
        data(){
            return {
                msg:'我是一个LYU的学生'
            }
        },
        //接收的同时对数据进行类型转换
        props:{
            name:String,
            age:Number,
            sex:String
        }
    }
</script>

3. props完整写法（进行类型限制、设置默认值、必要性限制）

<!--这个是Student.vue-->
<template>
	<div>
        <h1>{{msg}}</h1>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>
        <h2>学生年龄：{{age+1}}</h2>
    </div>
</template>
<script>
    export default{
        name:'Student',
        data(){
            return {
                msg:'我是一个LYU的学生'
            }
        },
        props:{
            name:{
                type:String,
                required:true //name是必须传
            },
            age:{
                type:Number,
                default:99 //设置默认值
            },
            sex:{
                type:String,
                required:false  //这里需要注意的是，required 和 default 基本上不会同时出现
            }
        }
    }
</script>

4. props的值是不允许修改的

props的值是从外部传入的，但是props的值在定义之后，它的值是不能修改的。

如果确实需要改的话：在 data() 中再次声明一个属性来接收(props中的值是优先出现的，所以data中可以用过this.age获取值)

<!--这个是Student.vue-->
<template>
	<div>
        <h1>{{msg}}</h1>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>
        <h2>学生年龄：{{age+1}}</h2>
    </div>
</template>
<script>
    export default{
        name:'Student',
        data(){
            return {
                msg:'我是一个LYU的学生',
                myAge:this.age
            }
        },
        props:{
            name:{
                type:String,
                required:true //name是必须传
            },
            age:{
                type:Number,
                default:99 //设置默认值
            },
            sex:{
                type:String,
                required:false  //这里需要注意的是，required 和 default 基本上不会同时出现
            }
        }
    }
</script>