Vue 学习总结笔记 (一)

IT_Holmes

于 2022-01-18 17:42:17 发布

6302

分类专栏： Vue 全家桶文章标签： vue.js 前端框架前端 js javascript

本文链接：https://blog.csdn.net/IT_Holmes/article/details/122537496

            <div class="operating">
                <a class="href-article-edit slide-toggle">收起</a>
            </div>
        </div>
    </div>
</div>

    <div id="blogColumnPayAdvert">
        <div class="column-group">
            <div class="column-group-item column-group0 column-group-item-one">
                <div class="item-l">
                    <a class="item-target" href="https://blog.csdn.net/it_holmes/category_11899711.html" target="_blank" title="Vue 全家桶" data-report-click="{&quot;spm&quot;:&quot;1001.2101.3001.6332&quot;}">
                        <img class="item-target" src="https://img-blog.csdnimg.cn/b3f6cc316bf34861ba4e5d84c6f8f0ff.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224" alt="">
                        <span class="title item-target">
                            <span>
                            <span class="tit">Vue 全家桶</span>
                                <span class="dec">专栏收录该内容</span>
                            </span>
                        </span>
                    </a>
                </div>
                <div class="item-m">
                    <span>14 篇文章</span>
                    <span>5 订阅</span>
                </div>
                <div class="item-r">
                        <a class="item-target article-column-bt articleColumnFreeBt" data-id="11899711">订阅专栏</a>
                </div>
            </div>
        </div>
    </div>
<article class="baidu_pl">
    <div id="article_content" class="article_content clearfix">
    <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css">
    <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-6e43165c0a.css">
            <div id="content_views" class="markdown_views prism-tomorrow-night">
                <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                    <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
                </svg>
                <p></p>

文章目录

1. Vue 的介绍
2. MVC和MVVC的基本流程
3. Vue 的使用详解
4. Vue 模板语法
- 4.1 {{xxx}} 插值语法
- 4.2 v-??? 指令语法
5. 单向绑定和双向绑定
6.el和data的两种写法方式
7. MVVM的架构图
8. 数据代理 Object.defineProperty方法
9. 数据代理
- 9.1 数据代理例子
- 9.2 数据代理详解
10. Vue 事件处理

1. Vue 的介绍

1.1 什么是Vue？

Vue.js是目前最火的一个前端框架，React是最流行的一个前端框架，这两都可以来开发网站和手机App，但vue开发手机app需要Weex的帮助。vue的开发者是尤雨溪。

Vue.js是一套构建用户界面的框架，只关注视图层。主要负责MVC的V的这一层，还是只关注于界面。

其实学习前端的这些框架，无非就是提升效率，大体上的开发进度都是：

原生JS代码 --》 jQuery库 --》前端模板引擎 --》 Angular.js / Vue.js / React.js

1.2 Vue的诞生和特点

Vue就是一套用于构建用户界面的渐进式JavaScript框架。

尤雨溪是Vue开发者，他是收到Angular框架的启发，发出了一款轻量级的框架Seed，之后改名为Vue。

Vue的特点：

采用组件化模式，提高代码复用率，且让代码更好的维护。
声明式编码，让编码人员无需直接操作DOM，提高开发效率。
解释一下命令式编码和声明式编码的区别：
- 命令式编码就是通过js代码一步步实现的效果，如下：
- 声明式编码通过一些指令的方式来简化操作，从而得到想要的结果，如下图：
使用虚拟DOM 和优秀的Diff算法，尽量复用DOM节点。

1.3 Vue 的引入和 Vue devtools开发者工具

Vue有两个版本，生产版本和开发版本。
在这里插入图片描述

引入，很简单从官网下载js文件也好，引入script也好都行。

devtools可以去github上下载，也可以去谷歌应用商店下载。

需要注意两个版本：

请添加图片描述

1.4 Vue 引入后浏览器端的信息处理

我们可以在控制台打印Vue对象来查看！
请添加图片描述

上面两个提示的解释：

第一个提示：提示是告诉我们要安装Vue的devtools开发者工具，安装这个插件后就不会报错了。

第二个提示：是提示我们当前是在开发者环境中，部署项目要在生产模式！

