首页 > 其他分享 >手撕Vue-构建Vue实例

手撕Vue-构建Vue实例

时间:2023-10-03 10:55:37浏览次数:43  
标签:el vue 实例 Dom Vue 构建 data

前言

要想使用Vue必须先创建Vue的实例, 创建Vue的实例通过new来创建, 所以说明Vue是一个类, 所以我们要想使用自己的Vue, 就必须定义一个名称叫做Vue的类。

只要创建好了Vue的实例,Vue就会根据指定的区域和数据,去编译渲染这个区域,所以我们需要在自己编写的Vue实例中拿到数据和控制区域,去编译渲染这个区域。

!> 注意点:创建Vue实例的时候指定的控制区域可以是一个ID名称, 也可以是一个Dom元素

指定控制区域是一个ID名称的情况:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue基本模板</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="name">
    <p>{{ name }}</p>
    <p>{{age}}</p>
    <ul>
        <li>6</li>
        <li>6</li>
        <li>6</li>
    </ul>
</div>
<script>
    let vue = new Vue({
        el: '#app',
        data: {
            name: "BNTang",
            age: 33
        }
    });
</script>
</body>
</html>

指定控制区域是一个Dom元素的情况:

<script>
    let vue = new Vue({
        el: document.querySelector('#app'),
        data: {
            name: "BNTang",
            age: 33
        }
    });
</script>

测试结果不展示了。

!> 注意点:Vue实例会将传递的控制区域和数据都绑定到创建出来的实例对象上(\(el/\)data)

<script>
    let vue = new Vue({
        el: document.querySelector('#app'),
        data: {
            name: "BNTang",
            age: 33
        }
    });
    console.log(vue.$el);
    console.log(vue.$data);
</script>

注意点介绍完了,我们开始手撕Vue吧。经过上面的分析,我们知道Vue是一个类,所以我们需要定义一个名称叫做Vue的类,我这里叫 Nue。

class Nue {
    constructor(options) {
    }
}

分析一下 Vue,我们在创建 Vue 实例的时候传递的是一个对象,所以我这里在构造函数中用 options 来接收这个对象。

然后对象中有两个属性,一个是 el,一个是 data,我们需要将这两个属性挂载到 Nue 的实例上,所以我们需要在构造函数中定义两个属性,一个是 $el,一个是 $data。

$el 是一个 Dom 元素,我们需要将传递的 el 转换成 Dom 元素,所以我们需要判断一下传递的 el 是一个字符串还是一个 Dom 元素,如果是字符串,我们就通过 querySelector 来获取这个 Dom 元素,如果是 Dom 元素,我们就直接将这个 Dom 元素赋值给 $el。

$data 是一个对象,我们直接将传递的 data 赋值给 $data。

所以我这里封装了一个方法用于判断 $el 是否是一个元素,方法名叫做 isElement:

isElement(node) {
    return node.nodeType === 1;
}

封装之后我们的代码就变成了这样:

class Nue {
    constructor(options) {
        if (this.isElement(options.el)) {
            this.$el = options.el;
        } else {
            this.$el = document.querySelector(options.el);
        }
        this.$data = options.data;
    }

    isElement(node) {
        return node.nodeType === 1;
    }
}

接下来我们调用我们自己的 Nue 类,看看是否能够正常的创建 Vue 实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue基本模板</title>
    <script src="js/nue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="name"/>
    <p>{{ name }}</p>
    <p>{{age}}</p>
    <ul>
        <li>6</li>
        <li>6</li>
        <li>6</li>
    </ul>
</div>

<script>
    let vue = new Nue({
        el: document.querySelector('#app'),
        data: {
            name: "BNTang",
            age: 33
        }
    });

    console.log(vue.$el);
    console.log(vue.$data);
</script>
</body>
</html>

标签:el,vue,实例,Dom,Vue,构建,data
From: https://www.cnblogs.com/BNTang/p/17740883.html

相关文章

  • Jenkins List Git Branches插件 构建选择指定git分支
    ListGitBranchesParameter|JenkinspluginAddsabilitytochoosefromgitrepositoryrevisionsortagshttps://plugins.jenkins.io/list-git-branches-parameter/1、安装组件  ListGitBranches2、验证功能1)新建任务 2)新增构建参数 3)选择git仓库我这里选择gitee,其他......
  • vue 学习笔记
    https://www.bilibili.com/video/BV13m4y1Y7MD安装vuecli1安装 node.js要求node.js12+版本, https://nodejs.org/zh-cn 首页下载安装lts版本,如果已安装就覆盖安装vscode终端或cmd中输入npm--vesion  node--v可以查看是否安装成功npm(nodepackagemanager):no......
  • vue框架
    1、vue框架vue框架的简单使用如下所示,并且是双向数据绑定的:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>测试四</title><!--引入vue框架--><scriptsrc="../js/vue.js">......
  • vue3+vite+ elementplus项目部署到gitee pages并发布
    1.在gitee上新建仓库命名:demo-vite-vue32.把新建的仓库克隆到本地3.在本地的master分支编写代码并上传把分支定位在master分支上通过git工具把本地完成的代码上传到gitee的demo-vite-vue3仓库中去gitpullgitadd.gitcommit-m"提交代......
  • Vue框架快速上手
    Vue基础vue指令内容绑定v-text设置标签的内容一般通过双大括号的表达式{{}}去替换内容{{hello}}v-html与v-text类似区别在于html中的结构会被解析为标签设置元素的innerHTML,v-text只会解析文本事件绑定v-on可以简写为@,绑定的方法在methods中显示切换v-show原理......
  • Vue
    Vue.js快速入门一、前端技术栈1、HTML:超文本标记语言。2、CSS:样式层叠器。3、javaScript:弱类型脚本语言,常用于动态DOM操作。常用:ES5(所有浏览器支持)、ES6(主流使用,主流浏览器支持,可通过WebPack脚手架编译成ES5语法)。4、JQuery:大家熟知的JavaScript框架,优点是简化了......
  • 自动化构建:提高开发流程效率与质量的关键工具
    ......
  • 微前端:构建模块化、可维护的现代Web应用生态系统
    ......
  • JavaScript框架:构建交互性、现代化Web应用的利器
    ......
  • 选择正确的开发框架:构建高效、可维护的应用程序
    ......