Vue 学习笔记（一）

最新推荐文章于 2024-10-16 18:35:07 发布

mobº

最新推荐文章于 2024-10-16 18:35:07 发布

阅读量1.1k

点赞数 2

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45278293/article/details/122567842

版权

Vue 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

Vue 学习笔记（一）

一、Vue 概述

Vue 官网

Vue 一套用于构建用户界面的渐进式JavaScrip 框架。Vue 可以自底向上逐层的应用

简单应用：只需一个轻量小巧的核心库。
复杂应用：可以引入各式各样的 Vue 插件。

Vue 的特点：

采用组件化模式，提高代码的复用率，且让代码更好维护。（如下图：三个模块类似三个组件，我们修改只需在对应的组件里修改Html或JS文件即可）
声明式编码，让编码人员无需直接操作 DOM ，提高开发效率。
使用虚拟DOM + 优秀的Diff 算法，尽量复用 DOM 节点。

二、搭建Vue环境

下载Vue
Vue分为开发版本（比较大的，会有很多警告和调试模式）和min版本的（体积小，适合用于生产环境的）。
在这里插入图片描述

下载Vue开发者工具（便于调试Vue）：它是浏览器的扩展程序
在这里插入图片描述
浏览器安装程序后：

三、Vue 知识详解

1. hello 小案例

<!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>
    <body>
        <div id="root">
            <h1>hello,{{name}}</h1>
        </div>
    </body>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" >
        Vue.config.productionTip = false; // 组织Vue启动时生成生产提示

        // 创建Vue实例
        new Vue({
            el:'#root', // el（element） 用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data:{      // data中用于存储数据，数据供el所指定的容器去使用，值我们先写成一个对象
                name:'尚硅谷'
            }

        });
    </script>
</head>
</html>

Vue.config.productionTip = false 在我们访问页面的时候，会出现提示：

增加该注解后该提示后就能去除。

访问效果

案例总结：

想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象。
root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法。
root容器里的代码被称为【Vue模板】。
Vue 容器和实例时一一对应的。
真实开发中只有一个Vue实例，并且会配合着组件一起使用。
{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性。
一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新。

注意：new 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>初识Vue</title>
    <body>
        <div id="root">
            <h1>hello,{{name}}</h1>
        </div>
        <div id="root">
            <h1>hello,{{name}}</h1>
        </div>
    </body>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" >
        // Vue.config.productionTip = false; // 组织Vue启动时生成生产提示

        // 创建Vue实例
        new Vue({
            el:'#root', // el（element） 用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data:{      // data中用于存储数据，数据供el所指定的容器去使用，值我们先写成一个对象
                name:'尚硅谷'
            }

        });

    </script>
</head>

</html>

效果：只能接管到匹配到的第一个容器
在这里插入图片描述

一个容器也只能被一个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>初识Vue</title>
    <body>
        <div id="root">
            <h1>hello,{{name}}，{{adress}}</h1>
        </div>
        
    </body>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" >
        // Vue.config.productionTip = false; // 组织Vue启动时生成生产提示

        // 创建Vue实例
        new Vue({
            el:'#root', // el（element） 用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data:{      // data中用于存储数据，数据供el所指定的容器去使用，值我们先写成一个对象
                name:'尚硅谷'
            }

        });
        new Vue({
            el:'#root', // el（element） 用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data:{      // data中用于存储数据，数据供el所指定的容器去使用，值我们先写成一个对象
                adress:'上海'
            }

        });

    </script>
</head>

</html>

在这里插入图片描述

实例中的 data 属性，我们也可以进行设置层级，如：
在这里插入图片描述
效果如下：

2. Vue 模板语法

1. 插值语法

在这里插入图片描述

2. 指令语法

功能：

用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
比如 v-bind:href=“xxx” 或者简写为 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
Vue有很多指令，且形式都是：v-???。此处我们只是拿v-bind举个栗子。

v-bind:[ 属性 ] = :[ 属性 ]
在这里插入图片描述
页面效果：

3. 数据绑定

Vue有两种数据绑定：

单向绑定（v-bind）：数据只能从data流向页面。
双向绑定：数据不仅能从data流向页面，还可以从页面流向data。

注：

双向绑定一般都应用在表单类元素上（如input，select 等）。
v-model:value 可以简写为 v-model，因为v-model 默认收集的就是value值。

