手撕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语法,实现 ...
随机推荐
- 基于C++11特性的线程池
写在前面:本文学习自基于C++11实现线程池,代码部分均属于该博主,自己只是想记录以下自己的认知,并以这种方式加深一下自己对于多线程的理解 1 前置知识 RAII管理机制 简单来说RAII机制是一种对 ...
- Pycharm 2023 年最新激活码、破解教程，亲测有用，永久有效
申明:本教程 Pycharm 破解补丁.激活码均收集于网络,请勿商用,仅供个人学习使用,如有侵权,请联系作者删除.若条件允许,希望大家购买正版 ! PS: 本教程最新更新时间: 2023年2月2日~ ...
- MB51增强
一.在MB51报表中新增列 包含文件RM07DOCS_GENERATED的itab结构中,新增字段 在RM07DOCS中的detail_list子例程中添加查询逻辑 在子例程build_fieldca ...
- Jetpack初步了解
1.为何要引入Jetpack呢? 通常来说,一个Android应用程序至少需要一个Activity,当我们开发小型Android程序时,可能会将大部分代码写在Activity/Fragment中,例如 ...
- Find (and kill) process locking port 9000 on Mac
You can try netstat netstat -vanp tcp | grep 9000 For macOS El Capitan and newer (or if your netstat ...
- 极速生成缩略图，Serverless 支撑赛事转播锁定冬奥亮点
作者 | 西流.筱姜 "北京冬奥会在开赛的第四天便成为了历史上收视最高的一届冬奥会,其转播内容总生产量将达 6000 小时,超过平昌冬奥会的 5400 小时.关注北京冬奥会的人群比往届都 ...
- vue 基于axios封装request接口请求——request.js文件
https://blog.csdn.net/m0_67393593/article/details/123266577?utm_medium=distribute.pc_relevant.none-t ...
- KVM 核心功能：磁盘虚拟化
1 磁盘虚拟化简介 QEMU-KVM 提供磁盘虚拟化,从虚拟机角度看其自身拥有的磁盘即是实际的物理磁盘.实际上,虚拟机读写的磁盘数据保存在 host 上的物理磁盘. QEMU-KVM 主要有如下几 ...
- MyBatis——第一个程序
MyBatis1:初识 MyBatis第一个程序 流程:搭建环境–>导入MyBatis–>编写代码–>测试 1.创建一张User表. 关键字id.username.pwd 2.导入相 ...
- Git-基本介绍