1.5 Vue.config 配置全局

对于上面的提示，第一个提示安装devtools就没了，但是想要第二个也不提示，就需要在Vue.config中配置一下: Vue.config.productionTip = false;

首先，我们去Vue官方网站，查看Vue相关的API ，也是可以查询到一些全局配置的！会看官网很重要！一定要学习看官网！

https://cn.vuejs.org/v2/api/

可以在控制台直接打印出Vue.config的内容：
在这里插入图片描述

2. MVC和MVVC的基本流程

mvc：（主要考虑后端分层开发）
请添加图片描述

mvvc：（主要考虑前端使用vm来分离）
Model、View、VM ViewModel

请添加图片描述

3. Vue 的使用详解

3.1 Vue 的mvvm架构

链接上面的mvvm解释，下面整体就是一个类似mvvm的架构！
在这里插入图片描述
vm(ViewModel)就是const定义的vm对象。

下面，就是Vue的一个工作流程：

想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象。
html代码容器的代码依然符合html规范，只不过混入了一些特殊的Vue语法。
代码容器里的代码被称为Vue模板。

先有html代码容器，再有Vue实例，在实例中会解析html代码容器中的代码语法(针对Vue的语法)，解析完后，会将之前的容器替换掉，放到前端页面上面。

3.2 Vue 的注意事项 (重要)

3.2.1 Vue实例对象和容器是一一对应的关系

一个Vue实例，只能对应一个容器。
在这里插入图片描述

同样，一个容器也只能对应一个Vue实例对象。
在这里插入图片描述
因此，在Vue中，Vue实例对象和容器是一一对应的关系！！！！

3.2.2 开发中只有一个Vue实例

开发中只有一个Vue实例，但是在Vue实例中可以引入多个Vue组件。
在这里插入图片描述

3.2.3 Vue中 {{ xxx }} 可以写什么？

常见的能写的如下：

Vue实例对象中data的参数。
{{1 + 2}} 页面显示为3。
{{Date.now()}} 页面显示为当前秒数。

总结起来，{{xxx}}里面可以写JS表达式的东西！

那么，什么是JS表达式？

js表达式， js语句， js代码这三个要区分好！

js表达式(expressions):
在这里插入图片描述
js语句(statements):

js代码就是平时我们写的js代码。

4. Vue 模板语法

4.1 {{xxx}} 插值语法

就是双花括号{{xxx}},这种语法就是插值语法。

4.2 v-??? 指令语法

指令语法功能：

用于解析标签，包括：标签属性、标签体内容、绑定时间等等，例如：v-bind(对标签属性)。

v-bind 的使用(v-bind: 可以简写为 : )：

v-bind能够将所对应的属性中的引号里面的值，当成js表达式来执行(包括Vue实例的data属性中的值)。

<!DOCTYPE html>
<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="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
   <div id="root">
       <!-- 差值语法显示 -->
       <h1>差值语法</h1>
       <h3>你好，{{name}}</h3>
       <hr>
       <!-- 指令语法显示 -->
       <h1>指令语法</h1>
       <!-- v-bind可以将引号中url当成表达式来执行，而不是字符串。 -->
       <a v-bind:href="school.url.toUpperCase()">百度1</a>
       <!-- v-bind:href 可以简写为 :href 记住!-->
       <a :href="school.url">百度2</a>
   </div>
   <script>
       Vue.config.productionTip = false;
       new Vue({
           el:"#root",
           data:{
               name:"张三",
               school:{
                   url:"http://www.baidu.com",
                   name:"李四"
               }
       <span class="token punctuation">}</span>
   <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

</script>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

总结起来就是，标签体内的值使用插值语法，标签体属性的值使用指令语法。

除了v-bind指令，还有很多！此外，我们经常用嵌套格式来获取命令，也可以调用一些方法：
请添加图片描述

5. 单向绑定和双向绑定

对于标签元素的属性绑定有两种：

v-bind是单向绑定，v-bind: 可以简写为: 。
v-model是双向绑定。v-model只能应用在表单元素(输入元素)上，简而言之就是要有value值，v-model:value = "xxx"可以简写为v-model = “xxx” 。。
这里的绑定是和Vue开发者工具里的data来绑定的。

请添加图片描述
在devtools的效果图如下：

6.el和data的两种写法方式

6.1 实例Vue对象的一些方法

在这里插入图片描述
那么其他不带$符号的方法属性，不是给开发人员使用的，但是底层在使用，不能随便修改！

请添加图片描述

6.2 el的两种写法

第一种是直接定义el来指定容器。
第二种是$mount()方法来实现来指定容器，mount意思就是挂载。

<!DOCTYPE html>
<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="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>{{name}}</h1>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            // el:'',
            data:{
                name:"张三"
            }
        })
        console.log(vm);
        //$mount比el:'xxx'更加灵活一些,就像下面延迟两秒一样。
        setTimeout(()=>{
            vm.$mount('#root');//$mount可以代表el:'xxx'来操作。
        },2000);
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

