关于vue.js:Vue-组件化编程

40次阅读

共计 7331 个字符,预计需要花费 19 分钟才能阅读完成。

1.1 模块与组件、模块化与组件化

1.1.1 模块

  1. 了解:向外提供特定性能的 js 程序,个别就是一个 js 文件
  2. 为什么:js 文件很多很简单
  3. 作用:复用 js,简化 js 的编写,进步 js 运行效率

1.1.2 组件

  1. 了解:用来实现部分 (特定) 性能成果的代码汇合(html/css/js/image…..)
  2. 为什么:一个界面的性能很简单
  3. 作用:复用编码,简化我的项目编码,进步运行效率

1.1.3 模块化

当利用中的 js 都以模块来编写的,那这个利用就是一个模块化的利用。

1.1.4 组件化

当利用中的性能都是多组件的形式来编写的,那这个利用就是一个组件化的利用。

1.2 非单文件组件

1.2.1 阐明

  1. 模板编写没有提醒
  2. 没有构建过程,无奈将 ES6 转换成 ES5
  3. 不反对组件的 CSS
  4. 真正开发中简直不必

1.2.2 根本应用

<!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">
    <title> 根本应用 </title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        Vue 中应用组件的三大步骤:一、定义组件(创立组件)
            二、注册组件
            三、应用组件(写组件标签)

            一、如何定义一个组件?应用 Vue.extend(options) 创立,其中 options 和 new Vue(options) 时传入的那个 options 简直一样,但也有点区别;区别如下:1.el 不要写,为什么?——— 最终所有的组件都要通过一个 vm 的治理,由 vm 中的 el 决定服务哪个容器。2.data 必须写成函数,为什么?———— 防止组件被复用时,数据存在援用关系。备注:应用 template 能够配置组件构造。二、如何注册组件?1. 部分注册:靠 new Vue 的时候传入 components 选项
                2. 全局注册:靠 Vue.component('组件名', 组件)

            三、编写组件标签:<school></school>
    -->
    <div id="root">
        <!-- <h2> 学校名称:{{schoolName}}</h2>
        <h2> 学校地址:{{schoolAddress}}</h2>
        <h2> 学生姓名:{{studentName}}</h2>
        <h2> 学生年龄:{{studentAge}}</h2> -->

        <!-- 第三步:应用组件 -->
        <xuexiao></xuexiao>
        <hr></hr>
        <student></student>
    </div>

    <div id="root2">
        <xuexiao></xuexiao>
        <hr></hr>
        <student></student>
    </div>

    <script>
        // 阻止 vue 在启动时生成生产提醒
        Vue.config.productionTip = false

        // 第一步:创立组件
        const school = Vue.extend({
            template: `
                <div>
                    <h2> 学校名称:{{schoolName}}</h2>
                    <h2> 学校地址:{{schoolAddress}}</h2>
                </div>`,
            data() {
                return {
                    schoolName: "厦门大学",
                    schoolAddress: "厦门",
                }
            }
        })

        // 第一步:创立组件
        const student = Vue.extend({
            template: `
                <div>
                    <h2> 学生姓名:{{studentName}}</h2>
                    <h2> 学生年龄:{{studentAge}}</h2>
                </div>`,
            // 组件定义时,肯定不要写 el 配置项,因为最终所有的组件都要被一个 vm 治理,由 vm 决定服务于哪个容器
            // el: "#rtoot",
            data() {
                return {
                    studentName: "李四",
                    studentAge: 22,
                }
            }
        })

        // 全局注册组件
        Vue.component("xuexiao", school)
        Vue.component("student", student)

        new Vue({
            el: "#root",
            data: {
                schoolName: "北京大学",
                schoolAddress: "北京",
                studentName: "张三",
                studentAge: 18,
            },
            
            // 第二步:注册组件
            components: {
                xuexiao: school,
                student
            }
        })

        new Vue({
            el: "#root2",
            data: {}})
    </script>
</body>
</html>

1.2.3 注意事项

