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组件
扫一扫
997
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
