手撕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语法,实现 ...
随机推荐
- Java 项目工程搭建 --创建子模块(Spring Initializr)
一下篇,常用 Java 项目工程搭建 --创建子模块(依赖父工程) 也不算常用,常用的是 ctrl+c.ctrl+v ,哈哈 Package要手动改下,生成的很丑 选能支持 Alibaba Cl ...
- ChatGPT访问互联网，不神秘了
我测试了一下,它其实调用了微软必应的api,搜索了关键词而已 比如我问它:https://twitter.com/elonmusk 马斯克最近在忙什么 它的回答是: 近期,马斯克在做的一些事情包括: ...
- 【Vue day01】前端发展介绍 Vue的快速使用 插值语法 指令系统之文本指令、事件指令、属性指令
目录 前端发展介绍 Vue框架入门 M-V-VM思想(重要) 组件化开发 单页面应用 Vue的快速使用 前期准备 快速使用 对象与标签绑定 查看Vue对象 插值语法 三目运算符 指令系统之文本指令 v ...
- AtCoder ABC 049 C - 白日梦 （DP写法）
题目传送门:Here Description 提供由小写字符构成的长度N的字符串S. 请将S分割成几个连续的字符串,并判断这些字符串是否能够全部变成"dream"."dr ...
- 版本升级 | v1.0.13发布，传下去：更好用了
新发行版来啦~ 本次更新主要聚焦兼容性的提升及结果报告格式的增加,另外对部分解析逻辑及使用体验进行了优化.在这里特别鸣谢大佬@Hugo-X在社区仓库提交的PR~ 后续,OpenSCA项目组会继续致力于 ...
- vue-echarts之折线图以及双Y轴折线，柱状混合图，部分属性记录
https://blog.csdn.net/qq_41139348/article/details/106870005 https://segmentfault.com/a/1190000021898 ...
- 解决Xshell/Xftp提示“要继续使用此程序必须应用到最新的更新或者新版本”（临时规避和彻底解决方案）
一.xshell与xftp登录时提示,但是更新却又每次都失败,无法登录 二. 临时规避方案:手动修改日期为1年前,问题解决软件可以打开,但是每次启动都要手动修改,甚是麻烦 三.彻底解决方案,修改xs ...
- The requested URL could not be retrieved
在开发过程中,调用对外接口,返回了一长串的标签提示,如下 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "ht ...
- .Net 使用 MongoDB
1.安装nuget包 MongoDB.Driver 2.简单代码 using MongoDB.Bson; using MongoDB.Driver; using System.Buffers; usi ...
- 百度网盘(百度云)SVIP超级会员共享账号每日更新（2023.11.21）
百度网盘会员账号共享(11.21更新) 账号:tgc91660 密码:6858hykh 账号:ofj51327 密码:rvzp3251 账号:5799osrb 密码:862lwtr 账号:3730sw ...