6.3 data 两种写法方式

第一种：对象式。
第二种：函数式。

注意函数式，非常重要，组件必须用到函数式，此外，data函数可以简化，并且这里不能使用箭头函数，因为这里的this指向必须是Vue实例对象。

在解释一下，箭头函数本身是没有this的，因此它就会向上一层查找！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div class="root">
    <input type="text" v-model:value="name"><span>{{name}}</span>
    <input type="text" :value="value">
</div>
<script>

Vue.config.productionTip = false;

const vm = new Vue({

el: '.root',
    <span class="token comment">//第一种：对象式</span>
    <span class="token comment">// data: {<!-- --></span>
    <span class="token comment">//     name: 'itholmes',</span>
    <span class="token comment">//     value: '你好'</span>
    <span class="token comment">// }</span>

    <span class="token comment">//第二种：函数式(注意函数式定义的函数必须有return返回值对象)</span>
    <span class="token comment">//函数式一般用到组件当中，很重要。此外，函数式不能为箭头函数因为this指向不同！</span>
    <span class="token function-variable function">data</span><span class="token operator">:</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span>
        <span class="token keyword">return</span> <span class="token punctuation">{<!-- --></span>
            name<span class="token operator">:</span><span class="token string">"itholmes"</span><span class="token punctuation">,</span>
            value<span class="token operator">:</span><span class="token string">'你好'</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">//简写方式：</span>
    <span class="token comment">// data(){<!-- --></span>
    <span class="token comment">//     console.log(this)</span>
    <span class="token comment">//     return {<!-- --></span>
    <span class="token comment">//         name:"itholmes",</span>
    <span class="token comment">//         value:'你好'</span>
    <span class="token comment">//     }</span>
    <span class="token comment">// }</span>

<span class="token punctuation">}</span><span class="token punctuation">)</span>

</script>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

7. MVVM的架构图

一般我们后台代码有mvc分层架构，前端代码也是有mvc或mvvm分层架构的。

而在vue中，我们使用mvvm的分层架构。

DOM Listeners ：模块监听。

Data Bindings ：数据绑定。

这俩个都是很重要的存在记住!

请添加图片描述
注意：

1. data中所有的属性，最后都出现在了vm实例对象上面。
2. vm升上所有的属性和Vue原型上所有的属性，都可以直接在Vue模板中使用。
见源码：

<!DOCTYPE html>
<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="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>学校名称：{{name}}</h1>
        <h1>学校地址：{{address}}</h1>
        <h1>1+1 为什么等于 {{1+1}} ?</h1>
        <h1>测试Vue的$options，{{$options}}</h1>    <!--查看测试Vue的$option内置函数 -->
        <h1>测试Vue原型$emit,{{$emit}}</h1>         <!--查看测试Vue的$emit原型函数 -->
        <h1>测试没有$开头的 _c，{{_c}}</h1>          <!--查看测试Vue的 _C 函数 -->
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            // el:'#root',
            //data中的内容，会传送到vm身上。
            data:{
                name:"清华大学",
                address:"北京"
            }
        })
        vm.$mount("#root");
        console.log(vm);
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

在这里插入图片描述

8. 数据代理 Object.defineProperty方法

8.1 Object.defineProperty方法介绍

