【Vue2.0】day2

最新推荐文章于 2022-09-16 10:59:31 发布

睡前梦想家

最新推荐文章于 2022-09-16 10:59:31 发布

阅读量165

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44821382/article/details/126083434

版权

一、vue简介

1 什么是vue

概念： vue是一套用于构建用户界面的前端框架
构建用户界面： 用vue往html页面中填充数据，十分方便
框架：

框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务。
要学习vue，就是在学习vue框架中中规定的用法！
vue的指令、组件（对UI结构的复用）、路由、Vuex、vue组件库

2 vue的特性

数据驱动视图
- 数据的变化会驱动视图自动更新
- 好处：程序员只需要把数据维护，页面结构会被 vue 自动渲染出来！
双向数据绑定
- 在网页中，form表单负责采集数据，Ajax负责提交数据
- js 数据的变化，会自动被渲染到页面上
- 页面上表单采集的数据发生变化时，会被 vue 自动获取到，并更新到 js 数据中

3 MVVM

在这里插入图片描述
注意：数据驱动视图和双向数据绑定的底层原理是 MVVM。（Model数据源，View视图，ViewModel就是vue的实例）

二、vue的基本使用

1 基本使用步骤

在这里插入图片描述

2 基本代码与 MVVM 的对应关系

在这里插入图片描述

3 vue的指令和过滤器

3.1 内容渲染指令

v-text 指令的缺点：会覆盖元素内部原有的内容！
{{ }} 插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！
v-html 指令的作用：可以把带有标签的字符串，渲染成真正的 HTML 内容！

3.2 属性绑定指令

注意： 插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中！

在 vue 中，可以使用 v-bind: 指令，为元素的属性动态绑定值；
简写是英文的 :
在使用 v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如：

      <div :title="'box' + index">这是一个 div</div>

在这里插入图片描述

3.3 事件绑定指令

v-on: 简写是@
通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明
语法格式为：

<button @click="add"></button>

methods: {
   add() {
			// 如果在方法中要修改 data 中的数据，可以通过 this 访问到
			this.count += 1
   }
}

传参：

$event

$event 的应用场景：如果默认的事件对象 e 被覆盖了，则可以手动传递一个 $event。例如：

<button @click="add(3, $event)"></button>

methods: {
        add(e, n) {
          this.count += n
          console.log(e)
          // 判断 this.count 的值是否为偶数
          if (this.count % 2 === 0) {
            // 偶数
            e.target.style.backgroundColor = 'red'
          } else {
            // 奇数
            e.target.style.backgroundColor = ''
          }
        }
      },

3.4 事件修饰符

在这里插入图片描述

3.5 按键修饰符

在这里插入图片描述

3.6 双向绑定指令

3.6.1`v-model`指令介绍

vue 提供了v-model双向数据绑定指令 ，用来辅助开发者在不操作dom的前提下，快速获取表单数据。
在这里插入图片描述
注意： 只有表单元素才能够使用v-model指令，因为这些标签能够与用户产生交互并显示内容，才有双向数据绑定的意义。（即那些有value属性的标签）

3.6.2 `v-model`指令的修饰符

在这里插入图片描述

3.7 条件渲染指令

3.7.1 `v-if`,`v-show`介绍

在这里插入图片描述

3.7.2 `v-if`,`v-show`的区别

v-show 的原理是：动态为元素添加或移除 display: none 样式，来实现元素的显示和隐藏
- 如果要频繁的切换元素的显示状态，用v-show性能会更好
v-if 的原理是：每次动态创建或移除元素，实现元素的显示和隐藏
- 如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时 v-if 性能更好

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