vue基础语法

向右看齐 2023-10-13 10:38 9阅读 0赞

**目录**

1：vue基础语法

2：内容渲染指令（操作标签体中的内容）

2.1：v-text指令

2.2：插值语法\{ \{\}\}语法：

2.3：v-html指令

3：属性绑定指令

4：事件绑定：

4.1：v-on语法

4.2：方法的注意事项：

5:事件修饰符

6：按键修饰符

7：双向绑定

7.1：v-model的修饰符用法

7.2：v-model的修饰符

7.3：v-model常见的使用位置

编辑

8：列表渲染

8.1：v-if和v-show的区别

8.2：v-if的配套的指令

9：条件渲染

9.1:v-for的基础用法

9.2：强调v-for循环中key值的注意点

--------------------

## 1：vue基础语法 ##

### 2：内容渲染指令（操作标签体中的内容） ###

#### 2.1：v-text指令 ####

将数据源中的数据渲染到P这个标签体中的内容，通过在p标签上面使用v-text指令指定data数据源中的名称

![a410629e354a46569f682a18376f6565.png][]

v-text指令的缺点：会覆盖标签体中原有的内容，

![bb545dec5f32488db85a4de87ae142b6.png][]

#### 2.2：插值语法\{ \{\}\}语法： ####

只是内容占位符不会覆盖标签体内的内容，插值语法一般用于解析标签体中的内容\{ \{xxx\}\},xxx是js表达式可以调用js中的一些语法进行使用，可以直接读取到data中的所有属性。

![f4abbf7dfeeb4d8da3965708b7efbd0d.png][]

#### 2.3：v-html指令 ####

作用：可以把带标签的字符串渲染成真正的html内容。

![d78ff0e1e179488bbe331d67eec228c9.png][]

### 3：属性绑定指令 ###

v-band:单向数据绑定，用于标签的属性绑定，数据只能从data流向页面

v-bind:属性名 简化写法 **:** 属性名 一般用于a标签href属性中

功能：用于解析标签（包括：标签属性，标签体内容，绑定事件等等）

例子：v-bind:href="xxx" 或简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。

![a425de397db940049950483f388614c8.png][]

vue提供的模板语法，除了支持绑定简单的数据值之外，还支持js语法运算。

![d9e45c05ad8847b8abf64ca4c781a7dd.png][]

### 4：事件绑定： ###

#### 4.1：v-on语法 ####

这个语法用于一些标签中的事件绑定像点击事件，鼠标移入移出事件

使用：在标签中使用v-on语法绑定想要用的事件

1：在标签中绑定想用的事件以及方法名称（如果想要传递参数可以进行传参temp(parm)，如果没有直接方法名称）

2：在vue实例中编写methods方法区内编写方法进行处理想要做的事情

![1281f58761ce444d8bf3191b38fc2bbc.png][]

#### 4.2：方法的注意事项： ####

1：在es语法中方法编写格式

![92a035bac9444d3fb1e6c339a6815957.png][]

2：在方法体内部如果想要操作vue实例中的data区域内的数据源：使用this进行调用这里的this就是vue实例

![f1a053eb60d842a29247245366ed64a5.png][]

3：v-on的简写形式就是@事件类型

![e5082f815e5c4f6c8eee0de91bb86bfb.png][]

4：如果在方法内想要操作这个这个标签DOM对象，,如果方法没有传递参数那么可以在编写方法中接收一个变量e，变量名称e自定义，这个e默认就是当前这个标签对象，可以通过e.target获取到

![a69ddde1498044a4adad05567aad9f9f.png][]

可以方法传递了参数，默认方法区中接受的形参就不是当前对象了而是容器中传递进来的参数，这时可以选择在容器的方法中的参数编写$event传递标签对象，名称不能改变。

![992dea70ce74465889ab921c137530f7.png][]

### 5:事件修饰符 ###

.prevent:阻止标签的默认行为，进行事件触发