<!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>
    <body>
        <div id="root">
            <!--普通写法-->
            单向数据绑定: <input type="text" v-bind:value="name"><br/>
            双向数据绑定: <input type="text" v-model:value="name"><br/>
            

            <!--简写-->
            单向数据绑定: <input type="text" :value="name"><br/>
            双向数据绑定: <input type="text" v-model="name"><br/>

            <!--如下代码是错误的，因为v-model 只能应用在表单元素(输入雷元素)上-->
            <h2 v-model:x="name">你好啊</h2>
        </div>
        
        
        
    </body>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" >
        // Vue.config.productionTip = false; // 组织Vue启动时生成生产提示

        // 创建Vue实例
        new Vue({
            el:'#root', // el（element） 用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data:{      // data中用于存储数据，数据供el所指定的容器去使用，值我们先写成一个对象
                name:'jack'
   
            }
        });

    </script>
</head>

</html>

在这里插入图片描述

3. data 与 el

data 的两种写法：

.new Vue 时候配置el属性
先创建Vue实例，随后在通过vm.$mount(’#root’) 指定el的值。

data 的两种写法：

对象式
函数式

如何原则 data 的写法呢，目前两种写法都可以，以后学习到组件时，data 必须使用函数式，否则会报错。

注意： 由 Vue 管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是 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>初识Vue</title>
    <body>
        <div id="root">
            <h1>hello,{{name}}</h1>
        </div>
        
    </body>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" >
        // Vue.config.productionTip = false; // 组织Vue启动时生成生产提示

        // el 的两种写法
        //第一种   
        new Vue({
            el:'#root', // el（element） 用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data:{      // data中用于存储数据，数据供el所指定的容器去使用，值我们先写成一个对象
                name:'jack'
   
            }

        });
        //第二种
        const v = new Vue({
            data:{      // data中用于存储数据，数据供el所指定的容器去使用，值我们先写成一个对象
                name:'jack'
   
            }

        });
        v.$mount('#root');


        //data 的俩种写法
        new Vue({
            el: '#root',
            //data 的第一种写法：对象式
            // data:{
            //     name: '尚硅谷'
            // }


            //data 的第二种写法：对象式
            // data:function(){
            //     return{
            //         name:'尚硅谷'
            //     }
            // }
            // 可以简写为
            data(){
                return{
                    name:'尚硅谷'
                }
            }

        })
    </script>
</head>

</html>

4. MVVM 模型

M：模型（Model）：对应data 中的数据
V：试图（View）：模板
VM：试图模型（ViewModel）：Vue实例对象。

虽然没有完全遵循MVVM模型，但是Vue的设计也收到了它的启发。因此在文档中经常会使用（ViewModel的缩写），这个变量名表示Vue实例。

探索发现：

data中所有的属性，最后都出现在了vm身上。
vm 身上所有的属性及 Vue原型上所有的属性，在Vue模板中都可以直接使用。

5. 数据代理

Object.defineProperty： 可以动态的个对象绑定属性并赋予值。

<!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>
    <body>
        <div id="root">
            <h1>hello,{{name}}</h1>
        </div>
        
    </body>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" >
        Vue.config.productionTip = false; // 组织Vue启动时生成生产提示

        let number = 18
        let person = {
            name:'张三',
            age:'男'
        }
        Object.defineProperties(persion,'age',{
            //value:18
            enumerable:true,    // 控制属性是否可以枚举，默认值是false
            writable:true,      // 控制属性是否可以被修改，默认值是false
            configurable:true,   // 控制属性是否可以被删除，默认值是false

            // 当有人读取persion的age属性时，get函数(getter)就会被调用，且返回值就是age的值
            get(){
                console.log('有人读取age属性');
                return number
            },
            // 当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
            set(value){
                console.log('有人读取age属性了');
            }
        });


      
    </script>
</head>

</html>

数据代理： 通过一个对象代理对另一个对象中属性的操作（读/写），就给简单的小栗子：

<!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>
    <body>
        <div id="root">
            <h1>hello,{{name}}</h1>
        </div>
        
    </body>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" >
   
        let obj = {x:100}
        let obj2 = {j:100}
        
        Object.defineProperties(obje2,'x',{

            get(){
                return obj.x
            },

            set(){
                obj.x = value
            }
        })
      
    </script>
</head>

</html>

Vue 中的数据代理：
在这里插入图片描述

Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
Vue 中数据代理的好处：更加方便的操作data中的数据
基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作（读/写）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>初识Vue</title>
    <body>
        <div id="root">
            <h1>hello,{{name}},{{adress}}</h1>
        </div>
        
    </body>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" >
   
    const vm = new Vue({
        el:'#root',
        data:{
            name:'尚硅谷',
            address:'宏福科技园'
        }

    });
    </script>
</head>

</html>

其中 {{name}} 和 {{adress}} 读取的是 vm 中的_data.name 和 _data.adress。通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作（读/写）data中对应的属性

