<!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> 天气案例--演示Vue中监视属性</title>
<!--引入 vue -->
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/dayjs.min.js"></script>
<style>
*{
margin-top: 20px;
}
.demo1{
height: 120px;
width: 260px;
background-color: skyblue;
}
.box1{
padding: 15px;
background-color: skyblue;
}
.box2{
padding: 15px;
background-color: orange;
}
.list{
width: 200px;
height: 200px;
background-color: peru;
overflow: auto;
}
li{
height: 10px;
}
.liHeght{
height: 100px;
}
.basic{
width: 400px;
height: 100px;
border: 1px solid black;
}
.happy{
border: 4px solid red;;
background-color: rgba(255, 255, 0, 0.644);
background: linear-gradient(30deg,yellow,pink,orange,yellow);
}
.sad{
border: 4px dashed rgb(2, 197, 2);
background-color: gray;
}
.normal{
background-color: skyblue;
}
.vueClassStyle{
background-color: yellowgreen;
}
.vueClassStyle2{
font-size: 30px;
text-shadow:2px 2px 10px red;
}
.vueClassStyle3{
border-radius: 20px;
}
</style>
</head>
<body>
<!--
1：初识Vue工作，就必须创建1个vue实例，且要传入一个配置对象。
2：root容器里的代码依然符合html规范，只不过混入里一些特殊的vue语法。
3：root容器里的代码被称之为【vue 模板】
4:Vue实例和容器是一一对应的；
5：真实开发中只有一个Vue实例，并且会配合着组件一起使用。
6：{{xxx}} 中的xxx要写JS表达式，且xxx可以自动读取到data中的所有属性。
7：一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新。
注意区分：js表达式和Js代码(语句)
1：表达式：一个表达式生成一个值。可以放在任何一个需要值得地方；
(1)：a
(2): a+b
(3):demo(1)
(4): 1==3? 2:3; //即：三元表达式
2:Js代码(语句)
(1):if(){}
(2):for(){}
8: Vue模板语法有2大类：
(1)：插值语法：
功能：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
(2)：指令语法：
功能：用于解析标签(包括：标签属性、标签体内容、绑定事件......)。
举例：v-bind:href="XXX" 或者 :href="xxx" ，xxx 同样要写js表达式。且可以直接读取到data中的所有属性。
备注：Vue中有很多的指令。且形式都是： v-??? ,此处我们只是拿 v-bind 举例子。
9：数据绑定：
Vue中有2种数据绑定的方式：
(1):单向绑定(v-bind):数据只能从data流向页面。
(2):双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data.
备注：
①：双向绑定一般都应用在表单类元素上(如：input、select 等)
②：v-model:value 可以简写 为 v-model,因为v-model默认收集的就是value的值。
10:data与el的2种写法：
(1):el有2种写法
⒈ new Vue 时候配置 el属性。
⒉ 先创建const v=new Vue({});实例，随后再通过 v.$mount("#root");指定el的值。
(2):data 有2种写法。
⒈ 对象式
⒉ 函数式
任何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
(3):一个重要的原则：
由Vue管理的函数，一定不要写箭头函数，一旦写里箭头函数，this就不再试Vue实例里。
11：MVVM 模型：
(1):M 模型(Model):data中的数据
(2):V 视图(View) :模板代码
(3):VM 视图模型(ViewModel):Vue 实例
观察发现：
（1）：data中所有的属性，最后都出现在vm身上。
(2): vm身上所有的属性及 Vue原型上所有的属性，在Vue模板中都可以最使用
12：回顾Object.defineproperty方法
13：何为数据代理：通过一个对象代理对另外一个对象中属性的操作(读/写)
let obj={x:1000};
let obj2={y:2000};
//想通过 obj2 来读取及修改 obj的x属性值
//以下是最简单的数据代理实现模板
Object.defineProperty(obj2,'x',{
get(){
return obj.x;
},
set(value){
obj.x=value;
}
});
14：Vue中的数据代理
(1):Vue中的数据代理：通过vm对象来代理data对象中属性的操作(读/写)
(2):Vue中数据代理的好处：更加方便的操作data中的数据
(3):基本原理：
通过Object.defineProperty()把data对象中的所有属性添加到vm上，为每一个添加到vm上的属性，都指定一个getter/setter.
在getter/setter内部去操作(读/写)data中对应的属性。
15:Vue中事件的基本使用：
(1): 使用v-on:xxx 或者@xxx 绑定事件，其中xxx是事件名；
(2): 事件的回调需要配置在methods对象中，最终会在vm上。
(3)：methods中配置的函数，不要用箭头函数，否则this就不是vm了。
(4): methods中配置函数，都是被vue所管理的函数，this的指向是vm 或者组件实例对象。
(5): @click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参数。
16：Vue中事件的修饰符
(1):prevent:阻止默认事件(常用)
(2)：stop：阻止事件冒泡（常用）
(3): once:事件只触发一次(常用)
(4)：capture:使用事件的捕获模式。
(5):self ：只有event.target 是当前操作的元素是才触发事件；
(6):passive :事件的默认行为立即执行，无需等待事件回调执行完毕。
17:Vue中键盘事件
(1).Vue中常用的按键别名：
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right
(2).Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
(3).系统修饰键（用法特殊）：ctrl、alt、shift、meta
(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用：正常触发事件。
(4).也可以使用keyCode去指定具体的按键（不推荐）
(5).Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
18：vue的计算属性：
1.定义：要用的属性不存在，要通过已有属性计算得来。
2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
3.get函数什么时候执行？
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5.备注：
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
19：vue的监视属性watch：
1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
2.监视的属性必须存在，才能进行监视！！
3.监视的两种写法：
(1).new Vue时传入watch配置
(2).通过vm.$watch监视
4.深度监视：
(1).Vue中的watch默认不监测对象内部值的改变（一层）。
(2).配置deep:true可以监测对象内部值改变（多层）。
备注：
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
20：computed和watch之间的区别：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
这样this的指向才是vm 或 组件实例对象。
21:Vue 绑定样式：
1. class样式
写法:class="xxx" xxx可以是字符串、对象、数组。
字符串写法适用于：类名不确定，要动态获取。
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
2. style样式
:style="{fontSize: xxx}"其中xxx是动态值。
:style="[a,b]"其中a、b是样式对象。
22:Vue中的条件渲染：
1.v-if
写法：
(1).v-if="表达式"
(2).v-else-if="表达式"
(3).v-else="表达式"
适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
2.v-show
写法：v-show="表达式"
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
23：Vue中的列表渲染：v-for指令:
1.用于展示列表数据
2.语法：v-for="(item, index) in xxx" :key="yyy"
3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
24:Vue中的 面试题：react、vue中的key有什么作用？（key的内部原理）
1. 虚拟DOM中key的作用：
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,
随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
2.对比规则：
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM，随后渲染到到页面。
3. 用index作为key可能会引发的问题：
1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
2. 如果结构中还包含输入类的DOM：
会产生错误DOM更新 ==> 界面有问题。
4. 开发中如何选择key?:
1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示， 使用index作为key是没有问题的。
25:Vue监视数据的原理：
1. vue会监视data中所有层次的数据。
2. 如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据。
(1).对象中后追加的属性，Vue默认不做响应式处理
(2).如需给后添加的属性做响应式，请使用如下API：
Vue.set(target，propertyName/index，value) 或
vm.$set(target，propertyName/index，value)
3. 如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
(1).调用原生对应的方法对数组进行更新。
(2).重新解析模板，进而更新页面。
4.在Vue修改数组中的某个元素一定要用如下方法：
1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2.Vue.set() 或 vm.$set()
特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！
26:收集表单数据：
若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
若：<input type="checkbox"/>
1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2.配置input的value属性:
(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
(2)v-model的初始值是数组，那么收集的的就是value组成的数组
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤
27: 过滤器：
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：
1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
备注：
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据, 是产生新的对应的数据
28:我们学过的指令：
v-bind : 单向绑定解析表达式, 可简写为 :xxx
v-model : 双向数据绑定
v-for : 遍历数组/对象/字符串
v-on : 绑定事件监听, 可简写为@
v-if : 条件渲染（动态控制节点是否存存在）
v-else : 条件渲染（动态控制节点是否存存在）
v-show : 条件渲染 (动态控制节点是否展示)
v-text指令：
1.作用：向其所在的节点中渲染文本内容。
2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
29:v-html指令：
1.作用：向指定节点中渲染包含html结构的内容。
2.与插值语法的区别：
(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
(2).v-html可以识别html结构。
3.严重注意：v-html有安全性问题！！！！
(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
30:v-cloak指令（没有值）：
1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
31:v-once指令：
1.v-once所在节点在初次动态渲染后，就视为静态内容了。
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
32：自定义指令总结：
一、定义语法：
(1).局部指令：
new Vue({ new Vue({
directives:{指令名:配置对象} 或 directives{指令名:回调函数}
}) })
(2).全局指令：
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)
二、配置对象中常用的3个回调：
(1).bind：指令与元素成功绑定时调用。
(2).inserted：指令所在元素被插入页面时调用。
(3).update：指令所在模板结构被重新解析时调用。
三、备注：
1.指令定义时不加v-，但使用时要加v-；
2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
33:生命周期：
1.又名：生命周期回调函数、生命周期函数、生命周期钩子。
2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
4.生命周期函数中的this指向是vm 或 组件实例对象。
34:常用的生命周期钩子：
1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
关于销毁Vue实例
1.销毁后借助Vue开发者工具看不到任何信息。
2.销毁后自定义事件会失效，但原生DOM事件依然有效。
3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
==========================================================================================================================================
vm的一生(vm的生命周期)∶
将要创建===>调用beforeCreate函数。
创建完毕===>调用created函数。
将要挂载===>调用beforeMount函数。
(重要） 挂载完毕===>调用mounted函数。=============>【重要的钩子】
将要更新===>调用beforeUpdate图数。
更新完毕===>调用updated函数。
(重要) 将要销毁===>调用beforeDestroy函数。========>【重要的钩子】
销毁完毕===>调用destroyed函数。
-->
<!--准备好一个容器-->
<div id="root">
<hr style="height:10px;border:none;border-top:10px groove skyblue;" />
<h1>插值语法</h1>
<h3>你好，{{name}}</h3>
<hr style="height:10px;border:none;border-top:10px groove skyblue;" />
<h1>指令语法</h1>
<a v-bind:href="wangzhi.url">点我进行跳转至{{wangzhi.name}},绑定方式1：</a>
<br/>
<a :href="wangzhi.url">点我进行跳转至{{wangzhi.name}}，绑定方式2</a>
<hr style="height:10px;border:none;border-top:10px groove skyblue;" />
<h1>数据绑定--普通写法</h1>
<!-- v-bind 是单项绑定 只能由vue.data对象给input输入框赋值，修改了input值后并不能修改vue.data的值 -->
单项数据绑定：<input type="text" v-bind:value="name" />
<br />
双向数据绑定：<input type="text" v-model:value="name" />
<!-- 如下代码是错误的。因为v-model 只能应用在表单元素(输入类元素)上。 -->
<!-- <h2 v-model:x="name">你好啊 ！</h2> -->
<h2 :x="name">你好啊 ！</h2>
<hr>
<h1>数据绑定--简写</h1>
<!-- v-bind 是单项绑定 只能由vue.data对象给input输入框赋值，修改了input值后并不能修改vue.data的值 -->
单项数据绑定：<input type="text" :value="name" />
<br />
<!-- v-model="name" ==简写为==> v-model="name" -->
双向数据绑定：<input type="text" v-model="name" />
<hr style="height:10px;border:none;border-top:10px groove skyblue;" />
<h1>测试VMV模型下的表达式</h1>
<h3>测试一下1：{{1+1}}</h3>
<h3>测试一下2：{{$options}}</h3>
<h3>测试一下3：{{$emit}}</h3>
<h3>测试一下4：{{_c}}</h3>
<hr style="height:10px;border:none;border-top:10px groove skyblue;" />
<h1> 演示Vue中的数据代理</h1>
<h3>网站名称：{{wangzhi.name}}</h3>
<h3>网站域名：{{wangzhi.url}}</h3>
<hr style="height:10px;border:none;border-top:10px groove skyblue;" />
<h1> 演示Vue中的事件的基本使用</h1>
<h3>网站名称：{{wangzhi.name}}</h3>
<button v-on:click="showInfo">普通写法：“@click="showInfo"”：点击展示"alert("展示 this == vm 信息")"提示信息</button>
<!-- v-on:click="showInfo" 可以简写为 @click="showInfo" -->
<button @click="showInfo">简写方式：“@click="showInfo"”：点击展示"alert("展示 this == vm 信息")"提示信息</button>
<button v-on:click="showInfo1">普通写法：“v-on:click="showInfo1"”点击展示"alert("展示 this != vm 信息")"提示信息</button>
<button @click="showInfo3($event,66)">带参数调用方法</button>
<button @click="showInfo4(66,$event)">带参数调用方法</button>
<hr style="height:10px;border:none;border-top:10px groove skyblue;" />
<h1> 演示Vue中的事件修饰符</h1>
<h3>----prevent：阻止默认事件-------</h3>
<a href="http://www.baidu.com" @click="showInfo7">a标签href网址跳转</a>
<a href="http://www.baidu.com" @click="showInfo5">阻止a标签href网址跳转方式一</a>
<!-- @click.prevent 阻止a标签默认调用 href的跳转行为 方式2 -->
<a href="http://www.baidu.com" @click.prevent="showInfo6">阻止a标签href网址跳转方式二</a>
<hr>
<h3>----stop:阻止事件冒泡-------</h3>
<div class="demo1" @click="showInfo8">
<button @click="showInfo9">点击出现事件冒泡</button>
</div>
<div class="demo1" @click="showInfo10">
<button @click="showInfo11">点击阻止出现事件冒泡方式1</button>
</div>
<div class="demo1" @click="showInfo12">
<button @click.stop="showInfo12">点击阻止出现事件冒泡方式2</button>
</div>
<hr>
<h3>----once:事件只触发一次------</h3>
<button @click="showInfo13">button每次点击都有效</button><br><br>
<button @click.once="showInfo13">button仅点一次有效</button>
<hr>
<h3>----capture:使用事件的捕获模式------</h3>
<div class="box1" @click="showMsg(1)">
出现事件捕获外层 div1
<div class="box2" @click="showMsg(2)">
出现事件捕获外层 div2 《----- 事例点击位置
</div>
</div>
<div class="box1" @click.capture="showMsg(1)">
在事件的捕获层进行事件冒泡出现，且触发事件 div1
<div class="box2" @click="showMsg(2)">
在事件的捕获层进行事件冒泡出现 div2 《----- 事例点击位置
</div>
</div>
<h3>----self ：只有event.target 是当前操作的元素是才触发事件-------</h3>
<div class="demo1" @click.self="showSelf1">
<button @click="showSelf2">点击出现事件冒泡</button>
</div>
<h3>--passive ：事件的默认行为立即执行，无需等待事件回调执行完毕---</h3>
<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
<ul @wheel.passive="demo" class="list">
<li class="liHeght">1</li>
<li class="liHeght">2</li>
<li class="liHeght">3</li>
<li class="liHeght">4</li>
</ul>
<hr style="height:10px;border:none;border-top:10px groove skyblue;" />
<h1> 演示Vue中的键盘事件</h1>
<input type="text" placeholder="按下回车向下提示输入" @keydown.enter="keydown"><br>
<input type="text" placeholder="按下回车向上提示输入" @keyUp="keyUp"><br><br>
<hr style="height:10px;border:none;border-top:10px groove skyblue;" />
<h1> 演示Vue中的计算属性</h1>
<hr>
<h3>姓名案例--插值语法实现：计算属性</h3>
<div >
姓 ： <input type="text" v-model="computeInfo.firstName" /> <br/>
名 ： <input type="text" v-model="computeInfo.lastName" /> <br/> <br/> <br/>
全名：<span>{{computeInfo.firstName.slice(0,3)}}-{{computeInfo.lastName}}</span>
</div>
<hr>
<h3>姓名案例--方法实现：计算属性</h3>
<div >
姓 ： <input type="text" v-model="computeInfo.firstName" /> <br/>
名 ： <input type="text" v-model="computeInfo.lastName" /> <br/> <br/> <br/>
<!-- 全名：<span> {{fullName()}}</span> -->
</div>
<hr>
<h3>姓名案例--计算属性实现：计算属性</h3>
<div >
姓 ： <input type="text" v-model="computeInfo.firstName" /> <br/>
名 ： <input type="text" v-model="computeInfo.lastName" /> <br/> <br/> <br/>
全名：<span> {{computedFullName}}</span>
</div>
<hr>
<h3>姓名案例--计算属性实现(简写模式)：计算属性</h3>
<div >
姓 ： <input type="text" v-model="computeInfo.firstName" /> <br/>
名 ： <input type="text" v-model="computeInfo.lastName" /> <br/> <br/> <br/>
全名：<span> {{computedFullName1}}</span>
</div>
<hr style="height:10px;border:none;border-top:10px groove skyblue;" />
<h1> 天气案例--演示Vue中的监视属性</h1>
<hr>
<h3>天气案例-- @xxxx的方法实现</h3>
<div >
<h2>今天天气很<span style="color:red ;">{{weather}}</span></h2>
<button @click="changeWeather">切换天气</button>
</div>
<hr>
<h3>天气案例--绑定事件的时候：@xxx='yyy' yyy可以写一些简单的语句</h3>
<div >
<h2>今天天气很<span style="color:red ;">{{weather}}</span></h2>
<button @click="isHot=!isHot">切换天气</button>
</div>
<hr>
<h3>天气案例--vue 监视属性实现</h3>
<div >
<h2>今天天气很<span style="color:red ;">{{weatherInfo}}</span></h2>
<button @click="changeWeatherInfo">切换天气</button>
</div>
<hr>
<h3>vue 深度监视属性实现</h3>
<div class="box2" >
<h3>a的值是：{{numbers.a}}</h3>
<button @click="numbers.a++">点击进行a++</button>
<hr>
<h3>b的值是：{{numbers.b}}</h3>
<button @click="numbers.b++">点击进行b++</button>
</div>
<hr style="height:10px;border:none;border-top:10px groove skyblue;" />
<h1> 演示Vue中的绑定样式</h1>
<div class="box2" >
<div class="basic vueClassStyle vueClassStyle2 vueClassStyle3"> basic</div>
<div class="happy vueClassStyle vueClassStyle2 vueClassStyle3"> happy</div>
<div class="sad vueClassStyle vueClassStyle2 vueClassStyle3"> sad</div>
<div class="normal vueClassStyle vueClassStyle2 vueClassStyle3"> normal</div>
<div class="vueClassStyle"> vueClassStyle</div>
<div class="vueClassStyle2"> vueClassStyle2</div>
<div class="vueClassStyle3"> vueClassStyle3</div>
</div>
<hr>
<h3>演示Vue中的点击事件切换样式:绑定class样式--字符串写法:<span style="color:red;">适用于：样式的类名不确定，需要动态指定</span></h3>
<div class="basci " :class="changeClass" @click="changeMood" >{{name}}</div>
<hr>
<h3>演示Vue中的点击事件切换样式:绑定class样式--数组写法:<span style="color:red;">适用于：要绑定的样式个数不确定、名字也不确定</span></h3>
<div class="basci " :class="arrayClass" @click="changeArrayClass" >{{name}}</div>
<hr>
<h3>演示Vue中的点击事件切换样式:绑定class样式--对象写法<span style="color:red;">适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用</span></h3>
<div class="basic" :class="classObj">{{name}}</div>
<hr>
<h3>演示Vue中的点击事件切换样式:绑定style样式--对象写法 </h3>
<div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
<h3>演示Vue中的点击事件切换样式:绑定style样式--数组写法</h3>
<div class="basic" :style="styleArr">{{name}}</div>
<hr style="height:10px;border:none;border-top:10px groove skyblue;" />
<h1> 演示Vue中的条件渲染</h1></h1>
<div class="box1">
<hr>
<h3> == <span style="color:red;"> v-show 的掩藏与实现：原理是底层调整 display</span> == </h3>
<h3 v-show="isShow" >你好：{{name}}</h3>
<!-- <h2 v-show="false">欢迎来到{{name}}</h2> -->
<h2 v-show="n === 1">Angular</h2>
<h2 v-show="n === 2">React</h2>
<h2 v-show="n === 3">Vue</h2>
<hr>
<h3> == <span style="color:red;"> v-if 的掩藏与实现:不进行dom节点渲染</span> == </h3>
<h3 v-if="isIf" >你好：{{name}}</h3>
<!-- <h2 v-if="false">欢迎来到{{name}}</h2> -->
<hr>
<h3> == <span style="color:red;"> v-if 、v-else-if </span> == </h3>
<div v-if="n === 1">Angular</div>
<div v-else-if="n === 2">React</div>
<div v-else-if="n === 3">Vue</div>
<hr>
<button @click="n<3?n++:n=0" class="normal vueClassStyle vueClassStyle2 vueClassStyle3">点击进行n+1</button>
<h3 >当前值为：{{n}}</h3>
<hr>
<h3> == <span style="color:red;"> v-if与template的配合使用 </span> == </h3>
<template v-if="n === 1">
<h2>你好</h2>
<h2>{{wangzhi.name}}</h2>
<h2>{{wangzhi.address}}</h2>
</template>
</div>
<hr style="height:10px;border:none;border-top:10px groove skyblue;" />
<h1> 演示Vue中的列表渲染</h1></h1>
<div class="box1" >
<h3>基本列表渲染</h3>
<hr>
<!-- 遍历数组 -->
<h4>人员列表（遍历数组）</h4>
<ul class="list">
<li v-for="(p,index) of persons" :key="index"> <!-- :key="p.id" -->
{{p.name}}-{{p.age}}
</li>
</ul>
<hr>
<!-- 遍历对象 -->
<h2>汽车信息（遍历对象）</h2>
<ul class="list" style="width: 100%;">
<li v-for="(value,k) of car" :key="k">
{{k}}-{{value}}
</li>
</ul>
<hr>
<!-- 遍历字符串 -->
<h2>测试遍历字符串（用得少）</h2>
<ul class="list">
<li v-for="(char,index) of str" :key="index">
{{char}}-{{index}}
</li>
</ul>
<hr>
<!-- 遍历指定次数 -->
<h2>测试遍历指定次数（用得少）</h2>
<ul class="list">
<li v-for="(number,index) of 10" :key="index">
{{index}}-{{number}}
</li>
</ul>
<hr>
</div>
<hr style="height:10px;border:none;border-top:10px groove skyblue;" />
<h1> 演示Vue中的key的原理</h1></h1>
<div class="box1" >
<!-- 遍历数组 -->
<h2>人员列表（遍历数组）</h2>
<button @click.once="add">添加一个老刘</button>
<ul>
<li v-for="(p,index) of persons" :key="p.id">
{{p.name}}-{{p.age}} <input type="text" >
</li>
</ul>
</div>
<hr />
<h1> 演示Vue中的人员列表（列表过滤）</h1></h1>
<div class="box1" >
<!-- 遍 历数组 -->
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字" v-model="keyWord">
<ul>
<li v-for="(p,index) of filPerons" :key="index">
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
</div>
<hr />
<h1> 演示Vue中的人员列表（列表排序）</h1></h1>
<div class="box1" >
<!-- 遍历数组 -->
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字" v-model="keyWord">
<button @click="sortType = 2">年龄升序</button>
<button @click="sortType = 1">年龄降序</button>
<button @click="sortType = 0">原顺序</button>
<ul>
<li v-for="(p,index) of filPerons1" :key="p.id">
{{p.name}}-{{p.age}}-{{p.sex}}
<input type="text">
</li>
</ul>
</div>
<hr />
<h1> 演示Vue中的 Vue set 的使用、监测数组数据改变的原理 </h1></h1>
<div class="box1" >
<h1>汽车信息</h1>
<h2>汽车名称：{{car.name}}</h2>
<h2>外文名：{{car.EnglisthName}}</h2>
<h2>汽车地址：{{car.address}}</h2>
<h2 v-if="car.companyName">公司名称：{{car.companyName}}</h2>
<button @click="addCarProperty">添加汽车属性及变更属性值</button>
<h2>汽车品牌</h2>
<ul>
<li v-for="(b,index) in car.brand" :key="index">
{{b}}
</li>
</ul>
<h2>汽车品牌出售信息</h2>
<ul>
<li v-for="p in car.product" :key="p.id">
{{p.name}}--{{p.carModels}}--{{p.price}}
</li>
</ul>
</div>
<hr />
<h1> 演示Vue中的 更新数组的数据有效方案 </h1></h1>
<div class="box1" >
<h2>人员列表</h2>
<button @click="updateMei">更新马冬梅的信息</button>
<ul>
<li v-for="(p,index) of persons1" :key="p.id">
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
</div>
<hr />
<h1> 演示Vue中的列表展示相关信息总结 </h1></h1>
<div class="box1" >
<h1>汽车信息</h1>
<h2>汽车名称：{{car.name}}</h2>
<h2>外文名：{{car.EnglisthName}}</h2>
<h2>汽车地址：{{car.address}}</h2>
<h2>汽车品牌统计数：{{car.brandCount}}</h2>
<h2 v-if="car.companyName">公司名称：{{car.companyName}}</h2>
<h2>汽车品牌</h2>
<ul>
<li v-for="(b,index) in car.brand" :key="index">
{{b}}
</li>
</ul>
<h2>汽车品牌出售信息</h2>
<ul>
<li v-for="p in car.product" :key="p.id">
{{p.name}}--{{p.carModels}}--{{p.price}}
</li>
</ul>
<button @click="car.brandCount++">汽车品牌统计数：+1</button> <br/>
<button @click="addCarProperty">添加汽车属性及变更属性值</button>
<button @click="car.companyName = '奥迪' ">修改公司名称</button> <br/>
<button @click="addProduct">在"汽车品牌出售信息"列表首位添加一个汽车出售信息</button> <br/>
<button @click="updateFirstProductName">修改汽车品牌出售信息"列表中第一个汽车出售信息的汽车品牌为：奥迪Q8</button> <br/>
<button @click="addBrand">添加一个汽车品牌</button> <br/>
<button @click="updateBrand">修改第一个汽车品牌为：奥迪Q8</button> <br/>
<button @click="removeBrand">过滤掉汽车品牌中的"奥迪A7"</button> <br/>
</div>
<hr style="height:10px;border:none;border-top:10px groove skyblue;" />
<h1> 演示Vue中的收集表单数据</h1></h1>
<div class="box1" >
<form action="" @submit.prevent="formSubmit" >
<label for="acountId">账号：</label> <input type="text" id="acountId" v-model.trim="userInfo1.account"> <br/><br/>
<label for="passwordId">密码：</label><input type="password" id="passwordId" v-model="userInfo1.password"> <br/><br/>
<label for="ageId">年龄：</label><input type="number" id="ageId" v-model.number="userInfo1.age"> <br/><br/>
<label for="sexId">性别：</label>
男<input type="radio" name="sex" id="sexId" v-model="userInfo1.sex" value="male">
女<input type="radio" name="sex" v-model="userInfo1.sex" value="female"> <br/><br/>
爱好：
学习<input type="checkbox" v-model="userInfo1.hobby" value="study">
打游戏<input type="checkbox" v-model="userInfo1.hobby" value="game">
吃饭<input type="checkbox" v-model="userInfo1.hobby" value="eat">
<br/><br/>
<label for="cityId">所属校区</label>
<select v-model="userInfo1.city" id="cityId" >
<option value="">请选择校区</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
<option value="wuhan">武汉</option>
</select>
<br/><br/>
<label for="otherId">其他信息：</label>
<textarea v-model.lazy="userInfo1.other" id="otherId" ></textarea> <br/><br/>
<input type="checkbox" v-model="userInfo1.agree">阅读并接受<a href="http://www.baidu.com">《用户协议》</a>
<button>提交</button>
</form>
</div>
<hr style="height:10px;border:none;border-top:10px groove skyblue;" />
<h1> 演示Vue中的过滤器(以时间为例)</h1>
<div class="box1" >
<h2>显示格式化后的时间</h2>
<!-- 计算属性实现 -->
<span style="color: red;">计算属性实现</span>
<h3>现在是：{{fmtTime}}</h3>
<hr/>
<!-- methods实现 -->
<span style="color: red;">methods实现</span>
<h3>现在是：{{getFmtTime()}}</h3>
<hr/>
<!-- 过滤器实现 -->
<span style="color: red;">过滤器实现</span>
<h3>现在是：{{time | timeFormater}}</h3>
<hr/>
<!-- 过滤器实现（传参） -->
<span style="color: red;">过滤器实现（传参）</span>
<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
<h3 :x="msg | mySlice">{{name}}</h3>
</div>
<hr style="height:10px;border:none;border-top:10px groove skyblue;" />
<h1> 演示Vue中的v-text指令</h1>
<div class="box1" >
<span style="color: red;">插值语法：</span>
<div>你好，{{name}}</div> <br/>
<hr/>
<span style="color: red;">v-text实现：</span>
<div v-text="name"></div>
<div v-text="str1"></div>
<hr/>
</div>
<hr style="height:10px;border:none;border-top:10px groove skyblue;" />
<h1> 演示Vue中的v-html指令</h1>
<div class="box1" >
<span style="color: red;">插值语法：</span>
<div>你好，{{name}}</div>
<hr/>
<span style="color: red;">v-html实现：</span>
<div v-html="str1"></div>
<div v-html="str2"></div>
</div>
<hr style="height:10px;border:none;border-top:10px groove skyblue;" />
<h1> 演示Vue中自定义指令</h1>
<div class="box1" >
<!--
需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
-->
<hr>
<h2>{{name}}</h2>
<h2>当前的n值是：<span v-text="n"></span></h2><br>
<span style="color:red">自定义指令：v-big方法</span><br>
<h2>放大10倍后的n值是：<span v-big="n"></span></h2> <br>
<span style="color:red">自定义指令：v-big-number方法</span><br>
<h2>放大100倍后的n值是：<span v-big-number="n"></span></h2><br>
<span style="color:red">自定义指令：全局v-big1方法</span><br>
<h2>放大1000倍后的n值是：<span v-big1="n"></span></h2><br>
<button @click="n<20?n++:n=0">点击进行n+1</button>
<hr>
<span style="color:red">自定义指令： vm对象里的自定义指令directives集合里v-fbind方法中的具体事件操作方法：bind、inserted、update</span><br>
<input type="text" v-fbind:value="n"><br>
<span style="color:red">自定义指令： Vue对象里的全 局自定义指令directive里v-fbind1方法中的具体事件操作方法：bind、inserted、update</span><br>
<input type="text" v-fbind:value="n">
</div>
<hr style="height:10px;border:none;border-top:10px groove skyblue;" />
<h1> 演示Vue中的说明周期</h1>
<div class="box1" >
<h2 v-if="a">你好啊</h2>
<h2 :style="{opacity}">欢迎学习Vue</h2>
<button @click="opacity = 1">透明度设置为1</button>
<button @click="stop">点我停止变换</button>
<hr>
<span style="color:red">
<h2>生命周期中的事件方法：</h2>
<h3>beforeCreate</h3> 此时:无法通过vm访问到data中的数据、methods中的方法。<br>
<h3>created </h3>此时： 可以通过vm访问到data中的数据、methods中配置的方法。<br>
<h3>beforeMount </h3>此时： <br>
1：页面呈现的是未经Vue编译的DOM结构<br>
2:所有的DOM的操作，最终都不奏效。<br>
<h3>mounted </h3>此时： <br>
1.页面中呈现的是经过Vue编译的DOM .<br>
2.对DOM的操作均有效（尽可能避免）至此初始化过程结束，一般在此进行:开启定时器、发送网络请求.订阅消息、绑定白定义事件、等初始化操作。<br>
<h3>beforeUpdate </h3> 此时:数据是新的，但页面是旧的。即:贞面尚未和数据保持同步。<br>
<h3>updated </h3> 此时:数据是新的，页面也是新的，即:页面和数据保持同步。<br>
<h3>beforeDestroy </h3>此时: vm中所有的:data、methods、指令等等，都处于可用状态，马上要执行销毁过程，一般在此阶段:关闭定时器、取消订阅消息、解绑白定义事件等收尾操作 <br>
<h3>destroyed </h3>此时：<br>
1.销毁后借助Vue开发者工具看不到任何信息。<br>
2.销毁后自定义事件会失效，但原生DOM事件依然有效。<br>
3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。 <br>
</span>
<hr>
<img src="../js/生命周期.png" width="100%"> </img>
<hr>
</div>
<hr style="height:10px;border:none;border-top:10px groove skyblue;" />
<h1> 演示Vue中的非单文件组件</h1>
<div class="box1" >
<h3>基本使用</h3>
<hr>
<hr>
</div>
<hr style="height:10px;border:none;border-top:10px groove skyblue;" />
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; //阻止Vue 在启动时生成生产提示
let data={
name:"Alan",
wangzhi:{
url:"www.baidu.com",
name:"百度",
address:"北京"
},
computeInfo:{
firstName:' 张',
lastName:'三'
},
isHot:true,
numbers:{
a:1,
b:1
},
changeClass:"normal",
arrayClass:['vueClassStyle','vueClassStyle2','vueClassStyle3'],
classObj:{
vueClassStyle:true,
vueClassStyle2:false,
},
styleObj:{
fontSize: '40px',
color:'red',
backgroundColor:'orange'
},
styleArr:[
{
fontSize: '40px',
color:'blue',
},
{
backgroundColor:'gray'
}
],
isShow:true,
isIf:true,
n:0,
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20}
],
car:{
name:'奥迪',
EnglisthName:'Audi',
industry:'汽车设计制造',
address:'德国',
brandCount:10,
brand:['奥迪A3','奥迪A4','奥迪A5','奥迪a6','奥迪A7'],
brandObj:{
b1:"奥迪A3",
b2:"奥迪A4",
b3:"奥迪A5",
b4:"奥迪a6",
b5:"奥迪A7",
b6:"奥迪A8",
b7:"奥迪Q2",
b8:"奥迪Q3",
b9:"奥迪Q5",
b10:"奥迪Q7",
b11:"奥迪Q8",
b12:"奥迪R8",
b13:"奥迪e-tron",
},
product:[
{id:'001',name:'奥迪A3',carModels:"Limousine 40TFSI S-Line舒适型",price:'27.98 万元 '},
{id:'002',name:'奥迪A3',carModels:"Limousine 40TFSI S-Line豪华型",price:'33.43 万元 '},
{id:'003',name:'奥迪A3',carModels:"Sportback 40TFSI S-Line舒适型",price:'26.98 万元 '},
{id:'004',name:'奥迪A3',carModels:"Sportback 40TFSI S-Line豪华型",price:'32.43 万元 '},
{id:'005',name:'奥迪A3',carModels:"Sportback 35TFSI 进取型",price:'19.99 万元 '},
{id:'006',name:'奥迪A3',carModels:"Sportback 35TFSI 时尚型",price:'21.89 万元 '}
]
},
str:'hello',
keyWord:'',
persons1:[
{id:'001',name:'马冬梅',age:19,sex:'女'},
{id:'002',name:'周冬雨',age:20,sex:'女'},
{id:'003',name:'周杰伦',age:21,sex:'男'},
{id:'004',name:'温兆伦',age:22,sex:'男'}
],
sortType:0, //0原顺序 1降序 2升序
userInfo1:{
account:'',
password:'',
age:30,
sex:'female',
hobby:[],
city:'beijing',
other:'',
agree:''
},
time:1621561377603, //时间戳
msg:'你好，Alan',
str1:'<h3>你好啊！</h3>',
str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>',
a:false,
opacity:1
};
//创建vue实例 对象只传入一个参数，且是对象(即：配置对象).
const vm=new Vue({
// 创建了vue实例，使用了css： id选择器 ；将 div 容器与 vue实例创建了关联关系
/* el:'#root' , */ //第一种写法：直接初始化进行容器绑定。 //el 用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串。
//data 中 用于存储数据，数据用于供el所指定的容器使用。值我们暂时先写成一个对象。
//data 的第一种写法：对象式
/* data:{
name:"Alan",
wangzhi:{
url:"www.baidu.com",
name:"百度"
}
} */
//data的第二种写法：函数式 ,当在使用组件当配置环境下，data必须使用函数式 。该处的data函数不能写成 data:()=>{} 函数。 因为这样此时的this值是 windows 对象。
data(){ /* data:function(){} ====> data(){} 常规下，在对象里写函数对象，：function 是可以省略的 */
//console.log('@@@',this); //此处的this是 Vue 实例对象。
return data;
},
methods: {
showInfo(event){
//console.log("@@@@:event.target.innerText=",event.target.innerText);
//console.log('@@@@@:this:',this);//此处的this 是vm
//console.log('@@@@@:this == vm:',this == vm);
alert("展示 this == vm 信息");
},
//说明：所有被Vue绑定的函数最好写成普通函数。
showInfo1:(event)=>{
//console.log("@@@@:event.target.innerText=",event.target.innerText);
//console.log('@@@@@:this:',this);//此处的this 是windows对象
//console.log('@@@@@:this == vm:',this == vm);
alert("展示 this != vm 信息");
},
showInfo3(event,number){
//console.log(event,number);
},
showInfo4(number,event){
//console.log(number,event);
},
showInfo5(e){
//阻止a标签默认调用 href的跳转行为 方式1
e.preventDefault();
alert("开始进行跳转");
},
showInfo6(e){
//阻止a标签默认调用 href的跳转行为 方式2
alert("开始进行跳转");
},
showInfo7(e){
alert("开始进行跳转");
},
showInfo8(e){
alert("事件冒泡：div外层");
},
showInfo9(e){
alert("事件冒泡：button 层");
},
showInfo10(e){
//阻止事件冒泡方式1
e.stopPropagation();
alert("阻止事件冒泡方式1：div外层");
},
showInfo11(e){
//阻止事件冒泡方式1
e.stopPropagation();
alert("阻止事件冒泡方式1：button 层");
},
showInfo12(e){
//阻止事件冒泡方式2
alert("阻止事件冒泡方式2：button 层实现方式");
},
showInfo13(e){
alert("每次点击按钮皆触发事件：button 层实现方式");
} ,
showMsg(msg){
alert("使用事件的捕获模式");
//console.log(msg);
} ,
showSelf1(e){
alert("div 层");
//console.log(e.target);
},
showSelf2(e){
alert("button 层");
//console.log(e.target);
},
demo(){
for (let i = 0; i < 100; i++) {
//console.log('#')
}
//console.log('累坏了')
},
keydown(e){
//console.log(e.key);
//console.log(e.keycode);
//console.log(e.target.value);
},
keyUp(e){
if(e.keycode != 13){
return ;
}else{
//console.log(e.key);
//console.log(e.keycode);
//console.log(e.target.value);
}
},
//多次调用，多次执行。结果无缓存机制
fullName(){
//console.log("this:",this);
var fullName=this.computeInfo.firstName+'--'+this.computeInfo.lastName;
return fullName;
},
changeWeather(){
this.isHot=!this.isHot;
},
changeWeatherInfo(){
this.isHot=!this.isHot;
},
infoChange(){
this.isHot=!this.isHot;
},
changeMood(){
//this.changeClass="happy";
const arr=["happy","sad","normal"];
const index=Math.floor(Math.random()*3);
this.changeClass=arr[index];
},
changeArrayClass(){
},
add(){
const p = {id:'004',name:'老刘',age:40}
this.persons.unshift(p)
},
addCarProperty(){
//vm 增加属性的Api
if(this.car.companyName ==undefined){
// Vue.set(this.car,'companyName','德国大众汽车集团子公司奥迪汽车公司');
this.$set(this.car,'companyName','德国大众汽车集团子公司奥迪汽车公司');
}else{
this.car.companyName= this.car.companyName=="德国大众汽车集团子公司奥迪汽车公司"?'德国大众汽车集团':'德国大众汽车集团子公司奥迪汽车公司';
}
},
updateMei(){
this.persons1.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'}) ;
},
addProduct(){
this.car.product.unshift({id:'007',name:'奥迪A1',carModels:"2012款 奥迪A1 1.4 TFSI Urban",price:'22.48 万元 '});
},
updateFirstProductName(){
this.car.product[0].name = '奥迪Q8';
},
addBrand(){
this.car.brand.push('奥迪TT');
},
updateBrand(){
// this.car.brand.splice(0,1,'开车')
// Vue.set(this.car.brand,0,'开车')
this.$set(this.car.brand,0,'奥迪Q8')
},
removeBrand(){
this.car.brand = this.car.brand.filter((h)=>{
return h !== '奥迪A7'
})
},
formSubmit(){
//console.log(JSON.stringify(this.userInfo1));
},
getFmtTime(){
return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
},
stop(){
//this.$destroy() ;//暴力销毁整个Vue对象
clearInterval(this.timerId);
}
},
//计算属性
computed:{
//计算属性(完整写法)：计算全名值
computedFullName:{
//get 有什么作用？当有人读取fullName时，get就会被调用，且返回值就被作为fullName的值
//get 什么时候被调用？ 1：初次调用computedFullName 时， 2：是依赖的数据发生改变时。
get(){
//console.log('get被调用了--》完整写法');
return this.computeInfo.firstName+'--'+this.computeInfo.lastName;
},
//set什么时候被调用？ 当computedFullName 值被修改时
set(value){
//console.log('set被调用了',value);
const arr=value.split("-");
this.computeInfo.firstName=arr[0];
this.computeInfo.lastName=arr[1];
}
},
// 计算属性(简写)： 计算属性当确认只有get方法不存在set方法时，可以使用下方的简写方式实现。
computedFullName1(){
//console.log('get被调用了--》简单写法');
return this.computeInfo.firstName+'--'+this.computeInfo.lastName;
},
weather(){
return this.isHot?'炎热':'凉爽';
},
weatherInfo(){
return this.isHot?'炎热':'凉爽';
},
info(){
return this.isHot?'炎热':'凉爽';
},
filPerons(){
return this.persons1.filter((p)=>{
return p.name.indexOf(this.keyWord) !== -1
})
},
filPerons1(){
const arr = this.persons1.filter((p)=>{
return p.name.indexOf(this.keyWord) !== -1
})
//判断一下是否需要排序
if(this.sortType){
arr.sort((p1,p2)=>{
return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
})
}
return arr
} ,
fmtTime(){
return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
}
},
watch:{
//：正常写法
isHot:{
immediate:true, //初始化时让handler 调用一下
//handler 什么时候调用？当isHost值发生改变时。
handler(newValue,oldValue){
//console.log('isHot被修改....',newValue,oldValue);
}
},
//简写
isHot(newValue,oldValue){
//console.log('isHot被修改了--->简写',newValue,oldValue,this)
} ,
weatherInfo:{
immediate:true, //初始化时让handler 调用一下
//handler 什么时候调用？当isHost值发生改变时。
handler(newValue,oldValue){
//console.log('weatherInfo被修改....',newValue,oldValue);
}
},
//监视多级属性中某个属性的变化
'numbers.a':{
immediate:true, //初始化时让handler 调用一下
//handler 什么时候调用？当isHost值发生改变时。
handler(newValue,oldValue){
//console.log('numbers.a被修改....',newValue,oldValue);
}
},
//监视多级属性中所有属性的变化
numbers:{
immediate:true, //初始化时让handler 调用一下
deep:true, //深度监控属性
//handler 什么时候调用？当isHost值发生改变时。
handler(newValue,oldValue){
//console.log('numbers 深度监控 被修改....',newValue,oldValue);
}
}
},
//局部过滤器
filters:{
timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
return dayjs(value).format(str)
}
},
//Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
mounted(){
//console.log('mounted',this)
this.timerId=setInterval(() => {
this.opacity -= 0.01
if(this.opacity <= 0) this.opacity = 1
},16)
},
//自定义指令
directives: {
//big函数何时会调用？1：指令与元素成功绑定时(一上来)。2：指令所在的模板被重新解析时。
big(element,binding){
//console.log('big',this);//注意此处的this是window
element.innerText=binding.value * 10;
},
'big-number':function(element,binding){
//console.log('big-number',this);
element.innerText=binding.value * 100;
},
fbind:{
//指令与元素成功绑定时（一上来）
bind(element,binding){
//console.log("fbind.bind",this);//注意此处的this是window
element.value = binding.value;
},
//指令所在元素被插入页面时
inserted(element,binding){
//console.log("fbind.inserted",this);//注意此处的this是window
element.focus();
},
//指令所在的模板被重新解析时
update(element,binding){
//console.log("fbind.update",this);//注意此处的this是window
element.value = binding.value;
}
}
},
beforeDestroy() {
clearInterval(this.timer)
console.log('vm即将驾鹤西游了')
}
});
//第二种写法：进行1秒钟后，将 div 容器与 vue对象进行绑定。 该方式的使用作用：自定义绑定容器。
setTimeout(()=>{
vm.$mount("#root");// $mount 有挂载的意思
},1000);
//console.log('@@@' ,vm);
//手动灵活方式创建watch 方法：正常写法
vm.$watch('weatherInfo',{
immediate:true, //初始化时让handler 调用一下
//handler 什么时候调用？当isHost值发生改变时。
handler(newValue,oldValue){
//console.log('weatherInfo被修改....!灵活手动创建watch进行监控',newValue,oldValue);
}
});
//简写
vm.$watch('isHot',(newValue,oldValue)=>{
//console.log('isHot被修改了--->手动配置：简写',newValue,oldValue,this)
}) ;
//全局过滤器
Vue.filter('mySlice',function(value){
return value.slice(0,4)
}) ;
//全局自定义指令
Vue.directive("fbind1",{
//指令与元素成功绑定时（一上来）
bind(element,binding){
//console.log("fbind.bind",this);//注意此处的this是window
element.value = binding.value;
},
//指令所在元素被插入页面时
inserted(element,binding){
//console.log("fbind.inserted",this);//注意此处的this是window
element.focus();
},
//指令所在的模板被重新解析时
update(element,binding){
//console.log("fbind.update",this);//注意此处的this是window
element.value = binding.value;
}
});
Vue.directive('big1',function(element,binding){
//console.log('big1',this);//注意此处的this是window
element.innerText=binding.value * 1000;
});
//自定义方式创建按钮
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
Vue.config.keyCodes.huiche = 13 //定义了一个别名按键
//↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓以下是作 回顾Object.defineproperty方法↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
let Xsed="etxrtaer";
let person={
name:'张三',
sex:'男',
Tel:'0715'
};
//console.log(Object.keys(person));// 进行person对象的枚举遍历：name ,sex ；输出结果：['name', 'sex', 'Tel']
for(let key in person){
//console.log('@@@@',person[key]); //输出结果：@@@@ 张三 @@@@ 男 @@@@ 0715
};
//console.log(person); //输出结果：{name: '张三', sex: '男', Tel: '0715'}
Object.defineProperty(person,'age',{ value:18 }); //设置增加对象属性。该新增的属性是属于不可枚举类型
//console.log(person);//输出结果：{name: '张三', sex: '男', Tel: '0715', age: 18}
//console.log(Object.keys(person));//进行person对象的枚举遍历：name ,sex；其 age 对象 是不可以被枚举的 {name: '张三', sex: '男'}
Object.defineProperty(person,'PostNo',{ value:654 ,enumerable:true /* enumerable 参数是控制属性是否可以枚举，默认值是false */ }); //设置增加对象属性。该新增的属性是属于可枚举类型
//console.log(person);//输出结果：{name: '张三', sex: '男', Tel: '0715', PostNo: 654, age: 18}
//console.log(Object.keys(person));//进行person对象的枚举遍历：name ,sex；其 age 对象 是可以被枚举的 ;输出结果：['name', 'sex', 'Tel', 'PostNo']
// Object.defineProperty(person,'PostNo',{ value:654 ,enumerable:true}); 该目前的操作增加的属性值是无法修改的
person.Tel="020";
//console.log(person); // 输出结果： {name: '张三', sex: '男', Tel: '020', PostNo: 654, age: 18}
person.PostNo=759;
//console.log(person); // 输出结果： {name: '张三', sex: '男', Tel: '020', PostNo: 654, age: 18}
Object.defineProperty(person,'Email',{ value:"123@126.com" ,enumerable:true,writable:true /* writable 参数是控制属性的值是否可以被修改 默认值是false*/});
//console.log(person); // 输出结果： {name: '张三', sex: '男', Tel: '020', PostNo: 654, Email: '123@126.com',age: 18}
person.Email="126@163.com";
//console.log(person); // 输出结果： name: '张三', sex: '男', Tel: '020', PostNo: 654, Email: '126@163.com',age: 18}
delete person.Email;
//console.log(person); // 输出结果： {name: '张三', sex: '男', Tel: '020', PostNo: 654, Email: '123@126.com',age: 18}
Object.defineProperty(person,'Emailt',{ value:"123@126.com" ,enumerable:true,writable:true,configurable:true /* configurable 参数是控制属性的值是否可以被删除 默认值是false */ });
//console.log(person); // 输出结果： {name: '张三', sex: '男', Tel: '020', PostNo: 654, Email: '123@126.com',Emailt: "123@126.com",age: 18}
delete person.Emailt;
//console.log(person); // 输出结果： {name: '张三', sex: '男', Tel: '020', PostNo: 654, Email: '126@163.com',age: 18}
Object.defineProperty(person,'XSED',{
//设置自动进行值变化:当有人读取person的XSED属性时，get函数(getter)就会被调用，且返回值就是XSED的值
get(){
//console.log("有人读取person.XSED属性了");
return Xsed;
},
//设置自动进行值变化:当有人修改person的XSED属性时，et函数(setter)就会被调用，且收到具体值
set(value){
//console.log("有人给person.XSED属性赋值，且值是",value);
Xsed=value;
return Xsed;
}
});
//console.log(person); // 输出结果： {name: '张三', sex: '男', Tel: '020', PostNo: 654, Email: '126@163.com',XSED: （…） ]
//↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑以上是作 回顾Object.defineproperty方法↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
//↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓以下是作 数据代理的事例 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
let obj={x:1000};
let obj2={y:2000};
//想通过 obj2 来读取及修改 obj的x属性值
//以下是最简单的数据代理实现模板
Object.defineProperty(obj2,'x',{
get(){
return obj.x;
},
set(value){
obj.x=value;
}
});
//↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑以上是作 数据代理的事例 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
//↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓以下是作模拟数据监测-----》对象监测 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
let data1 = {
url:'wwww.baidu.com',
address:'北京',
name:'百度'
}
//创建一个监视的实例对象，用于监视data中属性的变化
const obs = new Observer(data1)
//console.log(obs)
//准备一个vm实例对象
let vm1 = {}
vm1._data = data1 = obs
function Observer(obj){
//汇总对象中所有的属性形成一个数组
const keys = Object.keys(obj)
//遍历
keys.forEach((k)=>{
Object.defineProperty(this,k,{
get(){
return obj[k]
},
set(val){
//console.log(`${k}被改了，我要去解析模板，生成虚拟DOM.....我要开始忙了`)
obj[k] = val
}
})
})
}
//↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑以上是作 模拟数据监测 -----》对象监测 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
</script>
</body>
</html>
界面展示效果
dayjs.min.js
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.dayjs=e()}(this,function(){"use strict";var t="millisecond",e="second",n="minute",r="hour",i="day",s="week",u="month",a="quarter",o="year",f="date",h=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[^0-9]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,c=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,d={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_")},$=function(t,e,n){var r=String(t);return!r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},l={s:$,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return(e<=0?"+":"-")+$(r,2,"0")+":"+$(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return-t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,u),s=n-i<0,a=e.clone().add(r+(s?-1:1),u);return+(-(r+(n-i)/(s?i-a:a-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(h){return{M:u,y:o,w:s,d:i,D:f,h:r,m:n,s:e,ms:t,Q:a}[h]||String(h||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},y="en",M={};M[y]=d;var m=function(t){return t instanceof S},D=function(t,e,n){var r;if(!t)return y;if("string"==typeof t)M[t]&&(r=t),e&&(M[t]=e,r=t);else{var i=t.name;M[i]=t,r=i}return!n&&r&&(y=r),r||!n&&y},v=function(t,e){if(m(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new S(n)},g=l;g.l=D,g.i=m,g.w=function(t,e){return v(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var S=function(){function d(t){this.$L=D(t.locale,null,!0),this.parse(t)}var $=d.prototype;return $.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(g.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match(h);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.$x=t.x||{},this.init()},$.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds()},$.$utils=function(){return g},$.isValid=function(){return!("Invalid Date"===this.$d.toString())},$.isSame=function(t,e){var n=v(t);return this.startOf(e)<=n&&n<=this.endOf(e)},$.isAfter=function(t,e){return v(t)<this.startOf(e)},$.isBefore=function(t,e){return this.endOf(e)<v(t)},$.$g=function(t,e,n){return g.u(t)?this[e]:this.set(n,t)},$.unix=function(){return Math.floor(this.valueOf()/1e3)},$.valueOf=function(){return this.$d.getTime()},$.startOf=function(t,a){var h=this,c=!!g.u(a)||a,d=g.p(t),$=function(t,e){var n=g.w(h.$u?Date.UTC(h.$y,e,t):new Date(h.$y,e,t),h);return c?n:n.endOf(i)},l=function(t,e){return g.w(h.toDate()[t].apply(h.toDate("s"),(c?[0,0,0,0]:[23,59,59,999]).slice(e)),h)},y=this.$W,M=this.$M,m=this.$D,D="set"+(this.$u?"UTC":"");switch(d){case o:return c?$(1,0):$(31,11);case u:return c?$(1,M):$(0,M+1);case s:var v=this.$locale().weekStart||0,S=(y<v?y+7:y)-v;return $(c?m-S:m+(6-S),M);case i:case f:return l(D+"Hours",0);case r:return l(D+"Minutes",1);case n:return l(D+"Seconds",2);case e:return l(D+"Milliseconds",3);default:return this.clone()}},$.endOf=function(t){return this.startOf(t,!1)},$.$set=function(s,a){var h,c=g.p(s),d="set"+(this.$u?"UTC":""),$=(h={},h[i]=d+"Date",h[f]=d+"Date",h[u]=d+"Month",h[o]=d+"FullYear",h[r]=d+"Hours",h[n]=d+"Minutes",h[e]=d+"Seconds",h[t]=d+"Milliseconds",h)[c],l=c===i?this.$D+(a-this.$W):a;if(c===u||c===o){var y=this.clone().set(f,1);y.$d[$](l),y.init(),this.$d=y.set(f,Math.min(this.$D,y.daysInMonth())).$d}else $&&this.$d[$](l);return this.init(),this},$.set=function(t,e){return this.clone().$set(t,e)},$.get=function(t){return this[g.p(t)]()},$.add=function(t,a){var f,h=this;t=Number(t);var c=g.p(a),d=function(e){var n=v(h);return g.w(n.date(n.date()+Math.round(e*t)),h)};if(c===u)return this.set(u,this.$M+t);if(c===o)return this.set(o,this.$y+t);if(c===i)return d(1);if(c===s)return d(7);var $=(f={},f[n]=6e4,f[r]=36e5,f[e]=1e3,f)[c]||1,l=this.$d.getTime()+t*$;return g.w(l,this)},$.subtract=function(t,e){return this.add(-1*t,e)},$.format=function(t){var e=this;if(!this.isValid())return"Invalid Date";var n=t||"YYYY-MM-DDTHH:mm:ssZ",r=g.z(this),i=this.$locale(),s=this.$H,u=this.$m,a=this.$M,o=i.weekdays,f=i.months,h=function(t,r,i,s){return t&&(t[r]||t(e,n))||i[r].substr(0,s)},d=function(t){return g.s(s%12||12,t,"0")},$=i.meridiem||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r},l={YY:String(this.$y).slice(-2),YYYY:this.$y,M:a+1,MM:g.s(a+1,2,"0"),MMM:h(i.monthsShort,a,f,3),MMMM:h(f,a),D:this.$D,DD:g.s(this.$D,2,"0"),d:String(this.$W),dd:h(i.weekdaysMin,this.$W,o,2),ddd:h(i.weekdaysShort,this.$W,o,3),dddd:o[this.$W],H:String(s),HH:g.s(s,2,"0"),h:d(1),hh:d(2),a:$(s,u,!0),A:$(s,u,!1),m:String(u),mm:g.s(u,2,"0"),s:String(this.$s),ss:g.s(this.$s,2,"0"),SSS:g.s(this.$ms,3,"0"),Z:r};return n.replace(c,function(t,e){return e||l[t]||r.replace(":","")})},$.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},$.diff=function(t,f,h){var c,d=g.p(f),$=v(t),l=6e4*($.utcOffset()-this.utcOffset()),y=this-$,M=g.m(this,$);return M=(c={},c[o]=M/12,c[u]=M,c[a]=M/3,c[s]=(y-l)/6048e5,c[i]=(y-l)/864e5,c[r]=y/36e5,c[n]=y/6e4,c[e]=y/1e3,c)[d]||y,h?M:g.a(M)},$.daysInMonth=function(){return this.endOf(u).$D},$.$locale=function(){return M[this.$L]},$.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=D(t,e,!0);return r&&(n.$L=r),n},$.clone=function(){return g.w(this.$d,this)},$.toDate=function(){return new Date(this.valueOf())},$.toJSON=function(){return this.isValid()?this.toISOString():null},$.toISOString=function(){return this.$d.toISOString()},$.toString=function(){return this.$d.toUTCString()},d}(),p=S.prototype;return v.prototype=p,[["$ms",t],["$s",e],["$m",n],["$H",r],["$W",i],["$M",u],["$y",o],["$D",f]].forEach(function(t){p[t[1]]=function(e){return this.$g(e,t[0],t[1])}}),v.extend=function(t,e){return t.$i||(t(e,S,v),t.$i=!0),v},v.locale=D,v.isDayjs=m,v.unix=function(t){return v(1e3*t)},v.en=M[y],v.Ls=M,v.p={},v});
为人：谦逊、激情、博学、审问、慎思、明辨、 笃行
学问：纸上得来终觉浅，绝知此事要躬行
为事：工欲善其事，必先利其器。
态度：道阻且长，行则将至；行而不辍，未来可期
.....................................................................
------- 换了个头像，静静的想，默默的思恋，一丝淡淡的忧伤 ----------
------- 桃之夭夭，灼灼其华。之子于归，宜其室家。 ---------------
------- 桃之夭夭，有蕡其实。之子于归，宜其家室。 ---------------
------- 桃之夭夭，其叶蓁蓁。之子于归，宜其家人。 ---------------
=====================================================================
转载请标注出处！
