Vue ------学习笔记（一） MVVM，常用指令，双向绑定，事件修饰符

最新推荐文章于 2024-05-22 19:02:02 发布

水兮泱泱

最新推荐文章于 2024-05-22 19:02:02 发布

阅读量342

点赞数 1

分类专栏： Vue 学习笔记

本文链接：https://blog.csdn.net/DU123_/article/details/100327240

版权

本文是Vue的基础入门学习笔记，涵盖了MVVM模式、常用指令如v-bind、v-on、v-model的使用，以及事件修饰符的介绍，详细讲解了Vue如何实现数据的双向绑定和事件处理。

摘要由CSDN通过智能技术生成

Vue 基础入门（一）：

一、基础了解：

1、 是啥 ：一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，便于与第三方库或既有项目整合。
通俗的来讲，vue就是一个已经搭建好的空屋，与单纯使用jQuery这种库比，可以更好地实现代码复用，减少工作量，与Angular.js这种家具电器一应俱全的框架相比又不会一件件挑选，把自己不喜欢再一件件的扔了，甚至required 必须用且耗费空间的！
vue是一个无论项目大小都可以满足开发需求的框架
** vue做了必须的事，又不会做职责之外的事 **

2、用处：代码灵活复用。
因为：Vue.js有声明式，响应式的数据绑定，与组件化的开发，并且还使用了Virtual DOM

二、相关背景知识：mvc 与 MVVM的区别：

在这里插入图片描述

1、MVC:是后端的分层开发概念
M:model层，处理数据的 CRUD
V:视图层，前端页面
C:业务逻辑层，路由是其中之一

图解如下：

2、MVVM ：即model，view，viewmodel，它是数据驱动模式，即所有的一切通过操作数据来进行，而尽量避免操作dom树。

MVVM 只专注于前端视图层，MVVM 是前端思想，MVC是后端思想， MVVM 在 MVC的子集 V 层中

图解如下：

**3、vue代码和MVVM之间的对应信息 **
基本代码：
在这里插入图片描述

三、常用指令：

1、 v-clock 可以解决差值表达式的闪烁问题
2、v-text
3、v-html
在这里插入图片描述
4、v-bind 可直接简写为：tittle
vue 中提供用于绑定属性的指令，
v-bind：“title” 会把引号中的数据用js语法去解析，当做一个变量，里面可字符串拼接

5、v-on： 可直接简写为 @click
vue 中提供用于绑定事件的指令
在vue 实例中的methods 中写所对应的事件所要执行的函数在这里插入图片描述

注意点：
注意函数中有定时器，回调函数的this的指向问题（用this 函数来解决）如下：

四、事件修饰符：

. stop 阻止事件冒泡
. prevent 阻止默认行为，类似a标签跳转的行为
.capture 实现捕获事件机制

在这里插入图片描述

.self 实现只有点击当前元素的时候才会触发事件，注意它只会阻止自己身上的冒泡，比如有 out，inner，innerself 三层，给最里面的innerself 身上使用. self 后，只能阻止与它最近的事件层 inner，而外层 out 还是会被冒泡简言之： “只能阻止父级事件冒泡，不能阻止爷爷及祖先的事件被冒泡触发事件 ”

.once 只触发一次事件

五、v-model 与双向数据绑定：

v-bind 只能实现数据的单向绑定从 M 自动绑定到 V, 无法实现数据双向绑定
注意： v-model 只能运用在表单元素中

六、在Vue中使用样式

方法一：使用class样式
在这里插入图片描述
1.数组：此处的样式名定义在style中

2、三元表达式：

数组中嵌套对象（对象来代替三元表达式，）

4.直接使用对象

方法二：内联样式

在这里插入图片描述
2.数组形式

七、vue指令之v-for 和 key

在这里插入图片描述

- v-for
循环普通数组：
在这里插入图片描述
循环对象数组：

循环遍历对象的键，值：

v-for 迭代数字：

v-for中的注意事项：

八、v-if 和v-show

在这里插入图片描述
v-show 会自动调用 display来实现显示和隐藏：

以上小总结：

在这里插入图片描述

-----------------------------------------分割线----------------------------------------

4、vuejs生命周期函数：
生命周期函数就是vue实例在某一个时间点会自动执行的函数
当我们创建一个实例的时候，也就是我们调用 new Vue() 这句话的时候，vue会帮助我们去创建一个实例，创建过程其实并不像我们想的那么简单，他要经过很多的步骤

Vue所有的生命周期钩子自动绑定在this上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法。这是因为箭头函数绑定了父上下文，因此this与你期待的Vue实例不同

1.beforeCreate 实例创建之前调用，数据没有挂载，不能访问数据
vue实例初始化的时候就被执行（数据加载之前执行的一个函数，拿不到data里面的数据）

2.created 实例创建之后调用,能访问、修改数据，单修改数据不会触发updated函数在这里可以向服务器请求数据，（也可以拿到父组件的数组进行修改等操作，这一步骤是没有操作到模板，数据和模板还没有结合）

下一步就是开始找模板，找不到的话就把el接管的div作为模板，如果有模板就会渲染模板

3.beforeMount 编译模板已经完成（模板和数据都已经准备就绪了）虚拟dom已经存在还没有进行进行渲染。
也能修改数据，但是修改数据不会触发update函数（组件不卸载，只能执行一次）

4.render 渲染是vue自动完成的。如果手动写render函数，渲染的东西
就会把 vue自动渲染的东西覆盖调。

5、 mounted 真实的dom元素已经存在, 可以获取节、修改数据，而且修改数据会触发update函数（页面已经渲染，替换了之前的dom元素）。

6、 beforeUpdate 数据更新之前触发（数据更新：就是dom上的数据发生变化）。

7、. updated 数据修改后执行修改数据要可能造成死循环（在这里尽量不要修改数据）。

8、 beforeDestroy 销毁之前要做一些清理工作，防止内存泄漏。

9、 activated keep-alive 激活动态组件时调用。

10、deactivated keep-alive 卸载动态组件时调用（已经销毁的时候执行）。

5、计算属性：computed

**作用：**为了解决模板用于简单运算，在模板中放入太多的逻辑会让模板过重且难以维护。

<div id="example">
  <p>Original message: "{
  { message }}"</p>
  <p>Computed reversed message: "{
  { reversedMessage }}"</p>　　//我们把复杂处理放在了计算属性里面了
</div>

var vm = new Vue({
   
    el: '#example',
    data: {
   
        message: 'Hello'
    },
    computed: {
   
        reversedMessage: function () {
   
            // `this` 指向 vm 实例
            return this.message.split('').reverse().join('')
        }
    }
});

计算属性还可以依赖多个Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。
6、函数的防抖与节流：

基础语法：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue.js</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<input type="text" name="" value="" placeholder="在这里输入文字，下面会跟着变化" v-model="message">
		<hr>
		<p>{
  { message }}<

最低0.47元/天解锁文章

水兮泱泱

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue ------学习笔记（一） MVVM，常用指令，双向绑定，事件修饰符

Vue 基础入门（一）：1、是啥：一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，便于与第三方库或既有项目整合。通俗的来讲，vue就是一个已经搭建好的空屋，与单纯使用jQuery这种库比，可以更好地实现代码复用，减少工作量，与Angular.js这种家具电器一应俱全的框架相比又不会一件件挑选，把自己不喜欢再一件件...
复制链接

扫一扫