vue脚手架安装

1.脚手架创建
在电脑上安装淘宝镜像 
npm install -g cnpm --registry=https://registry.npm.taobao.org


(1)全局下载vue脚手架: npm install -g @vue/cli  (只需要执行一次 今后就不用执行了)

(2)vue --version查看版本

(3)cd 到你要创建的项目文件夹下

(4)vue create 你的项目名

(5)下载好项目之后   cd到你的项目名下

(6)npm run serve 启动项目

单文件组件
就是以.vue结尾的文件 (template是写html的   scripte是写js的  style是写css的)


当我们拿到一个空项目之后需要删除一些默认的内容
(1)去components文件夹下 删除HelloWord.vue文件
(2)来到app.vue中删除对于helloword文件的引用 调用  使用

组件
就是用来封装可以重复使用内容  组件的本质就是自定以标签

那我怎么写组件?
组件写在components文件夹下  并且以.vue结尾  并且写上templkate script style

组件怎么使用?
要使用组件分为三步  
 1.引用  
 // import 给你引得这个文件起个名字方便使用 from 你引用文件的地址
import Com from "./components/com.vue"
 2.调用  
 需要在components:{
     你引用组件的名字
 } 
 3.使用
 <关键字/>
 <关键字></关键字>

 组件的坑1
 组件的template中如果有多行标签  必须必须必须要有一个父节点包裹

 组件的坑2
 我想在组件中使用data模型数据怎么办?
 如果现在。vue文件中写data模型数据语法有所变化
 data(){
     return {
         变量名:变量值
     }
 }

 基本组件中使用的之前学习到的vue属性  处理data以外别的内容使用方式全部一模一样

组件中css  style部分
scoped  当前样式仅对当前组件生效


父子组件----就是组件与组件之间的嵌套关系

父子组件的作用域
组件与组件之间是有用完成的独立的作用域  所以组件与组件之间数据不互通不共享

但是数据可以用其他一些方式进行传递 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值