VUE
1.MVVM架构
M
:Model 模型层(业务逻辑层)主要包含JS代码,用于管理业务逻辑的实现V
:View 视图层 主要包含HTML/CSS代码,用于管理UI的展示VM
:ViewModel (视图模型层)用于将data与视图层的Dom进行动态绑定
2.基于脚手架环境开发Vue项目
①脚手架环境安装
制作web项目,从小作坊状态转向工程化开发的状态就需要了解Vue脚手架环境。
脚手架开发环境将会提供一套开发标准便于工程化快速开发。
基于脚手架环境就可以生成标准化开发时所需要的项目包。
官方文档:Vue Cli官方文档
环境要求:
1、node版本:12~16
查看版本:node -v
2、npm,包管理工具,需要配置仓库镜像地址,改为中国仓库镜像地址。
查看当前镜像地址:npm get registry
设置镜像地址的命令:
npm set registry https://registry.npmmirror.com/ (淘宝)
npm set registry https://mirrors.huaweicloud.com/repository/npm/ (华为)
基于npm命令,全局安装脚手架工具,这样就可以通过该工具创建vue项目了
npm i -g @vue/cli
常见错误:mac系统权限不足,命令前加sudo 密码 提权;network相关错误,检查镜像地址更换网络
安装成功后 重启cmd窗口(重置环境变量) 查看版本:vue --version
②创建项目包
注意:
1、在哪一个文件夹中执行vue命令创建项目,生成的项目就会出现在哪一个文件
2、创建项目所在文件目录不要有中文和特殊字符
3、创建项目的目录中,不要有vue.js
D:\Web\VUE\Day02
vue create 自定义的项目文件夹名称
例如:vue create vue-pro
VueCli 将会让我们选择创建项目时的相关配置
后面的选项全部回车即可
进入项目目录执行npm run serve即可启动项目
③脚手架项目包的使用
使用 单独vscode窗口 直接打开vue-pro文件夹
vue2推荐安装两个插件Vetur / Vue VSCode Snippets
脚手架运行过程:
脚手架启动时,将会打开public/index.html,并在该网页中允许main.js,将会创建vue对象,通过vue对象来管理index.html中的 #app 内容的显示。初始化状态下,默认将App.vue组件中的内容渲染到 #app 中,从而看到页面效果。
所以研究 .vue 文件的写法即可搞定各种在脚手架中开发vue项目的细节
template 部分用于定义当前组件的页面结构。定义的这些页面结构,最终将会被挂载在 #app 中 。
注意:template中的内容又且仅有一个根目录
script 部分用于定义当前组件的js脚本。通过ES6的export default语法将当前组件中定义的js对象到处到外部供vue进行后续处理
style 部分用于定义当前组件中标签的css样式
lang:语言 需要在创建项目时选择 css pre-processors ,此处才可用
scoped:作用域。含有该属性的style中定义的css样式,仅当前组件生效
3. 脚手架基础结构示例
绑定属性和事件在脚手架中的写法
<template>
<div>
<img width="400px" :src="`/img/${n}.jpg`" alt="" />
<br>
<button @click="n == 1 ? n = 4 : n--">上一张</button>
<button @click="n == 4 ? n = 1 : n++">下一张</button>
<h3>{{ moviename }}</h3>
<div>电影时长:{{ m }}分钟</div>
<button @click="next">换一部</button>
</div>
</template>
<script>
export default {
// 脚手架项目中 data必须已函数的方式导出,返回一个数据对象
// 返回的数据对象将会直接混入到vue对象中,成为vue对象的属性
// 为什么不直接用对象,而是用方法返回对象?
// 原因:同一个组件在未来场景下复用时,需要做到防止属性的混乱
data() {
return {
moviename: '三体Ⅰ',
m: 111,
n: 1,
}
},
methods: {
// 定义函数
next() {
this.moviename = '三体Ⅱ'
this.m = '222'
this.n = this.n == 4 ? 1 : this.n + 1
},
},
}
</script>
<style lang="scss" scoped></style>
4.Vue的常用指令
v-show :控制组件的显示与隐藏
v-on :绑定事件
v-bind :动态绑定属性
v-text :为元素设置内容文本 和{{text}}效果差不多 (类似dom.innerText)
v-html :将文本当作html代码解析后显示在元素中
v-pre :不会将 {{ }} 当作 vue 语法解析
<template>
<div>
<!-- 测试vue的常用指令 -->
<p>{{ text }}</p>
<p v-text="text"></p>
<p v-html="text"></p>
<!-- {{}}:是vue的语法,vue将会对其解析,编译 -->
<p>{{ 8 + 8 }}</p>
<!-- v-pre指令:不解析vue的花括号 -->
<p v-pre>{{ 8 + 8 }}</p>
<p v-text="`{{8+8}}`"></p>
</div>
</template>
<script>
export default {
data() {
return {
text: `<span style="color:red">
最近有什么新闻?郑州富士康...韩国梨泰院...
</span>`,
}
},
}
</script>
<style lang="scss" scoped></style>
v-for :用于循环输出当前元素
<p v-for="n in 10">文本...文本</p>
<p class="item" v-for="(m, i) in movies" :key="i">{{ m }} - {{ i }}</p>
<script>
// 等价于
for (n == 1; n < 10; n++) { dom.append(`<p>文本...文本</p>`) }
for (let i = 0; i < movies.length; i++) {
let m = movies[i]
dom.append(`<p>${m} - ${i}</p>`)
}
</script>
v-for 指令更多用法文章来源:https://www.toymoban.com/news/detail-490519.html
<template>
<div>
<!-- v-for指令的基础用法 -->
<!-- 循环打印n次,并在后面拼接遍历的n -->
<!-- v-for指令中,使用in与of没有区别 -->
<p v-for="n in 3" :key="n">段落in...{{ n }}</p>
<p v-for="n of 5" :key="n">段落for...{{ n }}</p>
<!-- 遍历数组 -->
<p>图图喜欢的电影:</p>
<p class="item" v-for="ikun in movies" :key="ikun">{{ ikun }}</p>
<!-- 遍历过程中,同时访问元素及其对应下标 -->
<p>图图喜欢的电影:</p>
<p class="item" v-for="(m, i) in movies" :key="i">{{ m }} - {{ i }}</p>
<!-- 访问对象数组 -->
<div class="food-item" v-for="(item, i) in foods" :key="i">
<div style="width: 20%">ID:{{item.id}}</div>
<div style="width: 20%">名称:{{item.name}}</div>
<div style="width: 20%">¥{{item.price}}</div>
<div style="width: 20%">×{{item.num}}</div>
<div style="width: 20%">商品小计:¥{{ item.price * item.num }}</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
foods: [
{ id: 1001, name: '🍖', price: '20', num: 5 },
{ id: 1002, name: '🥩', price: '30', num: 3 },
{ id: 1003, name: '🍠', price: '40', num: 4 },
{ id: 1004, name: '🧁', price: '50', num: 1 },
{ id: 1005, name: '🍗', price: '60', num: 2 },
],
movies: ['三体Ⅰ', '三体Ⅱ', '三体Ⅲ', '三体Ⅳ', '三体Ⅴ'],
}
},
}
</script>
<style lang="scss" scoped>
.item {
margin-left: 10px;
display: inline-block;
padding: 5px 10px;
background-color: green;
color: white;
}
.food-item {
width: 750px;
display: flex;
height: 30px;
align-items: center;
border: 1px solid gray;
margin: 5px;
}
</style>
总结
注意复习:脚手架环境安装,脚手架基础结构,Vue的常用指令(v-for)
文章来源地址https://www.toymoban.com/news/detail-490519.html
到了这里,关于VUE2 脚手架搭建的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!