6. 事件处理

1. 事件的基本使用：

使用 v-on:xxx 或 @xxx 绑定事件，其中 xxx 是事件名。
事件的回调需要配置在methods对象中，最终会在vm上。
methods 中配置的函数，不要用箭头函数，否则 this 就不是 vm 了。
methods 中配置的函数，都是被 Vue 所管理的函数，this 的指向是 vm 或组件实例对象。
@click=‘demo’ 和 @click=“demo($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>初识Vue</title>
    <body>
        <div id="root">
            <h1>hello,{{name}}</h1>
            <!-- <button v-on:click="showInfo">点我提示信息</button> -->
            <button @click="showinfo1">点我提示信息(不传参)</button>
            <button @click="showinfo1($event,77)">点我提示信息(传参)</button>
        </div>
        
    </body>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" >
   
    const vm = new Vue({
        el:'#root',
        data:{
            name:'尚硅谷'
        },
        methods:{
            showInfo1(event){
                console.log(event.target.innerText)
                console.log(this)
                alert("同学你好!");
            },
            showInfo1(event,number){
                console.log(event,number);
                console.log(event.target.innerText)
                console.log(this)
                alert("同学你好!!");
            }
        }

    });
      
    </script>
</head>

</html>

2. 事件修饰符

Vue中的事件修饰符：

prevent：阻止默认事件（常用）；
stop：阻止事件冒泡（常用）；
once：事件只触发一次（常用）；
capture：使用事件的捕获模式；
self：只有event.target是当前操作的元素时才触发事件；
passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>事件修饰符</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
	<style>
		* {
			margin-top: 20px;
		}

		.demo1 {
			height: 50px;
			background-color: skyblue;
		}

		.box1 {
			padding: 5px;
			background-color: skyblue;
		}

		.box2 {
			padding: 5px;
			background-color: orange;
		}

		.list {
			width: 200px;
			height: 200px;
			background-color: peru;
			overflow: auto;
		}

		li {
			height: 100px;
		}
	</style>
</head>

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<h2>欢迎来到{{name}}学习</h2>
		<!-- 阻止默认事件（常用） -->
		<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

		<!-- 阻止事件冒泡（常用） -->
		<div class="demo1" @click="showInfo">
			<button @click.stop="showInfo">点我提示信息</button>
			<!-- 在哪一层加了阻止事件冒泡，哪一层外面的所有祖先冒泡都会被阻止 -->
			<!-- 修饰符可以连续写 -->
			<!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
		</div>

		<!-- 事件只触发一次（常用） -->
		<button @click.once="showInfo">点我提示信息</button>

		<!-- 使用事件的捕获模式 -->
		<div class="box1" @click.capture="showMsg(1)">
			div1
			<div class="box2" @click="showMsg(2)">
				div2
			</div>
		</div>

		<!-- 只有event.target是当前操作的元素时才触发事件； -->
		<div class="demo1" @click.self="showInfo">
			<button @click="showInfo">点我提示信息</button>
		</div>

		<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
		<ul @wheel.passive="demo" class="list">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
		<!-- @wheel滚轮滚动事件 @scroll滚动条滚动事件 -->
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	new Vue({
		el: '#root',
		data: {
			name: '尚硅谷'
		},
		methods: {
			showInfo(e) {
				// e.stopPropagation()//阻止冒泡
				// e.preventDefault()//阻止默认事件
				//可以不用上面两种方法而改用事件修饰符
				alert('同学你好！')
				console.log(e.target)
			},
			showMsg(msg) {
				console.log(msg)
			},
			demo() {
				for (let i = 0; i < 100000; i++) {
					console.log('#')
				}
				console.log('累坏了')
			}
		}
	})
</script>

</html>

3. 键盘事件

Vue中常用的按键别名：

回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right

Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

系统修饰键（用法特殊）：tab、ctrl、alt、shift、meta

配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
.配合keydown使用：正常触发事件。

也可以使用keyCode去指定具体的按键（不推荐）

<input type="text" placeholder="按下回车提示输入" @keydown.13="showInfo">

Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>键盘事件</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<h2>欢迎来到{{name}}学习</h2>
		<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
		<!-- <input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo"> -->
		<!--当有需求要同时按下两个键才能生效时 
			<input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo"> -->
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

	new Vue({
		el: '#root',
		data: {
			name: '尚硅谷'
		},
		methods: {
			showInfo(e) {
				// console.log(e.key,e.keyCode)
				// if (e.keyCode !== 13) return 如果不是回车键，则弹出函数
				console.log(e.target.value)
			}
		},
	})
</script>
</html>

4. 鼠标事件

这些修饰符会限制处理函数仅响应特定的鼠标按钮。

.left
.right
.middle

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>事件的基本使用</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<!-- <button v-on:click="showInfo">点我提示信息</button> -->
			<button v-on:click="showInfo1">点我提示信息1（不传参）</button>
                        <button @click.right="showInfo1">右键点我提示信息1（不传参）</button>
			<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
                      
                         <!-- 有且只有 ctrl 被按下的时候才触发 -->
                       <button v-on:click.ctrl.exact="showInfo1">A</button>
                        
                        <!-- shift 即使 与（Alt 或 ctrl）  被一同按下时也会触发，即只要有shift就会触发 -->
		        <button v-on:click.shift="showInfo1">A</button>
                       
                        <!-- 没有任何系统修饰符被按下的时候才触发 -->
		        <button v-on:click.exact="showInfo1">A</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
			},
			methods:{
				showInfo1(event){
                                   //不传参默认收到event事件对象
				  // console.log(event.target.innerText)
				 // console.log(this) //此处的this是vm，可以用this拿到 _data(data)中的数据
					alert('同学你好！')
				},
				showInfo2(event,number){
					console.log(event,number)
					// console.log(event.target.innerText)
					// console.log(this) //此处的this是vm
					alert('同学你好！！')
				}
			}
		})
	</script>
