Vue 学习总结笔记 (一)
<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="{"spm":"1001.2101.3001.6332"}">
<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 的介绍
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代码一步步实现的效果,如下:

- 声明式编码通过一些指令的方式来简化操作,从而得到想要的结果,如下图:

- 命令式编码就是通过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 ,也是可以查询到一些全局配置的!会看官网很重要!一定要学习看官网!
可以在控制台直接打印出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"></</span>script</span><span class="token punctuation">></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">//<button>点我提示信息</button></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">//<button>点我提示信息</button></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">//<button>点我提示信息</button></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>
