目录
一、模板语法
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.
如果回调函数很复杂,可以先使事件默认行为执行后,让回调函数慢慢执行