</html>

7. 计算属性（computed）

姓名案例_插值语法实现：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>姓名案例_插值语法实现</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<!-- 准备好一个容器-->
	<div id="root">
		姓：<input type="text" v-model="firstName"> <br /><br />
		名：<input type="text" v-model="lastName"> <br /><br />
		全名：<span>{{firstName.slice(0,3)}}-{{lastName}}</span>
		<!-- 要求截取前三位，还可以在{{}}添加更多需求，但是十分不推荐，应该尽量简洁 -->
		<!-- 全名：<span>{{firstName+ '-' +lastName}}</span> -->
	</div>
</body>
<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	new Vue({
		el: '#root',
		data: {
			firstName: '张',
			lastName: '三'
		}
	})
</script>
</html>

姓名案例_methods实现：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>姓名案例_methods实现</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<!-- 准备好一个容器-->
	<div id="root">
		姓：<input type="text" v-model="firstName"> <br /><br />
		名：<input type="text" v-model="lastName"> <br /><br />
		全名：<span>{{fullName()}}</span>
                //fullName带括号表示将函数的返回值展示出来
	</div>
</body>
<!-- data中的数据发生改变，vue模板会重新解析，对data重新读取，如果有在模板里面调方法，方法也会重新被调用 -->
<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	new Vue({
		el: '#root',
		data: {
			firstName: '张',
			lastName: '三'
		},
		methods: {
			fullName() {
				console.log('@---fullName')
				return this.firstName + '-' + this.lastName
			}
		},
	})
</script>
</html>

计算属性：

定义：要用的属性不存在，要通过已有属性(Vue实例中的属性)计算得来。
原理：底层借助了Object.defineproperty方法提供的getter和setter。
计算属性最终会出现在vm上，直接读取使用即可。不能写fullName.get（），没有这种写法。
如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

计算属性里的get函数什么时候会执行呢？

初次读取时会执行一次。
当依赖的数据发生改变时会被再次调用。

计算属性优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

举个栗子：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>姓名案例_计算属性实现</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		姓：<input type="text" v-model="firstName"> <br /><br />
		名：<input type="text" v-model="lastName"> <br /><br />
		测试：<input type="text" v-model="x"> <br /><br />
		全名：<span>{{fullName}}</span> <br /><br />
		全名：<span>{{fullName}}</span> <br /><br />
		全名：<span>{{fullName}}</span> <br /><br />
		全名：<span>{{fullName}}</span>
		<!-- 多个fullName初始只会调用一次get（），因为缓存了 ，用methods方法调用没有缓存-->
	</div>
</body>
<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	const vm = new Vue({
		el: '#root',
		data: {
			firstName: '张',
			lastName: '三',
			x: '你好'
		},
		computed: {
			fullName: {
			   //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
			  //get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
				get() {
					console.log('get被调用了')
					console.log(this) //此处的this是vm
					return this.firstName + '-' + this.lastName
				},
				//set什么时候调用? 当fullName被修改时。
				set(value) {
					console.log('set', value)
					const arr = value.split('-')
					// 用-做分隔符,将其变为数组
					this.firstName = arr[0]
					this.lastName = arr[1]
                                        //可以用vm.fullName = '李-四'更改fullname的值
				}
                                //在多数情况下只考虑读取不考虑修改，可以把set部分删掉，简写
                                // fullName(){
				//	console.log('get被调用了')
				//	return this.firstName + '-' + this.lastName
				//}
                                //注意上方模板{{}}中依然放fullName，不带括号。
			}
		}
	})
