手撕Vue-构建Vue实例
前言
要想使用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>
手撕Vue-构建Vue实例的更多相关文章
- 新手vue构建单页面应用实例
本人写的小程序,功能还在完善中,欢迎扫一扫提出宝贵意见! 步骤: 1.使用vue-cli创建项目2.使用vue-router实现单页路由3.用vuex管理我们的数据流4.使用vue-resource请 ...
- webpack构建vue项目（配置篇）
最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...
- Vue 介绍,优点,实例
一 认识vue 1.什么是vue 以数据驱动的web渐进式框架 三大主流框架: Angular React Vue 设计模式:MVVM 2.vue优点 - 以数据驱动,不直接操作DOM,效率高- 单页 ...
- Vue构建项目
构建Vue项目 按照官网教程安装 //先安装脚手架 cnpm i -g vue-cli //查看项目目标列表: webpack browserify pwa 等项目模板 vue list //使用we ...
- 从无到有构建vue实战项目（四）
六.webpack的安装和配置 为了快速构建vue项目,webpack是一个必不可少的工具,我们先来安装它,附上官网地址:https://www.webpackjs.com/ 要安装最新版本或特定版本 ...
- 使用Laravel 和 Vue 构建一个简单的SPA
本教程是作者自己在学习Laravel和Vue时的一些总结,有问题欢迎指正. Laravel是PHP的一个框架,Vue是前端页面的框架,这两个框架如何结合起来构建一个SPA(Single Page Ap ...
- 前端（二十）—— vue介绍：引用vue、vue实例、实例生命周期钩子
vue 一.认识Vue 定义:一个构建数据驱动的 web 界面的渐进式框架 优点: 1.可以完全通过客户端浏览器渲染页面,服务器端只提供数据 2.方便构建单页面应用程序(SPA) 3.数据驱动 =&g ...
- 手摸手带你理解Vue的Computed原理
前言 computed 在 Vue 中是很常用的属性配置,它能够随着依赖属性的变化而变化,为我们带来很大便利.那么本文就来带大家全面理解 computed 的内部原理以及工作流程. 在这之前,希望你能 ...
- 手摸手带你理解Vue的Watch原理
前言 watch 是由用户定义的数据监听,当监听的属性发生改变就会触发回调,这项配置在业务中是很常用.在面试时,也是必问知识点,一般会用作和 computed 进行比较. 那么本文就来带大家从源码理解 ...
- Vue项目入门实例
前言 本文记录Vue2.x + Element-UI + TypeScript语法入门实例 为什么要用TypeScript? 1.TypeScript是JavaScript的超集,利用es6语法,实现 ...
随机推荐
- 4个工具，让 ChatGPT 如虎添翼！
LightGBM中文文档 机器学习统计学,476页 机器学习圣经PRML中文版 经典著作<机器学习:概率视角 让 ChatGPT 如虎添翼! ChatGPT 很好用,其核心是prompt的运用, ...
- LayUI多文件上传，支持历史上传预览
记录一次项目开发中,LayUI多个图片进行优化,需要支持多个图片上传.可删除某一个图片.支持加载上次上次图片. 页面代码: <div class="layui-upload" ...
- pikachu靶场
pikachu靶场 基于表单暴力破解 看一下界面,有两个输入框,使用暴力破解使用Cluster bomb 前提须知是 Sinper 对$$符号标记的数据进行逐个替换 Battering ram 对$$ ...
- Qt 的Cmake方式如何创建资源文件和添加类
CLion(误,QT Creator) 添加资源文件时 选择Qt 然后选择Qt Resource File 单击choose,然后给你的资源文件输入一个名字比如res单击下一步,然后完成,保存 这时候 ...
- Educational Codeforces Round 98 (Rated for Div. 2) （A - E题题解）
呼,熬过一场考试,补下题吧 A. Robot Program 在一个二维无限方格中,初始时你在格子里,每秒你有5种决策:选择移动到上下左右四个格子中的一个或者停留在原地.你不能连续两秒做相同的决策,问 ...
- docker 容器ip查看及 网络配置区别
本文为博主原创,未经允许不得转载: 1. 查看容器ip: 方法一:查看所有容器的ip docker inspect --format='{{.Name}} - {{range .NetworkSett ...
- 基于python的租房网站-房屋出租租赁系统（python+django+vue）
该项目是基于python/django/vue开发的房屋租赁系统/租房平台,作为本学期的课程作业作品.欢迎大家提出宝贵建议. 功能介绍 平台采用B/S结构,后端采用主流的Python+Django进行 ...
- CSS : 使用 z-index 的前提
使用 z-index 前 , 需要将元素 定位设置为 position : relative .
- CSS - 设置自动等比例缩放
img { width: 100vw; height: 100vh; object-fit: cover; }
- vue3 路由页面返回时，恢复滚动条位置
首先,路由必须是KeepAlive模式 <script setup lang="ts"> import { onActivated } from "vue&q ...