![9729920f6d84414ebfe6e843fa11f104.png][]

.stop:阻止嵌套的事件触发，外面一个标签体内包含了另外一个标签体，两个标签体都有对应的事件，点击里面的标签体中的事件会触发外层标签体的事件。

![d4da7aaeb475458281bf93a7b551f38e.png][]

![6d1148574ec740ae9aa58171beda9330.png][]

![71b700a3959046b8b14a3b6913876a47.png][]

### 6：按键修饰符 ###

![fa84f87a1e774e308f98eb220440947c.png][]

就是按下键盘上的指定的按键就触发事件所对应的函数

### 7：双向绑定 ###

#### 7.1：v-model的修饰符用法 ####

数据不仅可以从data区域流向页面，还可以从页面流向data

![5366f7024c4943e5b9edacc17712df95.png][]

注意：

1：双向绑定一般用于表单（input，select）收集用户数据

2：一般写法：v-model:value="" 简化写法：v-model=""

![dc0df58b038b422088758590749c765a.png][]

#### 7.2：v-model的修饰符 ####

默认用户输入值为字符串，当用户输入数字时可以使用修饰符来指定输入的类型为数字，还有一些指令处理字符串的空白等等

![f7f629ec61e949d799bb98d542f3cd56.png][]

![f0727fc1e4864d43b351152f072e875b.png][]

#### 7.3：v-model常见的使用位置 ####

#### ![3fbadd5bbe0f43b9b4a980927c98f057.png][] ####

### 8：列表渲染 ###

控制标签的显示和隐藏

![34eb9ad9885b409a8878fdcddeec0192.png][]

#### 8.1：v-if和v-show的区别 ####

目前数据源data中的flag为false

![d8d4e4d9ae91470db1ee40994fd30077.png][]

![10d79a7998ca46f8867f0947c9a5cbaa.png][]

1：v-show控制显示隐藏的原理：动态为这个标签中添加或移除属性：display:none样式，来实现元素的显示和隐藏（如果频繁的切换元素的显示状态，用v-show性能会更好）

2：v-if控制显示隐藏的原理：每次动态创建或者移除该元素标签（如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出现出来，这时v-if性能更好）

3：实际开发中，绝大多数情况，不用考虑性能问题，直接使用v-if就好了！

#### 8.2：v-if的配套的指令 ####

![9f424f44027b47c985c74a97fbc79b57.png][]

### 9：条件渲染 ###

![322b49d567a0403ea1db75b2e23d174d.png][]

#### 9.1:v-for的基础用法 ####

![24b611980ac5439696856f729d28e61c.png][]

#### 9.2：强调v-for循环中key值的注意点 ####

![bcde9ecc5f434d6a9dceaa3b34f4fb97.png][]

1：key的值只能是字符串或数字类型

2：key的值必须具有唯一性（即:key的值不能重复）

3：建议把数据项id属性的值作为key的值（因为id的值具有唯一性）

4：使用index的值当作key的值没有任何意义（因为index的值不具有唯一性）

5：建议使用v-for指令时一定要指定key的值（即提升性能又防止列表状态紊乱）

