速成Vue-4

最新推荐文章于 2024-09-17 10:07:04 发布

seriesxm

最新推荐文章于 2024-09-17 10:07:04 发布

阅读量68

点赞数

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/hkjsa/article/details/131197814

版权

Vue 第 4 天 - Vue 监听器自定义指令模块化

以下内容转载自博主Serein的原创文章，遵循 CC 4.0 BY-SA 版权协议。
视频链接,代码链接 请跳转到下方链接
原文链接

01 - 监听器 watch

使用 watch 来侦听 data 中数据的变化，watch 中的属性一定是 data 中已经存在的数据。

watch 本身是个对象,里面的方法名要和data中的属性名一致.

**使用场景：**数据变化时执行异步或开销比较大的操作。

监听器

案例效果：

监听器案例

参考代码：

<body>
  <div id="app">
    <p>
      <input type="text" v-model='firstName' placeholder="姓" />
    </p>
    <p>
      <input type="text" v-model='lastName' placeholder="名" />
    </p>
    <p>
      <input type="text" v-model='fullName' placeholder="全名" />
    </p>
  </div>
  <script type="module">
    import { createApp } from './vue.js'
    createApp({
      data() {
        return {
          firstName: '',
          lastName: '',
          fullName: ''
        }
      },
      watch: {
        firstName(val) {
          this.fullName = val + this.lastName
        },
        lastName(val) {
          this.fullName = this.firstName + val
        }
      }
    }).mount('#app');
  </script>
</body>

注意点：

声明监听器，使用的关键词是watch
每个监听器的方法，可以接受 2 个参数，第一个参数是新的值，第二个参数是之前的值

02- MVC 开发模式

开发模式，就是一个开发项目的方式或者标准，比较有代表的两种开发模式：

MVC
MVVM

MVC 模式介绍

MVC 全名是 Model View Controller，是模型 (model) －视图 (view) －控制器 (controller) 的缩写，一种软件设计典范，用一种业务逻辑（C）、数据（M）、界面显示（V）分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。
用户可以向 View 发送指令（DOM 事件），再由 View 直接要求 Model 改变状态。

用户也可以直接向 Controller 发送指令（改变 URL 触发 hashChange 事件），再由 Controller 发送给 View。

Controller 非常薄，只起到路由的作用，而 View 非常厚，业务逻辑都部署在 View。
优点
耦合性低，重用性高，部署快，可维护性高，有利于软件工程化管理
缺点
由于模型 model 和视图 view 要严格的分离，给前端程序带来了很大的困难，每次操作需要彻底的测试

03- MVVM 开发模式

MVVM 模式

M：（model）普通的 javascript 数据对象

V：（view）前端展示页面

VM：（ViewModel）用于双向绑定数据与页面，对于我们的课程来说，就是 vue 的实例

MVVM 模式采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。这种模式下，页面输入改变数据，数据改变影响页面数据展示与渲染

vue 使用 MVVM 响应式编程模型，避免直接操作 DOM , 降低 DOM 操作的复杂性。

优点

低耦合，视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的 View 上，当 View变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。
可重用性，你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 view 重用这段视图逻辑。
可测试，界面素来是比较难于测试的，而现在测试可以针对 ViewModel 来写。

04-MVC与MVVM原理对比图解

对比

传统的前端是将数据手动渲染到页面上，需要用户操作DOM元素。
而MVVM模式不需要用户手动操作DOM元素，而是将数据绑定到viewModel层上，然后数据会自动被渲染到页面上。
View视图层一发生变化，它就会通知viewModel层开始更新数据，viewModel就是MVVM模式中的桥梁。
MVVM的重要之处在于两个，一个是Data Bindings数据绑定，另一个是Dom Listeners事件监听。

1675760241269

05 - Demo 云播放器

文档地址

实现步骤

输入内容，点击回车，查询数据，渲染页面
v-model :music
@keyup.enter:searchMusic
axios.get(‘https://autumnfish.cn/search?keywords=深圳’)
.then() musicList
v-for

双击歌曲列表，播放双击的歌曲
dblclick: playMusic（歌曲的id）
axios接口调用 https://autumnfish.cn/song/url?id=33894312
.then()
放歌要设置src，歌曲的url地址
src属性
v-bind:src=musicUrl

歌曲封面获取:https://autumnfish.cn/song/detail?ids=347234
获取评论：https://autumnfish.cn/comment/hot?id=186015&type=0

注意点

不同的接口返回的数据时不同的，这个例子换了一个接口

数据回来之后如果比较复杂，依次逐级的去找，不要害怕

工作中，基本上所有的数据都是由接口提供，不同的接口功能不同，前端开发中，天天调不同的接口

audio 通过设置src可以放歌，vue中不要认为操纵dom元素，要通过数据去间接操纵

v-bind:src="musicUrl"

版权问题

企业中，如果要做播放器，一定要考虑版权问题
学习节点，个人玩耍，只要不商用，不盈利，不会侵权