脚手架环境
制作WEB前端项目, 从最初的小作坊状态逐渐发展到工程队状态
- 工程: 像流水线一样, 按照固定的规范来开发项目
脚手架需要安装之后, 才能使用 -- 用来生成标准化的项目包
环境要求:
- node版本: 12~16, 检查命令: node -v
- npm: 包管理工具要求中国镜像
- 查看当前镜像: npm get registry
- 全局安装 vue的脚手架工具
- npm i -g @vue/cli
- 安装后使用 vue -V 或 vue --version 来查看版本
生成 Vue 项目包
安装脚手架软件后, 目的是为了生成项目包
注意事项:
1. 要生成项目包的目录下, 不允许存在 vue.js 文件
2. 项目包所在目录中, 不允许存在中文和特殊字符
执行安装命令: vue create 包名
- 在你希望创建项目包的目录下, 执行
- 包名: 不允许大写字母, 用- 间隔多个单词 , 例如 vue-pro
选择
- 选择版本 2
- 后续的所有选项, 直接按回车, 自动采用默认项即可
- 成功生成
项目包的使用方式
脚手架生成的项目包十分完善
自带服务器
在项目包vue-pro 目录下, 打开cmd命令行工具, 运行启动服务器命令
npm run serve
ip 和 端口号 都不一定, 要看你自己电脑
访问服务器: 在浏览器地址栏输入 命令行中的网址, 能查看即可
项目包非常专业, 必须用单独的vscode窗口来开启
这样就算完成了
v-text指令 v-html指令 v-pre指令
指令: vue提供的一些属性
v-html: 快速设置 innerHTML 属性的值, 被解析成HTML
v-text: 快速设置 innerText 属性的值, 纯文本展示
v-pre: 不解析vue语法
<template>
<div>
<!-- v-html: 快速设置 innerHTML 属性的值, 被解析成HTML -->
<p v-html="words"></p>
<!-- v-text: 快速设置 innerText 属性的值, 纯文本展示 -->
<p v-text="words"></p>
<!-- v-pre: 不解析vue语法 -->
<div v-pre>{
{ 8 + 8 }}</div>
</div>
</template>
<script>
export default {
data() {
return {
words: '<h1>Hello World!</h1>'
}
},
}
</script>
<style lang="scss" scoped>
</style>v-for指令
核心操作: 数组数据 转 HTML 代码
v-for作者借鉴了 JS的 for...in 遍历语法, 融入到了HTML中
JS中: for(const x in names){}
v-for: 自动遍历数组, 生成元素
<ul>
<li v-for="x in names">{
{ x }}</li>
</ul>for..of 语法同效果, 无差异
在vue中 of 和 in 没有区别, 选你喜欢的
<button v-for="bin of names">{
{ bin }}</button>下标语法
(值, 序号) in/of 数组
注意: in/of 左右的空格是必须的
<button v-for="(x, i) in names">{
{i}} - {
{x}}</button>支持遍历数字
<button v-for="n in 10">{
{ n }}</button><button v-for="n in 10">{
{ n*5 }}</button>key
结论
- key在Vue是DOM对象的标识
- 进行列表展示时，默认key是index；
- 如果数据只做展示使用，使用index作为key是没有任何问题的；
- 如果使用index作为key，而后续操作会破坏顺序，一定会带来效率问题，严重时会渲染出错误的DOM
key: 是唯一标识, 提高数组元素增删时的重复渲染效率
<ul>
<li v-for="(x, i) in names" :key="i">{
{ x }}</li>
</ul>为了避免key重复, 用 序号做标识更好一点
推荐使用数据的唯一标识作为key，比如id，身份证号，手机号等等，通常这些数据由后端提供
后续操作不破坏原来数据顺序的话，使用index作为key也没有任何问题