Vue
- 读作view(/vjuː/),意为MVC中的V
MVC中的V是Vue的重点,M和C则被简化
–资料来源于饥人谷
- 作者
尤雨溪尤大,英文名 Evan You。
本科就读于美国科尔盖特大学,艺术与艺术史专业,帕森设计学院艺术硕士,毕业后在Google Creative Lab担任UI相关工作后,后来转为全职JavaScript开发工程师。现为独立开发者,靠每个月十几万以上的捐款生活还有其他赞助。–非科班学前端也能很厉害。
- 主要作品
Vue、Vue Router、Vuex、@vue/cli
- Vue热度比较
全球范围来看,Vue用户量是React用户量的一半。
- 问题
用Vue的大部分是中国人?
个人认为:是的。感觉中国人的比例可能超过80%
原因:Vue的中文文档写得真是好
Vue和React学哪个好?
结果:都要学,小孩子才做选择
知识:Vue和 React越来越相似了,尤其是Vue 3
能力:如果你学会了其中一个,不可能不会另一个
顺序:先Vue再React或者先 React再Vue都行
- 学习途径
以后想要更厉害,英语要好。
- Vue自学路线图
项目搭建
响应式
目标一:搞出一个使用Vue的项目
安装vue-cli先:
我喜欢命令到达要特定目录下再全局安装
yarn global add @vue/cli
或者
npm install -g @vue/cli
安装完后可以用 vue --version
看版本号看安装是否成功
然后就可以使用vue create 目录名
创建
具体步骤
一些废话:
- 方法一:使用@vue/cli
搜索@vue/cli,进入官网
打开文档,打开「创建一个项目」章节,然后 CRM !按着文档走
-
- 如何系统学习Vue
用CRM把所有文档都过一遍!
使用vue-cli
-
- 本次vue学习选项
注意:
-
选错了请Ctrl+C中断然后重来
-
没有截图的都使用默认选项
-
这次的选项只适合本次学习,如果是真实项目,请自行斟酌选项
–运行vue create 目录名
步骤开始
请选择一个配置,自学的话推荐选默认的,我这里选择手动选择特性。
上下键移动,空格选中CSS预处理,单元测试。完成回车
其他没截图的选择默认。dart-sass,eslint
提交的时候再运行lint,告诉代码错哪了
使用单元测试方案
其他没截图的选择默认。默认文件分开放还是放在package.json。
Save this as a preset for future projects? (y/N)是否把刚才的选项作为未来项目的默认值,选择y意味着不用再改了,但是以后有改的可能不知道在哪改,建议n
这就成功了
命令行start .
(mac:open .
)打开当前目录,把项目拖进VS
打开终端运行yarn start
打开链接运行成功。
- 方法二:还可以使用codesandbox.io直接在线创建一个vue的项目。
如何使用Vue 实例
vue.js和vue.runtime.js的使用
方法一:从 HTML得到视图
可以从bootCDN通过script引用vue.js或 vue.min.js即可做到
也就是文档里说的完整版Vue。mvc视图没有写在js里面,直接写在了页面里面,引入后会得到一个全局变量。
也可以通过import引用vue.js或者vue.min.js
不同版本解释详情看文档这一节
方法二:用JS构建视图
还是看文档链接,使用vue.runtime.js(运行时版)
只要从html变成页面中的东西,完整版就支持,运行时版就不支持
以我这种小白来说肯定是完整版好用,但实际上是运行时版好,更独立
(画图说明)
完整版会占用更多的代码体积,文档上也说了因为运行时版本相比完整版体积要小大约 30%,所以应该尽可能使用这个版本。
运行时版没有compiler,所以没有办法把html变成节点,但是可以用webpack进行翻译,使用vue-loader
方法三:使用vue-loader
可以把.vue文件翻译成h(createElement)构建方法,单文件组件
一个单文件组件示例:
- src目录下新建一个Demo.vue文件
写入html,script,css
<template>
<div class="red">
{{ n }}
<button @click="add">+1</button>
</div>
</template>
<script>
export default {
//除了视图外其他的选项
data() {
//注意:如果用vue-loader写的,data必须是一个函数
return {
n: 0,
};
},
methods:{
add(){
this.n +=1
}
}
};
</script>
//写css
<style scoped>
.red{
color: red;
}
</style>
- 再在main.js里引入
import Demo from './Demo.vue'
new Vue({
el: '#app',
render(h){
return h(Demo)
}
});
但这样做HTML就只有一个div#app,内容空的,最后会被替换成.vue里的内容。SEO 不友好,curl之后是一堆js渲染进去的代码。无法得到主要内容和相关内容,怎么办呢?
- SEO友好
SEO,搜索引擎优化
你可以认为搜索引擎就是不停地curl
搜索引擎根据curl结果猜测页面内容
如果你的页面都是用JS创建div的,那么curl就很瞎
- 那怎么办?
很简单,给curl 一点内容
把title、description、keyword、h1、a 写好即可,可以看淘宝网页源代码怎么做的。
原则:让curl能得到页面的信息,SEO就能正常工作
怎么让网页到第一名?浏览的人足够多即可,或者花钱
Google其实能获取JS创建的内容,但不要依赖它。
深入理解两种区别
完整版功能强,体积大。
运行时版功能弱,体积小,但是通过webpack可以让写的时候像是用完整版,但用户下载只下载运行时版。
用一个表再来看看两个版本的具体区别吧
Vue完整版 | Vue运行时版 | 评价 | |
---|---|---|---|
特点 | 有compiler | 没有compiler | compiler占30%体积 |
视图 | 写在HTML里 或者写在template选项 | 写在render函数里,用h来创建标签 | h是尤大写好传给render的 |
cdn引入 | vue.js | vue.runtime.js | 文件名不同,生成环境后缀都为.min.js |
webpack引入 | 需要配置alias | 默认使用此版 | 尤大配置的 |
@vue/cli引入 | 需要额外配置 | 默认使用此版 | 尤大和蒋豪群配置的 |
- 表解
完整版
对应文件名:从CDN引入vue.js ; vue.min.js 。可以从HTML或template直接得到视图,有compiler编译器可以将含有占位符{{}}或者条件语句变成真实的DOM节点,后面再修改会直接修改DOM节点无需再编译一遍,但compiler比较复杂会占用一定体积
runtime运行时版
对应文件名:vue.runtime.js ; vue.runtime.min.js。没有compiler,不能将HTML变成节点。webpack通过vue-loader(在yarn build里已设置)会调用compiler将html变成h(‘div’,this.n)
最佳实践
总是使用运行时版,然后配合vue-loader和vue文件
- 思路:
-
保证用户体验,用户下载的JS文件体积更小,但只支持h函数
-
保证开发体验,开发者可直接在vue文件里写HTML标签,而不写h函数
-
脏活让loader做,vue-loader把 vue文件里的HTML转为h函数
- 引用错了会怎样,可以自己尝试看看
-vue.js 错用成了vue.runtime.js
无法将HTML编译成视图
-vue.runtime.js 错用成vue.js
代码体积变大,因为vue.js有编译HTML的功能