脚手架搭建

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,点击的时候改变这个值

你可能感兴趣的:(脚手架搭建)