<!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">
    <title> 几个留神点 </title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        几个留神点:1. 对于组件名:
                一个单词组成:第一种写法(首字母小写):school
                    第二种写法(首字母大写):School
                多个单词组成:第一种写法(kebab-case 命名):my-school
                    第二种写法(CamelCase 命名):MySchool (须要 Vue 脚手架反对)
                备注:(1). 组件名尽可能回避 HTML 中已有的元素名称,例如:h2、H2 都不行。(2). 能够应用 name 配置项指定组件在开发者工具中出现的名字。2. 对于组件标签:
                第一种写法:<school></school>
                第二种写法:<school/>
                    备注:不必应用脚手架时,<school/> 会导致后续组件不能渲染。3. 一个简写形式:const school = Vue.extend(options) 可简写为:const school = options
    -->
    <div id="root">
        <h2>{{message}}</h2>
        <!-- 写法一:首字母小写 -->
        <school></school>

        <!-- 写法二:首字母大写 -->
        <School></School>

        <!-- 写法三 -->
        <!-- 不必脚手架时,当应用多个组件,会导致后续组件不能渲染 -->
        <school />
        <school />
    </div>

    <script>
        // 阻止 vue 在启动时生成生产提醒
        Vue.config.productionTip = false

        // 定义组件
        // const school = Vue.extend({
        //     name: "MySchool",
        //     template: `
        //         <div>
        //             <h2> 学校名称:{{name}}</h2>
        //             <h2> 学校地址:{{address}}</h2>
        //         </div>
        //     `,
        //     data() {
        //         return {
        //             name: "北京大学",
        //             address: "北京"
        //         }
        //     }
        // })
        // 定义组件
        const school = {
            name: "MySchool",
            template: `
                <div>
                    <h2> 学校名称:{{name}}</h2>
                    <h2> 学校地址:{{address}}</h2>
                </div>
            `,
            data() {
                return {
                    name: "北京大学",
                    address: "北京"
                }
            }
        }

        new Vue({
            el: "#root",
            data: {message: "欢送学习 Vue!"},
            // 注册组件
            components: {school}
        })
    </script>
</body>
</html>

1.2.4 组件的嵌套

<!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">
    <title> 组件的嵌套 </title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- <h2>{{message}}</h2>
        
        <hello></hello>

        <school></school> -->

    </div>

    <script>
        // 阻止 vue 在启动时生成生产提醒
        Vue.config.productionTip = false


        // 定义学生组件
        const student = Vue.extend({
            template: `
                <div>
                    <h2> 学生名称:{{name}}</h2>
                    <h2> 学生年龄:{{age}}</h2>
                </div>
            `,
            data() {
                return {
                    name: "北京大学",
                    age: 20
                }
            }
        })

        // 定义组件
        const school = Vue.extend({
            name: "MySchool",
            template: `
                <div>
                    <h2> 学校名称:{{name}}</h2>
                    <h2> 学校地址:{{address}}</h2>
                    <student></student>
                </div>
            `,
            data() {
                return {
                    name: "北京大学",
                    address: "北京"
                }
            },
            components: {student}
        })

        // 定义 hello 组件
        const hello = Vue.extend({
            template: `
                <div>
                    <h2> Hello World </h2>
                </div>
            `,
        })

        const app = ({
            template: `
                <div>
                    <h2>{{message}}</h2>
                    
                    <school></school>

                    <hello></hello>
                </div>
            `,
            data() {
                return {message: "欢送学习 Vue!"}
            },
            // 注册组件
            components: {school, hello}
        })

        new Vue({
            el: "#root",
            template: `
                <app></app>
            `,
            // data: {
            //     message: "欢送学习 Vue!"
            // },
            // 注册组件
            components: {app}
        })
    </script>
</body>
</html>

1.2.5 VueComponent

