网络上已经有很多关于学习vue的资源和内容,官方文档更是给出了大量的知识点和使用方法给我们提供学习,可是学习归学习,如果这些内容没有应用到实际的开发当中,那也是没有什么用途的,因为工具之所以为工具,是因为在你不断的使用中,有自己的思考,有自己的判断,有自己去探索的空间。
好了,废话不多说了,下面我们来看一下官方给予的一个定义:
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。
有兴趣的同学可以详读官方文档,我们这里只是从入门讲解vue的一些基本操作和功能。
一、安装
安装有几种方式,官方推荐学习的过程中不要用脚手架去搭建项目。
1.我们可以通过最简单的
我们可以看到,其实这里主要由三大模块组成,第一个模块是:,第二个是:,第三个是:。很简答,其实就是相对于html中是css图层样式,如果不是很理解的同学可以回去看看这部分的内容,主要是修改一些样式。
template翻译上就是模板的意思,我们可以把它也理解成一个印章,即使一个印章,实际上是可以反复使用盖出很多个图形。
而我们的script中则定义了,我们这个印章要盖的内容,比如印章上需要有标题,我们就可以在data里面返回印章的标题是什么,让印章自动渲染上数据。上面显示的是export default {name: 'app'}
,这是是给这个模板命名为app,接下来我们要处理的数据则是在data里面进行绑定。后面我们会再详细讲解这部分的内容。
main.js中的内容组成
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
template: ' ',
components: { App }
})
引用官方文档中的一句话来描述就是:每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的
这个文件里面其实就是构造了一个最基础,作为整个应用程序根基的vue对象。相对于iOS来说,我个人理解这个就是一个window对象,可以挂载显示其他内容。
三,尝试修改界面内容
现在我们已经看到了有一个主界面,地址栏是:localhost:8080/#/
实际上它对应的就是一个hello.vue的页面。刚刚不是提及了app.vue的文件结构吗?其实这个界面的目录结构也是相似的,只不过内容可能会比较偏多而已。
单纯的学习没有看到效果是非常无聊的,那么我们下面来尝试改变一下代码,看看会有什么效果吧。我相信大部分学了html+css的同学都能自己手动的把界面构建出来,那么我们来看看,这代码里面有什么特别之处呢。
在写着msg的地方并没有显示
{{msg}}
这样的内容,而是被替换成了script里面的一段内容:
msg: 'Welcome to Your Vue.js App'
这里就实现了模板(
template)中的内容和
script中data的msg进行了绑定。我们把没有必要的内容先删除以便观察:
(logo是配置中app.vue中)
在我们删除了主题下面的内容后,我们的界面已经立刻刷新了。实际上我们在这里可以修改data中msg的内容,也可以立刻在界面上刷新。
export default {
name: 'hello',
data () {
return {
msg: 'hello vue!'
}
}
}
这是一个vue的最简答架构,export default
我的理解有一种”导出“的味道(输出该部分内容),在其他界面如果需要用到你的这个部分的时候,在直接import该组件的时候,大括号里面的内容会被‘’引入'',后面再理解,我们这里手写就体会一下,怎么样输出data中的数据,这个data是需要用return来返回每一项属性的内容的。
目前为止,我们的项目已经跑起来了,本节的主要内容就是学会怎么样构建项目,理解基础目录结构,了解xxx.vue的大概样式。
好了,大家先去把最基础的原型构建出来吧。