</script>
</html>

8. 监视属性（watch）

监视属性watch：

当被监视的属性变化时, 回调函数自动调用, 进行相关操作
监视的属性必须存在，才能进行监视！！

监视的两种写法：

new Vue时传入watch配置
通过vm.$watch监视

深度监视：

Vue中的watch默认不监测对象内部值的改变（一层）。因为watch 如果监视的是对象，则对象地址改变时才会触发，对象里某个值改变是不是触发监听的，但是深度监视开启则可以触发监听。
配置deep:true可以监测对象内部值改变（多层）。

注意：

.Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
使用watch时根据数据的具体结构，决定是否采用深度监视。

举个栗子：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>天气案例_监视属性</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<h2>今天天气很{{info}} {{x}}</h2>
		<!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句
		比如下面两句功能相同，但是要记住模板里面找数据从vm内找，有些语句放入报错 -->
		<button @click="isHot = !isHot;x++">切换天气</button>
		<button @click="changeWeather">切换天气</button>
                <hr />
		深度监视按钮：
		<h3>a的值是:{{numbers.a}}</h3>
		<button @click="numbers.a++">点我让a+1</button>
		<h3>b的值是:{{numbers.b}}</h3>
		<button @click="numbers.b++">点我让b+1</button>
		{{numbers.c.d.e}}
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	const vm = new Vue({
		el: '#root',
		data: {
			isHot: true,
			x: 0,
			numbers: {
				a: 1,
				b: 1,
				c: {
					d: {
						e: 100
					}
				}
			}
		},
		computed: {
			info() {
				return this.isHot ? '炎热' : '凉爽'
			}
		},
		methods: {
			changeWeather() {
				this.isHot = !this.isHot
				this.x++
			}
		},
		// 方法一
		/* watch:{
			isHot:{
				immediate:true, //初始化时让handler调用一下
				//handler什么时候调用？当isHot发生改变时。
				handler(newValue,oldValue){
					console.log('isHot被修改了',newValue,oldValue)
				}
			}
		} 
		//简写：不用immediate:true，deep: true等属性时可以简写
			// isHot(newValue, oldValue) {
			// 	console.log('isHot被修改了', newValue, oldValue, this)
			// }
		
		*/

		//深度监视：
		//监视多级结构中某个属性的变化，注意带引号
		/* 'numbers.a':{
			handler(){
				console.log('a被改变了')
			}
		} 
		但如果多级结构中属性太多的话太过繁琐
		*/
		//监视多级结构中所有属性的变化
		numbers: {
			deep: true,//deep开启深度监视，不开启的话只监视numbers变化，不能看到numbers内的数据变化
			handler() {
				console.log('numbers改变了')
			}
		}
	})
	// 方法二
	vm.$watch('isHot', {//注意带引号
		immediate: true, //初始化时让handler调用一下
		//handler什么时候调用？当isHot发生改变时。
		handler(newValue, oldValue) {
			console.log('isHot被修改了', newValue, oldValue)
		}
	})
//简写
// vm.$watch('isHot', function (newValue, oldValue) {
// 		console.log('isHot被修改了', newValue, oldValue, this)
// 	})
</script>

</html>

computed和watch之间的区别：

computed能完成的功能，watch都可以完成。
watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。computed不可以，因为computed依赖返回值得到结果。而watch则是得到属性改变的结果。

两个重要的小原则：

所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象。
所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或组件实例对象。

举个栗子：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>姓名案例_watch实现</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		姓：<input type="text" v-model="firstName"> <br /><br />
		名：<input type="text" v-model="lastName"> <br /><br />
		全名：<span>{{fullName}}</span> <br /><br />
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	const vm = new Vue({
		el: '#root',
		data: {
			firstName: '张',
			lastName: '三',
			fullName: '张-三'
		},
		watch: {
			//简写
			firstName(newValue) {
				setTimeout(() => {
					console.log(this)
					this.fullName = newValue + '-' + this.lastName
				}, 1000);
			},
			lastName(newValue) {
				this.fullName = this.firstName + '-' + newValue
			}
		}
	})
</script>

</html>

9. 绑定样式

css 样式

写法:class="xxx" xxx可以是字符串、对象、数组。
字符串写法适用于：类名不确定，要动态获取。
数组写法适用于：要绑定多个样式，个数不确定，名字也不确定。
对象写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

style样式

:style="{fontSize: xxx}"其中xxx是动态值。
:style="[a,b]"其中a、b是样式对象。