Object.defineProperty方法很重要，Vue的底层多处都使用到了该方法。

例如：vue的数据劫持，数据代理，计算属性等底层都使用到了该方法。

Object.defineProperty，翻译过来就是定义属性，换句话说该方法就是用来给对象定义属性的。

Object.defineProperty的参数：

参数1：目标对象。
参数2：要修改或者添加的属性名称。
参数3：目标对象属性的一些特征 (也就是配置项，值为格式类似{ xxx:xxx }的对象)，该对象的参数如下：
- 参数1：value:属性值
- 参数2：writable：对象属性值是否可以被修改 true允许 false不允许
- 参数3：configurable:对象属性是否可以被删除 true允许 false不允许
- 参数4：enumerable:对象属性是否可被枚举
- 参数5：get():给一个属性提供getter方法，当访问这个对象的属性值得时候触发该方法
- 参数6：set():给一个属性提供setter方法，当设置属性值得时候触发该方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
  <script>
    let person = {
      name:'张三',
      sex:'男'
    }
    Object.defineProperty(person,'age',{
      value:18
    });
  </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

注意：ObjectdefineProperty增加的属性，在打印出来后，有些不一样，颜色会比其他直接定义的属性浅一些，因此，可以通过这种方式来判别一下该属性是否是ObjectdefineProperty来创建的。
在这里插入图片描述

注意：Object.defineProperty定义的属性默认都是为false：

enumerable的默认值为false，不能被枚举的(就是不能被遍历的)。
writable的默认值为false，对象属性值不可以被修改。
configurable的默认值为false，对象属性不可以被删除。

下面演示一下enumerable枚举的效果：

下面Object.keys()的用法：可以将对象里的所以的键取出来放到一个数组中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<script>
<span class="token comment">//比较person和person2的效果：</span>

<span class="token keyword">let</span> person <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span>
    name<span class="token operator">:</span> <span class="token string">"王五"</span><span class="token punctuation">,</span>
    sex<span class="token operator">:</span> <span class="token string">"女"</span><span class="token punctuation">,</span>
    age<span class="token operator">:</span> <span class="token number">20</span>
<span class="token punctuation">}</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'正常定义：'</span><span class="token punctuation">,</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>person<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> person2 <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span>
    name<span class="token operator">:</span> <span class="token string">'张三'</span><span class="token punctuation">,</span>
    sex<span class="token operator">:</span> <span class="token string">'男'</span>
<span class="token punctuation">}</span>
Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>person2<span class="token punctuation">,</span> <span class="token string">'age'</span><span class="token punctuation">,</span> <span class="token punctuation">{<!-- --></span>
    value<span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
    <span class="token comment">//默认是不能枚举的，不能枚举也就不能遍历，想要枚举遍历必须设置enumerable为true</span>
    <span class="token comment">//enumerable:true</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'defineProperty:'</span><span class="token punctuation">,</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>person2<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

</script>
<script>

Vue.config.productionTip = false;

</script>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

在这里插入图片描述

8.2 Object.defineProperty方法的get和set使用

8.2.1 get方法(也叫getter) 使用

常用场景(重要)：

在这里插入图片描述

使用Object.definedProperty的get来解决上图问题：

Object.definedProperty的get其实就是getter，获取设置属性时，会调用get方法，从而return值。

在这里插入图片描述

也可以看看get和set中函数的三种写法形式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<script>
<span class="token keyword">let</span> number <span class="token operator">=</span> <span class="token number">20</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> person <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span>
    name<span class="token operator">:</span> <span class="token string">'张三'</span><span class="token punctuation">,</span>
    sex<span class="token operator">:</span> <span class="token string">'男'</span>
<span class="token punctuation">}</span>

Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>person<span class="token punctuation">,</span><span class="token string">'age'</span><span class="token punctuation">,</span><span class="token punctuation">{<!-- --></span>
    enumerable<span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>

    <span class="token comment">//函数的是那种形式写法，一般都使用第三个。</span>

    <span class="token comment">//没有名字的完整写法</span>
    <span class="token comment">// get:function (){<!-- --></span>
    <span class="token comment">//     console.log("有人读取age属性")</span>
    <span class="token comment">//     return number;</span>
    <span class="token comment">// }</span>

    <span class="token comment">//有名字的完整写法</span>
    <span class="token comment">// get:function myfun(){<!-- --></span>
    <span class="token comment">//     console.log("有人读取age属性")</span>
    <span class="token comment">//     return number;</span>
    <span class="token comment">// }</span>

    <span class="token comment">//没有名字的简化写法</span>
    <span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"有人读取age属性"</span><span class="token punctuation">)</span>
        <span class="token keyword">return</span> number<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    
    <span class="token comment">//set也是一样的对应上面</span>
    <span class="token function">set</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    	
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</script>
<script>

