Vue2基础知识点
<!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});
为人：谦逊、激情、博学、审问、慎思、明辨、 笃行
学问：纸上得来终觉浅，绝知此事要躬行
为事：工欲善其事，必先利其器。
态度：道阻且长，行则将至；行而不辍，未来可期
.....................................................................
------- 桃之夭夭，灼灼其华。之子于归，宜其室家。 ---------------
------- 桃之夭夭，有蕡其实。之子于归，宜其家室。 ---------------
------- 桃之夭夭，其叶蓁蓁。之子于归，宜其家人。 ---------------
=====================================================================
* 博客文章部分截图及内容来自于学习的书本及相应培训课程以及网络其他博客，仅做学习讨论之用，不做商业用途。
* 如有侵权，马上联系我，我立马删除对应链接。 * @author Alan -liu * @Email no008@foxmail.com
转载请标注出处！ ✧*꧁一品堂.技术学习笔记꧂*✧. ---> https://www.cnblogs.com/ios9/
学问：纸上得来终觉浅，绝知此事要躬行
为事：工欲善其事，必先利其器。
态度：道阻且长，行则将至；行而不辍，未来可期
.....................................................................
------- 桃之夭夭，灼灼其华。之子于归，宜其室家。 ---------------
------- 桃之夭夭，有蕡其实。之子于归，宜其家室。 ---------------
------- 桃之夭夭，其叶蓁蓁。之子于归，宜其家人。 ---------------
=====================================================================
* 博客文章部分截图及内容来自于学习的书本及相应培训课程以及网络其他博客，仅做学习讨论之用，不做商业用途。
* 如有侵权，马上联系我，我立马删除对应链接。 * @author Alan -liu * @Email no008@foxmail.com
转载请标注出处！ ✧*꧁一品堂.技术学习笔记꧂*✧. ---> https://www.cnblogs.com/ios9/
