Vue：终于下次一定了

目录

一、模板语法

1、插值语法

2、指令语法

二、数据绑定

1、单向数据绑定

2、双向数据绑定

三、Vue的helloworld 

1.el的两种写法 

2.data的两种写法 

四、MVVM模型

五、数据代理

Vue中的事件代理

六、事件处理

 事件修饰符

---

 

一、模板语法

1、插值语法

2、指令语法

二、数据绑定

1、单向数据绑定

v-bind:href="xxx"
#简写为
:href="xxx"

2、双向数据绑定

只能用于表单数据中 

v-model:value="xxx"
可以简写为
v-model="xxx"

三、Vue的helloworld 

<!-- 
            data与el的2种写法
                    1.el有2种写法
                                    (1).new Vue时候配置el属性。
                                    (2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
                    2.data有2种写法
                                    (1).对象式
                                    (2).函数式
                                    如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
                    3.一个重要的原则：
                                    由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

1.el的两种写法 

<div id="root">
			<h1>你好，{{name}}</h1>
		</div>

/* const v = new Vue({
			//el:'#root', //第一种写法
			data:{
				name:'尚硅谷'
			}
		})

v.$mount('#root') //第二种写法 */

2.data的两种写法 

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

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

 

四、MVVM模型

 

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

五、数据代理

使代理的数据与普通的属性不同

<script type="text/javascript" >
			let number = 18
			let person = {
				name:'张三',
				sex:'男',
			}

			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)就会被调用，且会收到修改的具体值
				// set(value){
				// 	console.log('有人修改了age属性，且值是',value)
				// 	number = value
				// }

			})

			 console.log(Object.keys(person))

			console.log(person)
		</script>

如果被代理的数据给定了初值，如18，则被代理的数据默认不能被枚举修改

为给定初值，可以修改值，但依然不能被枚举

 何为数据代理？

<!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）-->
		<script type="text/javascript" >
			let obj = {x:100}
			let obj2 = {y:200}

			Object.defineProperty(obj2,'x',{
				get(){
					return obj.x
				},
				set(value){
					obj.x = value
				}
			})
		</script>

Vue中的事件代理

1.Vue中的数据代理：
                            通过vm对象来代理data对象中属性的操作（读/写）
                2.Vue中数据代理的好处：
                            更加方便的操作data中的数据
                3.基本原理：
                            通过Object.defineProperty()把data对象中所有属性添加到vm上。
                            为每一个添加到vm上的属性，都指定一个getter/setter。
                            在getter/setter内部去操作（读/写）data中对应的属性。

使data中本来应该通过vm._data才能拿到的数据，Vue将这份数据拷贝到了vm对象中，同时提供了get，set方法，是我们能直接调用！

六、事件处理

事件的基本使用：
                            1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
                            2.事件的回调需要配置在methods对象中，最终会在vm上；
                            3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
                            4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
                            5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；

1.

 2.回调函数不能写在data里，否则会加大Vue的解析压力，会为回调函数生成get，set方法，而这是无用功！！！

 

3.

既可以传参66，也可以使用事件对象event

 事件修饰符

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

1、取消默认行为，比如超链接

 

2、只启用子模块的功能，禁用掉冒泡

 

 

3、

只触发一次，比如超链接，第二次就失效

 

 

4.捕获模式就是和冒泡顺序反着来，从外往内，冒泡是从内向外

 5、

也相当于是一种禁用掉冒泡的功能，只有指定元素能触发回调函数

 

6.

如果回调函数很复杂，可以先使事件默认行为执行后，让回调函数慢慢执行