栗子：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>绑定样式</title>
	<style>
		.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;
		}

		.atguigu1 {
			background-color: yellowgreen;
		}

		.atguigu2 {
			font-size: 30px;
			text-shadow: 2px 2px 10px red;
		}

		.atguigu3 {
			border-radius: 20px;
		}
	</style>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
		<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br /><br />

		<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
		<div class="basic" :class="classArr">{{name}}</div> <br /><br />

		<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
		<div class="basic" :class="classObj">{{name}}</div> <br /><br />

		<!-- 绑定style样式--对象写法 -->
		<div class="basic" :style="styleObj">{{name}}</div> <br /><br />
		<!-- 绑定style样式--数组写法 -->
		<div class="basic" :style="styleArr">{{name}}</div>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false

	const vm = new Vue({
		el: '#root',
		data: {
			name: '我要进大厂',
			mood: 'normal',
			classArr: ['atguigu1', 'atguigu2', 'atguigu3'],
			classObj: {
				atguigu1: true,
				atguigu2: false,
			},
			styleObj: {
				fontSize: '40px',
				color: 'red',
			},
			styleObj2: {
				backgroundColor: 'orange'
			},
			styleArr: [
				{
					fontSize: '40px',
					color: 'blue',
				},
				{
					backgroundColor: 'gray'
				}
			]
		},
		methods: {
			changeMood() {
				//随机切换心情
				const arr = ['happy', 'sad', 'normal']
				const index = Math.floor(Math.random() * 3)
				//Math.random()	返回 0 ~ 1 之间的随机数，包含 0 不包含 1。
				//Math.floor(x)	对 x 进行下舍入，即向下取整。
				this.mood = arr[index]
			}
		},
	})
</script>
</html>

10. 条件渲染

1.v-if

写法：
(1).v-if="表达式" 
(2).v-else-if="表达式"
(3).v-else="表达式"
适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。

注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

v-show

写法：v-show="表达式"
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉，display：none

备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>条件渲染</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<h2>当前的n值是:{{n}}</h2>
		<button @click="n++">点我n+1</button>
		<!-- 使用v-show做条件渲染  元素隐藏-->
		<!-- <h2 v-show="false">欢迎来到{{name}}</h2>
		<h2 v-show="true">欢迎来到{{name}}</h2> -->
		<!-- <h2 v-show="1 === 1">欢迎来到{{name}}</h2> -->

		<!-- 使用v-if做条件渲染  元素直接被移除-->
		<!-- <h2 v-if="false">欢迎来到{{name}}</h2> -->
		<!-- <h2 v-if="1 === 1">欢迎来到{{name}}</h2> -->

		<!-- <h2 v-show="n === 1">你好</h2>
		<h2 v-show="n===2">百度</h2>
		<h2 v-show="n===3">北京</h2> -->

		<h2 v-if="n===1">你好</h2>
		<h2 v-if="n===1">百度</h2>
		<h2 v-if="n===3">北京</h2>

		<!-- v-else和v-else-if -->
		<div v-if="n === 1">Angular</div>
		<div v-else-if="n === 1">React</div> //这里react不显示
		<div v-else-if="n === 3">Vue</div>
		<div v-else>哈哈</div>

		<!-- v-if与template的配合使用,template不能与v-show一起使用 -->
		<!-- <template v-if="n === 1">
			<h2>你好</h2>
			<h2>百度</h2>
			<h2>北京</h2>
		</template> -->

	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false

	const vm = new Vue({
		el: '#root',
		data: {
			name: '百度',
			n: 0
		}
	})
</script>

</html>

11. 列表渲染

1. 基本原理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>基本列表</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
        v-for指令:
            1.用于展示列表数据
            2.语法：v-for="(item, index) in xxx" :key="yyy"
            3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<!-- 遍历数组 -->
			<h2>人员列表（遍历数组）</h2>
			<ul>
				<li v-for="(p,index) of persons" :key="index">
					{{p.name}}-{{p.age}}
				</li>
			</ul>

			<!-- 遍历对象 -->
			<h2>汽车信息（遍历对象）</h2>
			<ul>
				<li v-for="(value,k) of car" :key="k">
					{{k}}-{{value}}
				</li>
			</ul>

			<!-- 遍历字符串 -->
			<h2>测试遍历字符串（用得少）</h2>
			<ul>
				<li v-for="(char,index) of str" :key="index">
					{{char}}-{{index}}
				</li>
			</ul>
			
			<!-- 遍历指定次数 -->
			<h2>测试遍历指定次数（用得少）</h2>
			<ul>
				<li v-for="(number,index) of 5" :key="index">
					{{index}}-{{number}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001',name:'张三',age:18},
						{id:'002',name:'李四',age:19},
						{id:'003',name:'王五',age:20}
					],
					car:{
						name:'奥迪A8',
						price:'70万',
						color:'黑色'
					},
					str:'hello'
				}
			})
		</script>
