vue版本
2013年，0.6版、0.7版
2014年，0.8~0.11版
2015年，1.0版
2016年，2.0版 就已经不是单纯的mvvm框架了
2019年，2.6版
2020年，3.0版
项目搭建
Vue cli 创建项目
CLI ( @vue/cli ) 是一个全局安装的npm 包，提供了终端里的 vue 命令。 它可以通过 vue create 快速创建一个新项目的脚手架，或者直接通过 vue serve 构建新想法的原型。 你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。
安装@vue/cli
命令:yarn global add @vue/cli (yarn global add @vue/cli@4可指定版本)
创建一个项目 命令:vue create 路径
第一组选项(Babel、CSS、Linter、Unit )
第二组选项(dart-sass)
第三组(Lint and fix on commit 取消掉其它选项)
jest
n
运行提示的两句代码
start . 打开当前目录
将创建项目拖进vscode
开启yarn serve 如果看见下面的图片说明我们的项目创建成功
codesandbox.io创建项目
codesandbox.io
create sanbox 创建沙盒
exprot zip 导出文件
Browser 选项会提供一个链接预览
vue 的两个版本
完整版vue
可以通过CDN引入/NPM安装
webpack引入
也可以通过import引用vue.js或者vue.min.js
https://cdn.bootcss.com/vue/2.6.10/vue.min.js
https://cdn.bootcss.com/vue/2.6.10/vue.js
可以从HTML直接得到视图
所以可以直接将替换内容写在HTML或者template选项中
直接将html内容替换
<div id="app">{{n}}</div>
new Vue({
el:'#app',
data:{
n:0
}
})
直接将template内容替换
new Vue({
el:'#app',
template:`
<div>{{msg}}</div>`,
data:{
n:0,
msg:'我爱你'
}
})
完整版拥有conpoler(编译器)可以将html字符串含有占位符或者条件循环的语句变成真实的DOM节点
由于编译器比较复杂，复杂就代表会占用一定的代码体积，所以完整版会比非完整版的体积大30%.
非完整版
vue.runtime.min.js
非完整版的意义在于它更加独立
功能弱，但是可以通过vue-loader编译
非完整版不能从html获得视图，所以需要将替换内容传入render函数中
new Vue({
el:'#app',
render(h){
return h('div',[this.n,h('button',{on:{click:this.add}}'+1')])
},
data:{
n:0
},
add(){
this.n += 1
}
})
简单的理解template和render的关系：
template标签用于包裹住需要插入的内容，有固定的格式和语法.
而render方法会传入一个h方法，而h方法可以接收参数进行一个回调将数据渲染进页面。
具体如下:
vue单文件组件
(引入vue.runtime.js)
<template>
<div>
{{n}}
<button @click="add">+1</button>
</div>
</template>
<script>
export default {
data(){
return {n:0}
},
methods:{
add(){
this.n + 1
}
}
}
</script>
<style scoped>
.red{
color:red;
}
</style>
单组件文件可以导出传递给render函数中作者写好的函数方法进行回调。详情请看上面template和render的图解
两个版本的对比图
完整版本有complier(编译器)所以功能全，体积大，用户体验会差点，非完整版本没有compiler功能差些，但是体积小，用户体验好些，通过webpack设置加载器vue-loader帮助我们解决功能不全的问题。