[a410629e354a46569f682a18376f6565.png]: https://img-blog.csdnimg.cn/a410629e354a46569f682a18376f6565.png
[bb545dec5f32488db85a4de87ae142b6.png]: https://img-blog.csdnimg.cn/bb545dec5f32488db85a4de87ae142b6.png
[f4abbf7dfeeb4d8da3965708b7efbd0d.png]: https://img-blog.csdnimg.cn/f4abbf7dfeeb4d8da3965708b7efbd0d.png
[d78ff0e1e179488bbe331d67eec228c9.png]: https://img-blog.csdnimg.cn/d78ff0e1e179488bbe331d67eec228c9.png
[a425de397db940049950483f388614c8.png]: https://img-blog.csdnimg.cn/a425de397db940049950483f388614c8.png
[d9e45c05ad8847b8abf64ca4c781a7dd.png]: https://img-blog.csdnimg.cn/d9e45c05ad8847b8abf64ca4c781a7dd.png
[1281f58761ce444d8bf3191b38fc2bbc.png]: https://img-blog.csdnimg.cn/1281f58761ce444d8bf3191b38fc2bbc.png
[92a035bac9444d3fb1e6c339a6815957.png]: https://img-blog.csdnimg.cn/92a035bac9444d3fb1e6c339a6815957.png
[f1a053eb60d842a29247245366ed64a5.png]: https://img-blog.csdnimg.cn/f1a053eb60d842a29247245366ed64a5.png
[e5082f815e5c4f6c8eee0de91bb86bfb.png]: https://img-blog.csdnimg.cn/e5082f815e5c4f6c8eee0de91bb86bfb.png
[a69ddde1498044a4adad05567aad9f9f.png]: https://img-blog.csdnimg.cn/a69ddde1498044a4adad05567aad9f9f.png
[992dea70ce74465889ab921c137530f7.png]: https://img-blog.csdnimg.cn/992dea70ce74465889ab921c137530f7.png
[9729920f6d84414ebfe6e843fa11f104.png]: https://img-blog.csdnimg.cn/9729920f6d84414ebfe6e843fa11f104.png
[d4da7aaeb475458281bf93a7b551f38e.png]: https://img-blog.csdnimg.cn/d4da7aaeb475458281bf93a7b551f38e.png
[6d1148574ec740ae9aa58171beda9330.png]: https://img-blog.csdnimg.cn/6d1148574ec740ae9aa58171beda9330.png
[71b700a3959046b8b14a3b6913876a47.png]: https://img-blog.csdnimg.cn/71b700a3959046b8b14a3b6913876a47.png
[fa84f87a1e774e308f98eb220440947c.png]: https://img-blog.csdnimg.cn/fa84f87a1e774e308f98eb220440947c.png
[5366f7024c4943e5b9edacc17712df95.png]: https://img-blog.csdnimg.cn/5366f7024c4943e5b9edacc17712df95.png
[dc0df58b038b422088758590749c765a.png]: https://img-blog.csdnimg.cn/dc0df58b038b422088758590749c765a.png
[f7f629ec61e949d799bb98d542f3cd56.png]: https://img-blog.csdnimg.cn/f7f629ec61e949d799bb98d542f3cd56.png
[f0727fc1e4864d43b351152f072e875b.png]: https://img-blog.csdnimg.cn/f0727fc1e4864d43b351152f072e875b.png
[3fbadd5bbe0f43b9b4a980927c98f057.png]: https://img-blog.csdnimg.cn/3fbadd5bbe0f43b9b4a980927c98f057.png
[34eb9ad9885b409a8878fdcddeec0192.png]: https://img-blog.csdnimg.cn/34eb9ad9885b409a8878fdcddeec0192.png
[d8d4e4d9ae91470db1ee40994fd30077.png]: https://img-blog.csdnimg.cn/d8d4e4d9ae91470db1ee40994fd30077.png
[10d79a7998ca46f8867f0947c9a5cbaa.png]: https://img-blog.csdnimg.cn/10d79a7998ca46f8867f0947c9a5cbaa.png
[9f424f44027b47c985c74a97fbc79b57.png]: https://img-blog.csdnimg.cn/9f424f44027b47c985c74a97fbc79b57.png
[322b49d567a0403ea1db75b2e23d174d.png]: https://img-blog.csdnimg.cn/322b49d567a0403ea1db75b2e23d174d.png
[24b611980ac5439696856f729d28e61c.png]: https://img-blog.csdnimg.cn/24b611980ac5439696856f729d28e61c.png
[bcde9ecc5f434d6a9dceaa3b34f4fb97.png]: https://img-blog.csdnimg.cn/bcde9ecc5f434d6a9dceaa3b34f4fb97.png