vue的基础使用方法

在使用vue的时候我们需要先下载对应插件Vue-cli,有两种方式可以在控制台或者终端安装npm install -g @vue/cli 或者 yarn global add @vue/cli 安装好以后我们就可以检查型号可以看到我们下载的型号是4.5.3
此时我们就安装成功了需要的插件接下来我们可以在终端里创建项目了。下面我们就不在截图,直接用文字表述了,可以直接按照下面的步骤直接在终端输入。(终端直接右击选择在终端打开会比较方便哦)

  1. vue create . ()注意后面是有点的)
  2. 按向下的箭头选择 Manually select features
  3. 一般情况下可以选择(用空格控制选择与否) Choose Vue version , Babel , CSS Pre-processors , Linter / Formatter
  4. 2.x
  5. Sass/SCSS (with node-sass)
  6. ESLint + Standard config
  7. Lint and fix on commit
  8. In dedicated config files 选择y
  9. 最后一步保存一个预设的名字,然后回车安装
    此时会产生很多的文件,我们一般在src文件夹里编程,其他这里就不过多介绍,需要的可以自行百度 ,在这里插入图片描述
    如图所示,在src文件夹里会有两个常用的,components文件夹和App.vue文件,在components文件夹里我们可以写子组件,App.vue文件会直接与index.html文件中的div的id为app的节点相连接,在引用时候会直接把模板内容替换掉该div。
    下面就是关于父子组件连接的一些操作,首先要新建一个子组件文件

在这里插入图片描述
创建的组件分为三部分如图(每个组件都是这样的三部分),
为了方便学习,我们直接把代码放出来,直接看着代码学习。
在这里插入图片描述
子组件和父组件两个区域,
父组件需要引入子组件,然后就有两种方式注册,一种是全局注册,如上图左侧被注释的1和2 ,还有一种是局部注册,如上图components:{one}这种形式,
子组件就是需要接受父组件创传过来的数据了,如上图右侧用props的方式接收,
最后在父组件调用子组件就可以实现子父组件之间的通讯了。。。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值