</html>

2. key的原理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>key的原理</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
        面试题：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是没有问题的。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<!-- 遍历数组 -->
			<h2>人员列表（遍历数组）</h2>
			<button @click.once="add">添加一个老刘</button>
			<ul>
				<li v-for="(p,index) of persons" :key="index">
					{{p.name}}-{{p.age}}
					<input type="text">
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001',name:'张三',age:18},
						{id:'002',name:'李四',age:19},
						{id:'003',name:'王五',age:20}
					]
				},
				methods: {
					add(){
						const p = {id:'004',name:'老刘',age:40}
						this.persons.unshift(p)
					}
				},
			})
		</script>
</html>

3. 列表过滤

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>列表过滤</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<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>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			//用watch实现
			//#region 
			/* new Vue({
				el:'#root',
				data:{
					keyWord:'',
					persons:[
						{id:'001',name:'马冬梅',age:19,sex:'女'},
						{id:'002',name:'周冬雨',age:20,sex:'女'},
						{id:'003',name:'周杰伦',age:21,sex:'男'},
						{id:'004',name:'温兆伦',age:22,sex:'男'}
					],
					filPerons:[]
				},
				watch:{
					keyWord:{
						immediate:true,
						handler(val){
							this.filPerons = this.persons.filter((p)=>{
								return p.name.indexOf(val) !== -1
							})
						}
					}
				}
			}) */
			//#endregion
			
			//用computed实现
			new Vue({
				el:'#root',
				data:{
					keyWord:'',
					persons:[
						{id:'001',name:'马冬梅',age:19,sex:'女'},
						{id:'002',name:'周冬雨',age:20,sex:'女'},
						{id:'003',name:'周杰伦',age:21,sex:'男'},
						{id:'004',name:'温兆伦',age:22,sex:'男'}
					]
				},
				computed:{
					filPerons(){
						return this.persons.filter((p)=>{
							return p.name.indexOf(this.keyWord) !== -1
						})
					}
				}
			}) 
		</script>
</html>

4. 列表排序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>列表排序</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<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 filPerons" :key="p.id">
					{{p.name}}-{{p.age}}-{{p.sex}}
					<input type="text">
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#root',
				data:{
					keyWord:'',
					sortType:0, //0原顺序 1降序 2升序
					persons:[
						{id:'001',name:'马冬梅',age:30,sex:'女'},
						{id:'002',name:'周冬雨',age:31,sex:'女'},
						{id:'003',name:'周杰伦',age:18,sex:'男'},
						{id:'004',name:'温兆伦',age:19,sex:'男'}
					]
				},
				computed:{
					filPerons(){
						const arr = this.persons.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
					}
				}
			}) 

		</script>
</html>

5. 更新时的一个问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>更新时的一个问题</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>人员列表</h2>
			<button @click="updateMei">更新马冬梅的信息</button>
			<ul>
				<li v-for="(p,index) of persons" :key="p.id">
					{{p.name}}-{{p.age}}-{{p.sex}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			const vm = new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001',name:'马冬梅',age:30,sex:'女'},
						{id:'002',name:'周冬雨',age:31,sex:'女'},
						{id:'003',name:'周杰伦',age:18,sex:'男'},
						{id:'004',name:'温兆伦',age:19,sex:'男'}
					]
				},
				methods: {
					updateMei(){
						// this.persons[0].name = '马老师' //奏效
						// this.persons[0].age = 50 //奏效
						// this.persons[0].sex = '男' //奏效
						// this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} //不奏效
						this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'})
					}
				}
			}) 

		</script>
</html>

6. Vue监测数据改变的原理_对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue监测数据改变的原理</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>学校名称：{{name}}</h2>
			<h2>学校地址：{{address}}</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				address:'北京',
				student:{
					name:'tom',
					age:{
						rAge:40,
						sAge:29,
					},
					friends:[
						{name:'jerry',age:35}
					]
				}
			}
		})
	</script>
</html>

7. 模拟一个数据监测

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
	</head>
	<body>
		<script type="text/javascript" >

			let data = {
				name:'尚硅谷',
				address:'北京',
			}

			//创建一个监视的实例对象，用于监视data中属性的变化
			const obs = new Observer(data)		
			console.log(obs)	

			//准备一个vm实例对象
			let vm = {}
			vm._data = data = 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>

