当前位置: 首页 > 网络应用技术

Vue脚手架和常用的指令收集

时间:2023-03-07 14:06:07 网络应用技术

  @vue/cli是VUE(VUE命令)提供的全局模块软件包,用于创建脚手架项目

  快速构建项目结构,安装命令:

  它需要四个步骤来创建一个带脚手架的项目:

  要涵盖WebPack的配置,您需要在vue.config.js中进行配置。如果我们默认启动项目服务,我们将不会自动打开浏览器。我们可以自己配置:

  此外,初学者可以介绍ESLINT,然后在精通后打开它

  更改您的思维,使用数据驱动的视图更改,操作DOM,VUE源代码已完成

  设计模式:这是一组反复使用的,最著名的,分类的类别和代码设计经验。

  MVVM是一种软件体系结构模式,确定了编写代码的想法和级别

  MVVM不再需要通过允许数据自动放置在两道同步中来操作DOM

  1.在VUE中,不建议手动操作DOM!

  2.在VUE中,通过数据驱动器视图,不要考虑如何操作DOM,而要考虑如何操作数据!交叉点(意识形态上的变化)

  VUE指令,本质上是特殊的HTML标签属性,特征:v-Beginning

  每个指令都有独立效果

  1.插入表达式函数:数据渲染。display数据(变量或从后端获得的数据)到页面上。它不会直接操作DOM,而是具有自己的语法。

  {{ }} 能:

  2. vue指令v-bind函数:将VUE变量的值设置为标签属性

  摘要:VUE变量的值给出了DOM属性以影响标签显示效果

  3. vue指令 - v -for函数:列表渲染,标签结构,根据数据数量,周期生成

  语法:tag v-for =“目标结构中的值,索引或属性名称”:key =“ unique value”>

  4.VUE指令V-TEXT和V-HTML功能:更新DOM对象的INCEXT/INTERHTML

  v文本将值显示为普通字符串,v-text ===> innertext

  V-HTML将值视为HTML分析,V-HTML ===> InnerHTML

  5. vue指令v-show和v-if函数:控制标签的隐藏或出现

  特殊适用的V-if场景:如果是登录用户,请显示头像

  注意避免V-For和V-一起

  当VUE处理指令时,V-FOR的优先级高于V-IF。尽管使用它不是错误的,但性能并不高。如果您有5个元素由V-FOR散发,则V-IF还将执行5次。

  6. vue指令v-if,v -e-if,else函数:模板中选定的结构

  它与JS中的IF选择结构一致。

  例子:

  7.VUE指令V-ON函数:标签的绑定事件

  VUE指令V-ON事件对象目标:VUE事件处理功能,获取事件对象(此处的事件对象与本机JS操作DOM完全相同)

  VUE指令V -ON事件修饰符函数:事件后,装饰名称 - 为事件带来更强大的功能

  语法:

  VUE指令-V -ON按钮修复目标:提供键盘事件,添加修饰符,增强功能

  更多的修饰符

  8.VUE指令-V模型双向绑定函数:绑定值属性和VUE数据变量,将双向绑定在一起

  总结:

  V模型适合表单开发,并自动获取用户输入或选择数据特别注意:V模型,当变量状态不是非阵列时,当多选择框输入状态[复选框]时,它是绑定的对于检查/false属性(true/false) - 通常用于:单个绑定变量是数组,然后在其值属性中的值 - 常用于:选择哪些值

  VUE指令-V模型修饰符函数:使V模型具有更强大的功能

  语法:

  有关更多指令官方网站,请检查:https://cn.vuejs.s.org/