手撕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语法,实现 ...
随机推荐
- 背景 | 基于 Transformers 的编码器-解码器模型
!pip install transformers==4.2.1 !pip install sentencepiece==0.1.95 Vaswani 等人在其名作 Attention is all ...
- windows使用rclone挂载alist为本地磁盘，设置开机自启
前言 实现在windows下将alist挂载为本地磁盘,并设置开机自启,使得重启后依然生效. 教程 下载软件 Rclone: Rclone downloads WinFsp: https://winf ...
- 01-什么是 Java：Java 初学者指南
什么是Java? Java 是一种用于互联网分布式环境的面向对象编程语言.它是一种高级语言,也易于阅读和理解.有了它,开发人员可以"编写一次,随处运行"(WORA),这意味着编译后 ...
- Java | Spring Boot统一日志框架
在项目开发中,日志十分的重要,不管是记录运行情况还是定位线上问题,都离不开对日志的分析.在 Java 领域里存在着多种日志框架,如 JCL.SLF4J.Jboss-logging.jUL.log4j. ...
- SpringBoot 项目实战 | 瑞吉外卖 Day01
一.软件开发整体介绍 1.软件开发流程 2.角色分工 项目经理:对整个项目负责,任务分配.把控进度 产品经理:进行需求调研,输出需求调研文档.产品原型等 UI设计师:根据产品原型输出界面效果图 架构师 ...
- AIO异步通信。BIO同步阻塞式IO， NIO同步非阻塞通信。
IO 什么是IO? 它是指计算机与外部世界或者一个程序与计算机的其余部分的之间的接口.它对于任何计算机系统都非常关键,因而所有 I/O 的主体实际上是内置在操作系统中的.单独的程序一般是让系统为它们完 ...
- wav文件头信息
概述 最近在对接百度TTS的python接口,对接的过程中发现一些问题,记录下解决方案. 百度TTS接口返回的音频数据格式有4种,分别是mp3,pcm-16k,pcm-8k,wav(pcm-16k). ...
- C#使用迭代器显示公交车站点
public static IList<object> items = new List<object>();//定义一个泛型对象,用于存储对象 /// <summary ...
- java进阶(21)--集合基础
一.基本概念 1.数组其实是一个集合,二集合是一个容器 2.集合不能直接存储基本数据类型,也不能存java对象,存储的是引用数据类型 list.add(100); //自动装箱Integer 3.ja ...
- 操作系统OS笔记2
操作系统OS笔记2 调度和死锁 调度简介 1. 调度的基本概念 2. 调度原则 调度算法 平均周转时间: 平均带权周转时间:周转时间/服务时间 1. 先来先服务调度算法(FCFS) 当在高级调度中采用 ...