VUE对象初始化流程初探

最新推荐文章于 2024-04-27 03:57:01 发布

JDBOY_DEBUG

最新推荐文章于 2024-04-27 03:57:01 发布

阅读量1.7k

点赞数

分类专栏： vue笔记文章标签： vue 笔记

本文链接：https://blog.csdn.net/y645633369/article/details/96021585

版权

vue笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

VUE对象初始化流程初探

VUE对象初始化流程初探

项目建立起来了,路由也设置好了,现在开始准备些VUE发现写着很吃力啊,饭要一点一点吃,既然吃力说明自己的基础功不够,那就在去研究简单的事情吧,简单的事情积累的多了,就不是简单的事情了.

index.html–定义与VUE对象绑定的元素

网页打开的第一个肯定是index.html这个文件啦
因为我的项目是使用的vue-cli来构建的,所以里面没有vue的script引入语句也没有任何的script语句引入,应该是在编译时自动导入了,
这个文件最关键的地方在于在div中的id属性了,这个id属性在后面需要用到

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>VUE学习笔记</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js–初始化vue对象

这个js文件就是第一个执行的脚本文件了,里面就是初始化了VUE对象,
先来看看代码在分析

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

一进来就引入了vue框架,app组件实体,router框架.
Vue.config.productionTip = false设置当前环境为开发环境
剩下就就是new一个vue对象了,
el属性是说明当前这个VUE对象是与id为app这个元素绑定
并且传入了router对象,
components属性设置了当前元素使用app这个组件类渲染(app是App.vue这个文件)
template属性设置了这个vue对象的标签(这是vue的简写方法对应:<App></App>)

App.vue–将要渲染的组件

这个文件就是经过上面的流程最终生成的第一个VUE对象对应的组件

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>

因为我也是新手,说下自己目前知道的东西,以后慢慢添加

组件结构

样例

<template>
<div></div>
</template>
<script>
export defalut{}
</script>

template标签是结构,决定了组件里面的布局
注意:
template标签里面只能有一个元素
export defalut{}语句是定义了对应当前组件的数据模型对象,里面可以包含变量,方法

router-view -结束

看到App.vue组件中只有一个router-view标签就知道到这里结束了,
在src->router->index.js文件中定义了当路由为/时对应需要渲染的组件为HelloWorld.vue组件

JDBOY_DEBUG

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE对象初始化流程初探

文章目录VUE对象初始化初探index.html--定义与VUE对象绑定的元素main.js--初始化vue对象App.vue--将要渲染的组件组件结构router-view -结束VUE对象初始化初探项目建立起来了,路由也设置好了,现在开始准备些VUE发现写着很吃力啊,饭要一点一点吃,既然吃力说明自己的基础功不够,那就在去研究简单的事情吧,简单的事情积累的多了,就不是简单的事情了.inde...
复制链接

扫一扫

专栏目录