1、 Vue中的全局变量是通过 Vue.prototype实现的
2、vue入口
1)main.js 是我们的入口文件,主要作用是初始化vue实例并使用需要的插件
2)App.vue是我们的主组件,所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件。
index.html文件入口
src放置组件和入口文件
node_modules为依赖的模块
config中配置了路径端口值等
build中配置了webpack的基本配置、开发环境配置、生产环境配置等
3、vue周期
1、creadted:
一般creadted钩子函数主要是用来初始化数据。在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图
2、mounted
钩子函数一般是用来向后端发起请求拿到数据以后做一些业务处理。就是模板渲染完成(就是html页面和页面的数据加载(data{}函数之后)完成)以后才会被调用。Dom操作一般是在mounted钩子函数中进行的
通常created使用的次数多,而mounted通常是在一些插件的使用或者组件的使用中进行操作,比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步,而如果你写入组件中,你会发现在created中无法对chart进行一些初始化配置,一定要等这个html渲染完后才可以进行,那么mounted就是不二之选。下
3、computed:{}计算属性,
什么是计算属性呢,我个人理解就是对数据进行一定的操作,可以包含逻辑处理操作,对计算属性中的数据进行监控。计算属性是基于它的以来进行更新的,只有在相关依赖发生改变时侧能更新变化,以函数的形式返回结果。然后可以像绑定普通属性一样在模板中绑定计算属性。
在Vue中,使用methods可以做computed同样的事情,但两者之间还是有所差别的
computed是计算属性,事实上和data对象里的数据属性是同一类的
4、methods
里面定义的是函数,要像JavaScript中的function()函数这样去调用它
methods里面的函数就是一群“直男”,如果有其他父函数调用它,它会每次都执行并返回结果,即使这些结果很可能是相同的,是不需要的;而computed是一个“心机婊”,它会以Vue提供的依赖追踪系统为基础,只要依赖数据没有发生变化,computed就不会再度进行计算。
5、模板component
<div id="app">
<haha></haha>
</div>
let vm = new Vue({
el:"#app",
data:{
},
components:{
"haha":{
template:"<div>哈哈哈<div>"
}
}
});
6、props
组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项。在 Vue 中,父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息