Vue的历史
Vue的作者
中文名尤雨溪，英文名Evan You。本科就读于美国谢尔盖特大学，艺术与艺术专业，获得帕森设计学院艺术硕士，毕业后在Googel Creative Lab 担任UI相关工作。之后转为全职JavaScript开发者，现为独立开发者。
Vue Cli主要维护者
蒋豪群，英文ID为sodatea,曾就职于阿里巴巴和蘑菇街。2018年起成为全职开源开发者。
Vue的历史
2013年，0.6-0.7版2014年，0.8-0.11版2015年，1.0版2016年，2.0版2019年，2.6版2020年，3.0版
Vue的学习路线
@vue/cli
使用@vue/cli
- 全局安装
npm install -g @vue/cli或者yarn global add @vue/cli - 创建目录
- 选择配置
- 进入目录，运行
yarn serve开启webpack-dev-server - 使用
webStorm或VSCode打开项目开始CRM - 进入
@vue/cli官网查看资料，学习
使用codesandbox.io新建
可以登录沙盒网站创建vue项目，登录后只能创建50个项目，不登录可以创建无数个。并且用户也可以在该网站下载代码
Vue实例
使用Vue实例
方法一： 从HTML得到视图。这种方法称为完整版Vue,同时包含编译器和运行时的版本。通过CDN引入vue.js或者vue.min.js可以做到。也可以通过import引用vue.js或者vue.min.js。特点：体积大，功能强
方法二： 使用JavaScript构建视图, 使用vue.runtime.js, 过程比较麻烦，也叫运行版。特点： 体积小，功能弱
方法三： 使用vue-loader。可以把.vue文件翻译成h构建方法。但是这样做HTML就只有一个div #app, 对SEO不友好。特点：开发时使用完整版，用户使用运行版。
SEO
SEO：Search Engine Optimization, 搜索引擎优化。搜索引擎根据curl结果猜测页面内容。如果页面都是由JS创建的diV组成的， 那么curl不能得到内容。
解决办法: 给curl一点内容。原则: 让curl得到页面的信息，SEO就能正常工作。例如添加信息在title,description,keyword,h1,a里面。
完整版 VS 运行版
Vue的两个版本分别是完整版和运行时版本，文件名分别是 vue.js 和 vue.runtime.js，vue.js 包含 vue.runtime.js 中的内容，它多了一个编译器。如果只说这两个版本的区别，其实文章到这里应该结束了，但是我们可以通过这两个版本分别引出了 Vue 实例的几种使用方法。
完整版：使用 HTML 构建视图
因为完整版多了一个编译器，这个编译器的作用就是用了将HTML 字符转换成运行时版本中的 render 函数，所以可以直接使用 HTML 标签构建视图，也可以传入一个字符串给template选项来构建
// html
<div id='app'>
{{msg}}
</div>
**********
new Vue({
el:'#app',
data(){
return {
msg:'hi'
}
}
})
// template
<div id='app'></div>
**********
new Vue({
el:'#app',
template:'<div>{{msg}}</div>',
data(){
return {
msg: 'hi'
}
}
})
运行版: 使用 JS 构建视图
运行时版本使用来 JS 创建 Vue 实例、渲染虚拟 DOM，简单来说就是使用 render 函数
new Vue({
data(){
return {
msg:'hello'
}
}
render(h){
return h('div',this.msg)
}
})
推荐方法： 使用非完整版，配合vue-loader和vue文件。
- 提升用户体验，减小
JS文件体积，使用非完整版，只支持h函数 - 提升开发体验，直接在vue文件里写
HTML标签，不写h函数 - 利用
vue-loader把vue文件里面的HTML转化为h函数
Vue实例的作用
-
Vue实例类似于jquery实例: 封装了对
DOM和data的所有操作 -
操作DOM: 操作
DOM,监听事件 -
操作data: 对数据进行增删改查
-
没有封装ajax: 需要使用
axios的ajax功能
