Vue
DAY02
MVVM
架构
M
:Model
模型层(业务逻辑层) 主要包含JS
代码,用于管理业务逻辑的实现。
V
: View
视图层 主要包含 HTML/CSS
代码,用于管理UI
的展示。
VM
:ViewModel
(视图模型层)用于将data
与视图层的DOM
进行动态绑定。
基于脚手架环境开发vue
项目
制作web项目,从小作坊状态转向工程化开发的状态就需要了解Vue
脚手架环境。脚手架开发环境将会提供一套开发标准便于工程化快速开发。
基于脚手架环境就可以生成标准化开发时所需要的项目包。
环境要求:
-
node
版本:12~16
检查
node
版本的命令:node -v
安装
nodejs
:https://nodejs.cn/download/
-
npm
,包管理工具,需要配置仓库镜像地址,改为中国仓库镜像地址。执行命令查看当前镜像:
npm get registry
设置镜像地址的命令:
# 旧版淘宝镜像 (不推荐使用) npm set registry https://registry.npm.taobao.org/ # 设置最新的国内淘宝镜像地址 npm set registry https://registry.npmmirror.com/ # 设置华为镜像地址 npm set registry https://mirrors.huaweicloud.com/repository/npm/
基于
npm
命令,全局安装脚手架工具,这样就可以通过该工具创建vue
项目了。# 命令名称 安装 全局 安装包的名字 npm i -g @vue/cli npm install -g @vue/cli # 如果是mac系统,需要提权 sudo npm i -g @vue/cli #输入密码即可
如果看到如下界面,则表示安装成功:
只要没有红色日志:ERROR 都算成功。
安装成功之后,将所有的
cmd
窗口都关闭,(重置系统环境变量),通过vue
命令来查看vuecli
的安装版本:vue --version
至此就可以通过
vue
命令生成项目包了。安装时常见错误:
network
相关错误,属于网络错误。
生成项目包
安装脚手架后,可以通过vue
命令创建完整的项目包,该项目包中将会自动创建项目所需要的基本资源及基础目录结构。
注意:
- 在哪一个文件夹中执行
vue
命令创建项目,生成的项目就会出现在哪一个文件夹中。- 创建项目所在文件夹目录不要有中文和特殊字符。
- 创建项目的目录中,不要有
vue.js
。
找一个干净地方执行命令:
# cd D:/code/VUE/day02/demo/
vue create 自定义的项目文件夹名称
# 例如:
vue create vue-pro
vueCli
将会让选择创建项目时的相关配置
后续选项全部回车即可:
后续将会安装下载整个vue
脚手架项目,安装完毕后:
当前脚手架项目已经创建完毕。该脚手架项目内部自带一个web服务器,需要执行一条命令:npm run serve
即可启动服务器。根据上述提示的命令,进入项目目录中,执行该命令即可启动项目:
npm run serve
这一条命令,将会加载当前目录下的package.json,根据相关配置,启动web服务器,启动成功后,将会占用8080端口,打开浏览器,访问地址:
http://localhost:8080
即可看到脚手架为我们创建的首页。
脚手架项目包的使用
项目包中已经设计好相关的目录结构,推荐使用单独的vscode
窗口来打开该项目,(直接打开项目目录,不要打开父目录)
注意事项,要使用vscode直接打开项目根目录,这样才可以使用vscode提供的一系列功能进行开发。
插件:
脚手架项目的基础目录结构
打开src
:
脚手架的运行过程:
当脚手架启动时,将会打开public/index.html
,并且在该网页中运行main.js
,将会创建Vue
对象,通过Vue
对象来管理 index.html
中的#app
内容的显示。初始化状态下,默认将App.vue
组件中的内容渲染到#app
中,从而看到页面效果。
所以要研究.vue
文件的写法即可搞定各种在脚手架中开发vue
项目的细节。
<template>
<div>
<h3>电影名称</h3>
<div>电影时长:117分钟</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>
template
部分用于定义当前组件的页面结构。定义的这些页面结构,最终将会被挂载在#app
中。注意:**template
中的内容有且仅有一个根元素 **。
script
部分用于定义当前组件的js
脚本。通过ES6
的export default
语法将当前组件中定义的js
对象导出到外部供vue
进行后续处理。
style
部分用于定义当前组件中标签的css
样式。
<style lang="scss" scoped></style>
lang
: 语言 需要在创建项目时选择 css pre-processors
,此处才可用。
scoped
:作用域。含有该属性的style中定义的css
样式,仅仅当前组件生效。
Vue
的常用指令
v-show
控制组件的显示与隐藏v-on
绑定事件v-bind
动态绑定属性v-text
为元素设置内容文本。类似dom.innerText
。v-html
将文本当做html
代码解析后显示在元素中。v-pre
不会将{{}}
当做vue
语法进行解析。v-for
循环输出当前元素。
v-for
的使用
v-for
用于循环输出当前元素:
<p v-for="n in 10">文本....文本{{n}} {{n}} {{n}}</p>
上述代码约等于:
for(n=1; n<=10; n++){
随意的使用n变量
dom.append(`<p>文本....文本....${n}</p>`)
}
还可以在遍历的过程中,同时访问数组中的元素与元素对应的下标:
<p class="item" v-for="(m, i) in movies" :key="i">{{m}}</p>
上述代码约等于:
for(i=0; i<movies.length; i++){
let m = movies[i]
dom.append(`<p>${m}</p>`)
}