Vue.config.productionTip = false;

</script>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

8.2.2 set方法(也叫setter) 使用

Object.definedProperty的set其实就是setter，当有人修改该属性时，会调用set方法，并且会拿到修改的值value作为参数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<script>
<span class="token keyword">let</span> number <span class="token operator">=</span> <span class="token number">20</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> person <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span>
    name<span class="token operator">:</span> <span class="token string">'张三'</span><span class="token punctuation">,</span>
    sex<span class="token operator">:</span> <span class="token string">'男'</span>
<span class="token punctuation">}</span>

Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>person<span class="token punctuation">,</span><span class="token string">'age'</span><span class="token punctuation">,</span><span class="token punctuation">{<!-- --></span>
    enumerable<span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"有人读取age属性"</span><span class="token punctuation">)</span>
        <span class="token keyword">return</span> number<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">set</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"有人修改了age属性，修改的值为："</span><span class="token punctuation">,</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">//注意getter方法是通过number来获取数据的，因此我们想要修改age值，就必须修改number值才对！</span>
        number <span class="token operator">=</span> value<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</script>
<script>

Vue.config.productionTip = false;

</script>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

在这里插入图片描述

总结：
在这里插入图片描述

9. 数据代理

9.1 数据代理例子

数据代理：通过一个对象代理对另一个对象中属性的操作(读/写)。

其实，在上面的number和person就是类似一种数据代理的形式，number代理操作person的age属性读写操作。

下面再写一个例子，来展现两个对象之间的数据代理：

