继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【九月打卡】第7天 vue入门学习

逆流的鱼_飞
关注TA
已关注
手记 24
粉丝 1
获赞 0

课程名称:vue2.5入门

课程章节:

第4章 Vue-cli的使用

主讲老师:Dell

课程内容:

     Vue-cli的使用

课程收获:

1、先去安装node,安装完node自动安装npm

1)、npm install --global vue-cli 全局安装vue脚手架工具  vue-cli

2)、vue init  webpack   my-project   

创建一个基于webpack模版的新项目 项目名称不能有大写字母

3)、cd my-project   进入到项目目录

4)、npm run dev   运行项目

 

自动生成代码目录结构

http://img4.sycdn.imooc.com/631d78430001484813620727.jpg

build目录下放置的是项目的webpack配置文件,可以不动

config是针对线上环境和开发环境的配置文件,也可以不动

node_modules 指的是项目的依赖

src 指的是源代码放置的目录

static放置的是静态的资源

src中的main.js文件是整个项目的入口文件

vue-cli提供了一种新的vue的编码语法:单文件组件(一个.vue文件中包含了一个组件里必须的所有内容)

vue-cli的优势:

可以使用es6;一个组件是一个.vue的文件所定义的,实现了组件的封装。


2、template模板里面只能有一个包裹元素,最外部用一个<div>包裹

data以前是个数据 ,现在是个函数

父组件通过属性的形式给子组件传值

子组件在props里面接收,声明对content(父组件所传递值)的使用


3、组件样式作用域:通过在style上添加scoped标签将作用域限制到本组件中。如果不添加该标签,则将变为全局样式

 


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP