1、npm 下载vue/cli包 命令行工具 npm i vue/cli -g
2、vue create mytest //vue3.x的命令 需要再安装一个vue/cli-service
vue init webpack mytest //vue2.x的命令
3、如果用vue2.x生成项目,则用npm run dev,如果是vue3.x则用npm run serve,这里是因为配置文件不同,可以手动修改
4、runtime-compiler和runtime-only的区别是在于runtime-only生成的包比runtime-compiler小一些,main.js中渲染函数的一些区别
页面渲染的过程:template=>ast=>render=>vdom=>ui
runtime-only中省略了前边两步渲染模板的过程,直接从render开始渲染,所以会更加省时
render其实就是渲染dom树的过程,把main.js中原来渲染app的地方改成渲染DOM树,结构和虚拟DOM结构是一样的,这样在页面中生成的就是下面的样式.
所以在渲染组件的时候 render(app),就相当于把这个组件渲染在了页面
2.x版本
3.x版本
前者生成的文件中把文件都整和在public和src中,可以自行选配置
后者在选配置的时候可以按需选择需要的版本
1、创建项目名字
2、对项目做描述
3、是你的邮箱,这里回车即可
4、是否安装相应的包,路由,编码规范,这里按需选择
5、选择安装命令,用npm还是yarn
6、cd到项目里,安装相应的包,启动服务
创建组件
组件主要包含三个部分 template,script,style
模板里写内容,有父子组件的时候,子组件嵌套在父组件的里边。
script里写的是每个组件需要引入的内容,以及自身的一些属性,用export default导出,方便其他地方调用。
style里写的是template的样式,有lang=‘’属性,这里时编译css的语言,比如less,sass。还有一个scoped属性,这个属性是规定该style属性只在该组件生效。
在main中引入App.js,通过render函数将app渲染在页面,main里边也可以注册全局组件,这样注册过的组件可以在全局都可以调用。
index.html =>main.js => App.js => 子组件
父子组件传值和上篇一样
传值和传引用的区别
传值的话,在子组件多处调用,改变一处不会影响其他部分,比如number,string,boolean
传引用在子组件调用时,改变一处就会造成多处改变,比如Array,Object
1
2
点击删除某一项或者隐藏某一项
可以给元素加一个标识符,flag,点击的时候改变这个值