Web前端开发之VUE04——vue基础复习

目录

1.vue是什么？

2.@vue/cli全局包

3.插值表达式

4.MVVM设计模式

5.动态属性：

6.事件绑定：

9.v-model的使用：

10.v-text和v-html的使用：

11.v-if和v-show的使用

12.v-for的使用

---

1.vue是什么？

VUE：渐进式javascript框架

渐进式：逐渐使用

框架：一套规则的语法

2.@vue/cli全局包

(1).yarn global add @vue/cli ——获取VUE包

(2).vue create 脚手架项目名字——获取一个脚手架项目文件夹和文件的标准代码模板

(3).yarn serve——启用服务器

3.插值表达式

插值表达式不可以用于属性上，一般用于标签文本处。

如果想要在属性上使用变量需要使用v-on即在属性名前加":"。

4.MVVM设计模式

model view viewmodel设计模式，即一种视图层和模块层交互，实现显示层和代码层双向绑定的设计形式。

5.动态属性：

给原生属性绑定vue的变量值

语法：【:属性名:"vue数据变量"】

作用：把vue变量赋予属性来使用

6.事件绑定：

语法：【@事件名="methods中的函数方法"】

事件对象：

——无传参，直接获取

——有传参，使用$event，传递事件对象

事件修饰符：

.stop停止冒泡 .prevent取消默认事件 .once运行一次函数

@键盘事件.enter键盘enter键触发 @键盘事件.esc键盘esc键触发

9.v-model的使用：

语法：【v-model="变量"】

作用：表单的value属性值和vue变量值双向绑定，常用于表单标签

注意：基础语法部分，只能用于表单标签上

（重要）：v-model用于复选框：v-model变量需要一个数组接收和绑定值。如果不使用数组，只会传递checked状态（true/false）。

修饰符：

.number值以数字类型交互 .trim吸收字符串值两端的空格并交互 .lazy当失去焦点时发生进行交互

10.v-text和v-html的使用：

v-text:把值当作普通字符串传递

v-html:把值当作html类型字符串传递，可解析

11.v-if和v-show的使用

v-if语法：【v-if="表达式"】

v-show语法：【v-show="表达式"】

作用：都是用于当前标签显示和隐藏的。只是v-show是display:none，而v-if是操作dom的办法。

场景：v-show用于频繁切换的界面，而v-if用于控制dom的低频使用。

12.v-for的使用

语法：【v-for="(自定义变量名（数组或对象值），自定义变量名（数组索引或对象键）) in 数组名或对象名"】（其中索引和键变量可省略）

作用：用于循环产生标签结构，谁循环就绑定给谁。

注意：v-for的范围变量不可以用在范围之外。

额外：当然我们的循环变量，可以是任何可以循环迭代的类型，比如数组、对象、数字、字符串。