@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/