Vue项目包下载以及一些指令

Vue是一款自动化的框架, 以数据为驱动, 数据变更时自动更新相关DOM

编写Vue代码有两种方式:

1. 脚本方式: 适合入门, 项目中某几个页面用vue实现

2. 脚手架方式

   通过脚手架软件, 去生成标准化的项目包

   • 拥有固定的文件夹来存放不同功能的文件
   • 拥有自己的服务器, 有热更新功能
   • 带有 .vue文件, 对 vue代码有更多支持 – 代码提示

选项/数据

• data: 存储在此对象中的属性, 才能在页面上使用
• computed: 计算属性 – 实际是函数, 使用时不用()就能调用
• methods: 存储函数, 用于绑定给事件

选项/DOM

• el: 设置vue管理的元素 el: '#app'

指令

• v-show: 利用 display:none 来实现元素的隐藏

• v-if: 通过条件来决定元素是否要加载

  • v-else
  • v-else-if

• v-for: 遍历数组生成HTML元素

  • v-for="value in/of 数组"
  • v-for="(value,index) in/of 数组"
  • v-for="value in 数字": 遍历数字

• v-on: 事件绑定 @事件名="..."

• v-bind: 属性绑定 :属性名="..."

脚手架项目包

• 安装脚手架软件: npm i -g @vue/cli

  • 前提: node版本>=12 别装17测试版 最高16
  • npm需要中国镜像, 否则下载很可能卡住失败

• 生成项目包: 在哪执行在哪生

  • vue create 包名

  • 固定选项

    1. 选手动模式: Manually select features

    2. babel; router; vuex; css pre-xxx;

    3. 回车 – 默认

    4. 回车 – 默认

    5. 回车 – 默认

• 运行: 项目包自带服务器, 必须使用自带服务器来运行项目

  • 启动方式: 必须在项目包目录下执行

  • npm run serve

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-povWJf9y-1642606587072)(Vue03.assets/image-20220117092204596.png)]

• 启动方式: 根据启动后的提示中的路径, 在浏览器访问

  localhost:8080 – 端口号不一定是8080, 看你命令行的提示

VSCode

如果直接开启脚手架生成的项目包, 能够识别出 并 给出更多代码提示

找到项目包文件夹, 左键按住拖拽到 新建的空白vscode中即可

关于自动保存

VSCode带有自动保存功能, 当修改文件时 会立刻保存

• Vue的服务器带有热更新功能, 每次文件修改后都会自动更新页面
• 如果开启了自动保存, 则写10个字母 就会保存10次, 页面就会更新10次
• 可能造成电脑卡顿 和 代码意外报错 – 因为代码还没全写完就运行

目前结构

关于Git

v-for 不写key的问题

通过设置, 去掉验证功能, vscode 就不会爆红了