<!DOCTYPE html>
<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>
</head>
<body>
    <script>
        let obj1 = {x:100};
        let obj2 = {y:200};
    <span class="token comment">//数据代理就是通过一个对象代理对另一个对象的属性进行操作。</span>
    Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>obj2<span class="token punctuation">,</span><span class="token string">'x'</span><span class="token punctuation">,</span><span class="token punctuation">{<!-- --></span>
        <span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            <span class="token keyword">return</span> obj1<span class="token punctuation">.</span>x<span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function">set</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            obj1<span class="token punctuation">.</span>x <span class="token operator">=</span> value<span class="token punctuation">;</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"修改成功"</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
	
	<span class="token comment">//这里是双向的都过obj1.x可以修改obj2.x的属性值，也可以通过obj2.x的属性值修改obj1.x的值。</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

在这里插入图片描述

9.2 数据代理详解

首先，说一个误区，很多人认为我们在js中定义好vue实例对象，设定好el，data等属性，我们就可以通过vm.el或vm.data获取到相应的内容，这个观点是大错特错！！！！

因为很简单，我们定义的new Vue({ el:xx , data:xx })，黄色部分仅仅是一个参数！！！并不是一个vue实例对象的变量！这是一个容易混淆的误区。

在Vue中，将data属性以及对应的值转为了_data。
在这里插入图片描述

数据代理详解图：
请添加图片描述

总结起来，数据代理就是通过使用Object.definedProperty(obj , attr , value)以及对应的getter和setter方法，来实现对象与对象间的代理操作！

同时也不难看出，只要做过数据代理的都在vue实例对象中查看到有get和set方法和参数值为(…)这种形式基本上都是做过数据代理的。
在这里插入图片描述

但是 _data 中，虽然和数据代理很像，但它采用的技术叫做数据劫持，并不是数据代理！因为它要时刻与页面的数据进行响应，也正因如此，才会对我们写js传入的data参数进行一些修改，从而得到一个_data，也不难看出 _data多出了很多属性。

在这里插入图片描述

数据代理的本意就是让vue实例对象的数据与页面的数据，链接对应起来，一方修改另一方也要被修改。

10. Vue 事件处理

10.1 v-on 事件

v-on指令：就是当什么什么时候，v-on可以简写为@。
v-on:click就是当点击的时候，v-on:click可以简写为@click。

参数属性methods：来存放我们设定的函数的。

<!DOCTYPE html>
<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>
    <div id="root">
        <h2>你好，{{name}}！</h2>
        <!--
            v-on指令：就是当什么什么时候。
            v-on:click就是当点击的时候。
        -->
        <button v-on:click="myfun">点我提示信息</button>
    </div>
<script>
    Vue.config.productionTip = false;
<span class="token keyword">const</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
    el<span class="token operator">:</span><span class="token string">"#root"</span><span class="token punctuation">,</span>
    data<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
        name<span class="token operator">:</span><span class="token string">"世界"</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    methods<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
        <span class="token function">myfun</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"你好，学生"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</script>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

10.2 methods方法和 event事件对象

我们在methods方法中设定好的函数，默认第一个参数是可以接受到一个event事件对象。
在这里插入图片描述

对于event事件对象，我们常用的方法是target来打印一些东西等等：

<!DOCTYPE html>
<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>
    <div id="root">
        <h2>你好，{{name}}！</h2>
        <!--
            v-on指令：就是当什么什么时候。
            v-on:click就是当点击的时候。
        -->
        <button @click="myfun">点我提示信息</button>
        <input type="text" value="123">
    </div>
<script>
    Vue.config.productionTip = false;
<span class="token keyword">const</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
    el<span class="token operator">:</span><span class="token string">"#root"</span><span class="token punctuation">,</span>
    data<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
        name<span class="token operator">:</span><span class="token string">"世界"</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    methods<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
        <span class="token function">myfun</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//&lt;button&gt;点我提示信息&lt;/button&gt;</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>innerText<span class="token punctuation">)</span><span class="token comment">//点我提示信息</span>
            <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"你好，学生"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</script>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

这里就有一个原则，就是我们在methods写的方法不要写成箭头函数形式，不然this指向的不是vue对象，而是window对象。

10.3 指定参数

传参数就是在函数后面加上括号参数就可以了。

<!DOCTYPE html>
<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>
    <div id="root">
        <h2>你好，{{name}}！</h2>
        <!--
            函数的括号加不加都可以，不传参就不加，传参数就加上。
        -->
        <button @click="myfun">点我提示信息(不传参数)</button>
        <button @click="myfun2(66)">点我提示信息2(传参)</button>
    </div>
<script>
    Vue.config.productionTip = false;
<span class="token keyword">const</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
    el<span class="token operator">:</span><span class="token string">"#root"</span><span class="token punctuation">,</span>
    data<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
        name<span class="token operator">:</span><span class="token string">"世界"</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    methods<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
        <span class="token function">myfun</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//&lt;button&gt;点我提示信息&lt;/button&gt;</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>innerText<span class="token punctuation">)</span><span class="token comment">//点我提示信息</span>
            <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"你好，学生1"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function">myfun2</span><span class="token punctuation">(</span><span class="token parameter">number</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"您好，学生2"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>number<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</script>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

但是，上面代码有个问题就是事件对象event没法得到了！为了解决这个问题，我们还可以通过传参$event来解决。

<!DOCTYPE html>
<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>
    <div id="root">
        <h2>你好，{{name}}！</h2>
        <!--
            函数的括号加不加都可以，不传参就不加，传参数就加上。
        -->
        <button @click="myfun">点我提示信息(不传参数)</button>
        <button @click="myfun2(66,$event)">点我提示信息2(传参)</button>
    </div>
<script>
    Vue.config.productionTip = false;
<span class="token keyword">const</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
    el<span class="token operator">:</span><span class="token string">"#root"</span><span class="token punctuation">,</span>
    data<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
        name<span class="token operator">:</span><span class="token string">"世界"</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    methods<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
        <span class="token function">myfun</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//&lt;button&gt;点我提示信息&lt;/button&gt;</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>innerText<span class="token punctuation">)</span><span class="token comment">//点我提示信息</span>
            <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"你好，学生1"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">//通过$event拿到事件对象event</span>
        <span class="token function">myfun2</span><span class="token punctuation">(</span><span class="token parameter">number<span class="token punctuation">,</span>event</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"您好，学生2"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>number<span class="token punctuation">)</span><span class="token punctuation">;</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</script>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

10.3 为什么不能直接在data中设置函数？

在data直接设置函数是可以执行的，但是会让vue效率低，因为data中所有的内容都要进行数据代理和数据劫持！因此，函数放到data中没意义反而加重vue运行！

在这里插入图片描述

</article>

JZTXT

Vue 学习总结笔记 (一)【转载】

Vue 学习总结笔记 (一)

文章目录

1. Vue 的介绍

1.1 什么是Vue？

1.2 Vue的诞生和特点

1.3 Vue 的引入和 Vue devtools开发者工具

1.4 Vue 引入后浏览器端的信息处理

1.5 Vue.config 配置全局

2. MVC和MVVC的基本流程

3. Vue 的使用详解

3.1 Vue 的mvvm架构

3.2 Vue 的注意事项 (重要)

3.2.1 Vue实例对象和容器是一一对应的关系

3.2.2 开发中只有一个Vue实例

3.2.3 Vue中 {{ xxx }} 可以写什么？

4. Vue 模板语法

4.1 {{xxx}} 插值语法

4.2 v-??? 指令语法

5. 单向绑定和双向绑定

6.el和data的两种写法方式

6.1 实例Vue对象的一些方法

6.2 el的两种写法

6.3 data 两种写法方式

7. MVVM的架构图

8. 数据代理 Object.defineProperty方法

8.1 Object.defineProperty方法介绍

8.2 Object.defineProperty方法的get和set使用

8.2.1 get方法(也叫getter) 使用

8.2.2 set方法(也叫setter) 使用

9. 数据代理

9.1 数据代理例子

9.2 数据代理详解

10. Vue 事件处理

10.1 v-on 事件

10.2 methods方法和 event事件对象

10.3 指定参数

10.3 为什么不能直接在data中设置函数？

JZTXT

Vue 学习总结笔记 (一)【转载】

Vue 学习总结笔记 (一)

文章目录

1. Vue 的介绍

1.1 什么是Vue？

1.2 Vue的诞生 和 特点

1.3 Vue 的引入 和 Vue devtools开发者工具

1.4 Vue 引入后浏览器端的信息处理

1.5 Vue.config 配置全局

2. MVC和MVVC的基本流程

3. Vue 的使用详解

3.1 Vue 的mvvm架构

3.2 Vue 的注意事项 (重要)

3.2.1 Vue实例对象和容器是一一对应的关系

3.2.2 开发中只有一个Vue实例

3.2.3 Vue中 {{ xxx }} 可以写什么？

4. Vue 模板语法

4.1 {{xxx}} 插值语法

4.2 v-??? 指令语法

5. 单向绑定 和 双向绑定

6.el和data的两种写法方式

6.1 实例Vue对象 的一些方法

6.2 el的两种写法

6.3 data 两种写法方式

7. MVVM的架构图

8. 数据代理 Object.defineProperty方法

8.1 Object.defineProperty方法 介绍

8.2 Object.defineProperty方法 的get和set使用

8.2.1 get方法(也叫getter) 使用

8.2.2 set方法(也叫setter) 使用

9. 数据代理

9.1 数据代理 例子

9.2 数据代理 详解

10. Vue 事件处理

10.1 v-on 事件

10.2 methods方法 和 event事件对象

10.3 指定参数

10.3 为什么不能直接在data中设置函数？

1.2 Vue的诞生和特点

1.3 Vue 的引入和 Vue devtools开发者工具

5. 单向绑定和双向绑定

6.1 实例Vue对象的一些方法

8.1 Object.defineProperty方法介绍

8.2 Object.defineProperty方法的get和set使用

9.1 数据代理例子

9.2 数据代理详解

10.2 methods方法和 event事件对象