<!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">
    <title>VueComponent</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        对于 VueComponent:1.school 组件实质是一个名为 VueComponent 的构造函数,且不是程序员定义的,是 Vue.extend 生成的。2. 咱们只须要写 <school/> 或 <school></school>,Vue 解析时会帮咱们创立 school 组件的实例对象,即 Vue 帮咱们执行的:new VueComponent(options)。3. 特地留神:每次调用 Vue.extend,返回的都是一个全新的 VueComponent

            4. 对于 this 指向:(1). 组件配置中:data 函数、methods 中的函数、watch 中的函数、computed 中的函数 它们的 this 均是【VueComponent 实例对象】。(2).new Vue(options)配置中:data 函数、methods 中的函数、watch 中的函数、computed 中的函数 它们的 this 均是【Vue 实例对象】。5.VueComponent 的实例对象,当前简称 vc(也可称之为:组件实例对象)。Vue 的实例对象,当前简称 vm。-->
    <div id="root">
        <school></school>
    </div>

    <script>
        // 阻止 vue 在启动时生成生产提醒
        Vue.config.productionTip = false

        // 定义 school 组件
        const school = Vue.extend({
            name: "school",
            template:`
                <div>
                    <h2> 学校名称:{{name}}</h2>    
                    <h2> 学校地址:{{address}}</h2>    
                    <button @click="showName"> 点我提醒学校名 </button>
                </div>
            `,
            data(){
                return {
                    name: "北京大学",
                    address: '北京'
                }
            },
            methods: {showName(){
                    // 组件中的 this 是 VueComponent 实例
                    console.log('showName', this)
                }
            },
        })

        const test = Vue.extend({template: `<span>atguigu</span>`})

        // 定义 hello 组件
        const hello = Vue.extend({
            template:`
                <div>
                    <h2>{{msg}}</h2>
                    <test></test>    
                </div>
            `,
            data(){
                return {msg: '你好啊!'}
            },
            components:{test}
        })


        console.log('@', school)
        console.log('#', hello)
        
        // false 阐明两个是不同的 VueComponent 实例
        console.log(school === hello);

        const vm = new Vue({
            el: "#root",
            data: { },
            components: {school, hello}
        })
    </script>
</body>
</html>

1.2.6 内置关系

<!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">
    <title> 一个重要的内置关系 </title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        1. 一个重要的内置关系:VueComponent.prototype.__proto__ === Vue.prototype
        2. 为什么要有这个关系:让组件实例对象(vc)能够拜访到 Vue 原型上的属性、办法。-->
    <div id="root">
        <school></school>

        <hello></hello>
    </div>

    <script>
        // 阻止 vue 在启动时生成生产提醒
        Vue.config.productionTip = false

        // 定义 school 组件
        const school = Vue.extend({
            template: `
                <div>
                    <h2> 学校名称:{{name}}</h2>
                    <h2> 学校地址:{{address}}</h2>
                </div>
            `,
            data() {
                return {
                    name: "北京大学",
                    address: "北京"
                }
            }
        })

        const hello = Vue.extend({
            template: `
                <div>
                    <h2>Hello World</h2>
                </div>
            `,
            data() {return {}
            }
        })

        console.log(school.prototype.__proto__ === Vue.prototype);

        new Vue({
            el: "#root",
            data: { },
            components: {school, hello}
        })

        // 定义一个构造函数
        function Demo() {
            this.a = 1
            this.b = 2
        }

        const d = new Demo()

        // 显示原型属性
        console.log(Demo.prototype);
        
        // 隐式原型属性高 
        console.log(d.__proto__);

        console.log(Demo.prototype === d.__proto__);

        Demo.prototype.x = 99

        console.log(d.__proto__.x);


</script>
</body>
</html>

1.3 单文件组件

1.3.1 一个 .vue 文件的组成(3 个局部)

  1. 模板页面

    <template>
    页面模板
    </template>
  2. JS 模块对象

    <script>
        export default{data(){return{}
        },
        methods:{},
        computed:{},
        components:{}}
    </script>
  3. 款式

    <style>
        款式定义
    </style>
  4. 示例代码

    <template>
        <div>
            <h2> 学生姓名:{{name}}}</h2>
            <h2> 学生年龄:{{age}}}</h2>
        </div>
    </template>
    
    <script>
    export default {
        name: "Student",
        data() {
            return {
                name: "张三",
                age: 18
            }
        }
    }
    </script>
    
    <style>
    
    </style>

1.3.2 根本应用

  1. 引入组件

    <script>
    import School from "./School.vue";
    import Student from "./Student.vue";
    
    export default {
      name: "App",
      components: {
        School,
        Student,
      },
    };
    </script>
  2. 应用组件标签

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

正文完
 0