8. Vue.set的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue监测数据改变的原理</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>学校信息</h1>
			<h2>学校名称：{{school.name}}</h2>
			<h2>学校地址：{{school.address}}</h2>
			<h2>校长是：{{school.leader}}</h2>
			<hr/>
			<h1>学生信息</h1>
			<button @click="addSex">添加一个性别属性，默认值是男</button>
			<h2>姓名：{{student.name}}</h2>
			<h2 v-if="student.sex">性别：{{student.sex}}</h2>
			<h2>年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2>
			<h2>朋友们</h2>
			<ul>
				<li v-for="(f,index) in student.friends" :key="index">
					{{f.name}}--{{f.age}}
				</li>
			</ul>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				school:{
					name:'尚硅谷',
					address:'北京',
				},
				student:{
					name:'tom',
					age:{
						rAge:40,
						sAge:29,
					},
					friends:[
						{name:'jerry',age:35},
						{name:'tony',age:36}
					]
				}
			},
			methods: {
				addSex(){
					// Vue.set(this.student,'sex','男')
					this.$set(this.student,'sex','男')
				}
			}
		})
	</script>
</html>

9. Vue监测数据改变的原理_数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue监测数据改变的原理_数组</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>学校信息</h1>
			<h2>学校名称：{{school.name}}</h2>
			<h2>学校地址：{{school.address}}</h2>
			<h2>校长是：{{school.leader}}</h2>
			<hr/>
			<h1>学生信息</h1>
			<button @click="addSex">添加一个性别属性，默认值是男</button>
			<h2>姓名：{{student.name}}</h2>
			<h2 v-if="student.sex">性别：{{student.sex}}</h2>
			<h2>年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2>
			<h2>爱好</h2>
			<ul>
				<li v-for="(h,index) in student.hobby" :key="index">
					{{h}}
				</li>
			</ul>
			<h2>朋友们</h2>
			<ul>
				<li v-for="(f,index) in student.friends" :key="index">
					{{f.name}}--{{f.age}}
				</li>
			</ul>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				school:{
					name:'尚硅谷',
					address:'北京',
				},
				student:{
					name:'tom',
					age:{
						rAge:40,
						sAge:29,
					},
					hobby:['抽烟','喝酒','烫头'],
					friends:[
						{name:'jerry',age:35},
						{name:'tony',age:36}
					]
				}
			},
			methods: {
				addSex(){
					// Vue.set(this.student,'sex','男')
					this.$set(this.student,'sex','男')
				}
			}
		})
	</script>
</html>

10. 总结Vue数据监测

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>总结数据监视</title>
		<style>
			button{
				margin-top: 10px;
			}
		</style>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!--
        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的根数据对象 添加属性！！！
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>学生信息</h1>
			<button @click="student.age++">年龄+1岁</button> <br/>
			<button @click="addSex">添加性别属性，默认值：男</button> <br/>
			<button @click="student.sex = '未知' ">修改性别</button> <br/>
			<button @click="addFriend">在列表首位添加一个朋友</button> <br/>
			<button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br/>
			<button @click="addHobby">添加一个爱好</button> <br/>
			<button @click="updateHobby">修改第一个爱好为：开车</button> <br/>
			<button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br/>
			<h3>姓名：{{student.name}}</h3>
			<h3>年龄：{{student.age}}</h3>
			<h3 v-if="student.sex">性别：{{student.sex}}</h3>
			<h3>爱好：</h3>
			<ul>
				<li v-for="(h,index) in student.hobby" :key="index">
					{{h}}
				</li>
			</ul>
			<h3>朋友们：</h3>
			<ul>
				<li v-for="(f,index) in student.friends" :key="index">
					{{f.name}}--{{f.age}}
				</li>
			</ul>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				student:{
					name:'tom',
					age:18,
					hobby:['抽烟','喝酒','烫头'],
					friends:[
						{name:'jerry',age:35},
						{name:'tony',age:36}
					]
				}
			},
			methods: {
				addSex(){
					// Vue.set(this.student,'sex','男')
					this.$set(this.student,'sex','男')
				},
				addFriend(){
					this.student.friends.unshift({name:'jack',age:70})
				},
				updateFirstFriendName(){
					this.student.friends[0].name = '张三'
				},
				addHobby(){
					this.student.hobby.push('学习')
				},
				updateHobby(){
					// this.student.hobby.splice(0,1,'开车')
					// Vue.set(this.student.hobby,0,'开车')
					this.$set(this.student.hobby,0,'开车')
				},
				removeSmoke(){
					this.student.hobby = this.student.hobby.filter((h)=>{
						return h !== '抽烟'
					})
				}
			}
		})
	</script>
</html>