Vue基础知识总结：进阶篇
Posted wx5b601151b3c99
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue基础知识总结：进阶篇相关的知识，希望对你有一定的参考价值。
1.0 MVVM模式
- MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。
- MVVM模式将页面,分层了 M 、V、和VM ,解释为：
- Model: 负责数据存储
- View: 负责页面展示
- View Model: 负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示
<body>
<div id="app">
<!-- View 视图部分 -->
<h2>name</h2>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
//创建的vue实例,就是 VM ViewModel
var VM = new Vue(
el: "#app",
//data就是MVVM模式中的 model
data:
name: "hello",
,
);
</script>
- 首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。
- 从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
- 从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的
DOM元素
- MVVM的思想,主要是为了让我们的开发更加的方便,因为MVVM提供了数据的双向绑定
1.1 v-mode指令
作用：获取和设置表单元素的值（实现双向数据绑定）
- 双向数据绑定
- 单向绑定：就是把Model绑定到View，当我们用javascript代码更新时Model时，View就会自动更新。
- 双向绑定：用户更新了View,Model的数据也自动被更新了，这种情况况就是双向绑定。
- 什么情况下用户可以更新View呢？
- 填写表单就是一个最直接的例子。当用户填写表单时，View的状态就被更新了，如果此时MVVM框架可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定：
代码实例：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js" ></script>
</head>
<body>
<!-- View 视图部分 -->
<div id="app" >
<input type="button" value="修改model的数据" @click="change" /><br>
<!-- 单向绑定 -->
<input type="text" V-bind:value="msg" /> <br>
<label>单向绑定：</label>msg<br>
<!-- 双向绑定 -->
<input type="text" v-model="msg" /><br>
<label>双向绑定：</label>msg
</div>
</body>
<script>
//创建的vue实例,就是 VM ViewModel
var obj = new Vue(
el: "#app",
//data就是MVVM模式中的 model
data:
msg: "天天好心情",
,
methods:
change:function()
this.msg = "我变了";
,
,
);
</script>
</html>
效果展示：
v-model指令总结
- v-model 指令的作用是便捷的设置和获取表单元素的值
- 绑定的数据会和表单元素值相关联
- 双向数据绑定
1.2 实现简单记事本
- 功能介绍
- 实现步骤
- 生成列表结构（v-for）数组
- 获取用户输入（v-model双向绑定）
- 回车，新增数据（@keyup.enter事件修饰符）
实现源码：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>小黑记事本</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="googlebot" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="../css/index.css" />
</head>
<body>
<!-- VUE示例接管区域 -->
<section id="app">
<!-- 输入框 -->
<header class="header">
<h1>VUE记事本</h1>
<input
autofocus="autofocus"
autocomplete="off"
placeholder="输入日程"
class="new-todo"
v-model:value="msg"
@keyup.enter="add"
/>
</header>
<!-- 列表区域 -->
<section class="main">
<ul class="listview">
<li class="todo" v-for="(item,index) in content">
<div class="view">
<span class="index">index + 1</span> <label>item</labelvue进阶知识总结