您当前的位置:网站首页 » 实用技术

栏目导航

站内搜索









对vue中index.html,main.js和app.vue的理解

先来个demo

说起来vue的项目,我们所需要用到的并不是太多,当然,这里面也有许多非常重要的东西,讲正题之前,我们看个DEMO(新建个html,直接引入vue)。

	let contnet = Vue.extend({
        template: `<p>我就是{{name}},如何?</p>`,
        data: function () {
            return {
                name: '秦始皇'
            }
        }
    })
    let vm = new contnet()
    vm.$mount('#box')12345678910
	<div id="box">
		{{name}}	</div>123

上述代码是否看着非常眼熟?没错!这就是你在脚手架中的index.html和main.js中所用到的。运行上述代码后,你会发现你的浏览器中已经渲染出"

我就是请始皇,如何?"。

我们可以把“id=box”这个标签理解为根,我们只是将我们创建的实例对象挂载进我们的box中,然后通过m o u n t 方 法 进 行 解 析 , 从 而 渲 染 出 来 。 ( 如 果 是 纠 结 mount方法进行解析,从而渲染出来。(如果是纠结mountmount实现原理的同学可以自行百度,VUE中说到渲染,归根结底离不开template,render,creatElement,就这样。只不过中间许多东西需要考虑处理。难点也就是这些需要处理的东西,建议看的时候,先看整体部分,再拆开看,不懂的再百度,百度不出来就自己写个demo实验,个人学习方式是这样)

所有代码如下图:
在这里插入图片描述
在这里插入图片描述

index.html和src文件中的main.js,app.vue

如果上述的DEMO看懂了的话,我想对脚手架新建出来的index.html和main.js应该也就不算陌生了吧?话不多说上图!

图一
图二
图三

  1. 我们先看看index.html,里面并没有太多的东西,也是我们所熟悉的html,里面只有一个ID为app的div标签。如果做响应式或者移动端的同学们,你们的meta还是加进这里面哦。如果你问这是单页面的项目,如果你有多个title应该怎么办??那么,你猜(先不提这个,凌晨12点了。。赶着正题先说,后续路由部分几乎可以满足你的所有需求。)?

  2. 我们再看一下main.js文件,这个文件就是vue-cli中js的主入口文件,你的所有JS几乎都会通过它来引入。除了上面的一堆import引入的东西之外,还有一个Vue.config.productionTip = false这个弹消息的东西,重点就是下面的new Vue了。我们可以看到:

new Vue({
  router,
  store,
  render: h => h(App)}).$mount('#app')12345

我们的vue的实例直接挂在了 #app 上面,router是路由部分,路由控制着每个页面组件,store暂且不提,render函数入参为组件App,再来看下上面有个import如下:

import App from './App.vue'1

render函数接收三个参数,返回一个虚拟节点,这个节点就是我们需要渲染的。(详细原理可查阅相关资料,东西比较多,就不说了。)

我们的new vue实例中已经有APP组件作为入参通过render函数的处理之后再返回的节点,再通过$mount渲染进我们的index.html中的“id=box”的div中。

再看看APP.vue,我们通常理解为根组件,所有的组件都是它的子组件。在根组件中再使用router-view组件,路由中匹配到的所有的组件都会通过它进行渲染。

好了,这三个文件作用基本上都说完了,如何联系的,大致也就如上所述。(如果有不对的,可以提出来哦,我会认真改正的,谢谢咯,本来打算今天将目录架构搭以及路由部分解决的,想想这基础的东西总得知道一下吧,还是先说这个吧,下节再说项目正式创建的部分。)

题外话: template和render函数

这两个都是用于渲染dom节点的,只不过其中template是先转为ast语法树,ast语法树又转化为render函数,因为render函数返回的是虚拟节点,它又通过path和dom diff的算法来生成真实的dom节点。详细部分喜欢的可以再百度一下具体实现的原理。