一、模板语法
1、插值语法
用在标签体中{{name}}
2、指令语法
用于解析标签，(包括标签属性，标签体内容，绑定事件。。)
1、v-bind: ===简写为>:
单向绑定数据
<div id="root2">
<a v-bind:href="url">点我去百度</a>
</div>
new Vue({
el:"#root2",
data:{
name:"黄同学",
url:"https://www.baidu.com"
}
})
2、v-model :双向数据绑定
v-model只能用在表单元素上！！
v-model: value ======>简写为 v-model
3、关于el和data的绑定
1、el的另一种写法
v.$mount("#root") ======>代替el:"#root"
setTimeout(()=>{ ==============>设置计时器
v.$mount("#root")
},1000)
2、data的另一种写法
data:function(){ =======>函数式
return{
name:"孙洲逸"
}
}
2、数据代理
1、defineProperty()的用法
Object.defineProperty(person,"age",{
value:18
})
Object.defineProperty(person,"age",{
value:18,
enmuerable:true
wirtable:true
configurable:true
get:function(){
return number
}
set(value){
console.log("有人修改了age的属性")
number = value;
}
})
2、Vue中的数据代理
1、通过vm对象来代理data对象中的属性操作（读/写）
2、好处：更加方便的操作data中的数据
3、原理
通过Object.defineProperty()把data对象中的属性添加到vm上面
为每一个添加的属性都指定一个getter/setter属性
通过getter/setter方法去操作data中的属性
3、事件处理
methods:{
showinfo(event){
console.log(this === vm)
console.log(event.target.innerText)
}
showinfo:(event)=>{
console.log(this === vm)
console.log(event.target.innerText)
}
1、传递方式
1、不传参
<button v-on:click="showinfo">点我查看信息</button>
2、传参
<button @click="showinfo2(66,$event)">点我查看信息2</button>
3、简写
v-on:click ================> @click
2、传递修饰符
1、prevent 阻止默认事件
2、stop 阻止事件冒泡
<div class="demo1" @click="showinfo">
<button id="test2" @click.stop="showinfo">点我</button>
</div>
3、once 事件只触发一次
4、capture 事件捕获阶段触发
<div @click.capture="showmsg(1)">
div1
<div @click="showmsg(2)">div2</div>
</div>
5、self 只有触发事件的event.traget是自己时，才会执行事件
6、passive 先执行默认事件，再执行回调
@scroll //滚动条滚动
@wheel //鼠标滚轮滚动
3、键盘事件
1、Vue中常见的按键别名
enter、delete、esc、space、tab (必须配合keyup使用)、up、down、left、right
2、特殊的几个按键
ctrl、alt、shift、meta
（配合keyup使用时，必须同时按下其他键，再释放其他键，才能起作用）
（配合keydown使用时，正常发挥作用）
3、自定义别名
Vue.config.keyCodes.huiche=13
4、修饰符和键盘事件可以连续写
4、计算属性
1、概念
1、定义：要用的属性是不存在的，需要通过已有的属性来进行计算
2、原理：借助了底层的Object.Property方法提供setter和getter
2、简写**(只有考虑读取不考虑修改的时候才能使用！！)**
正常写法
computed:{
fullName:{
get(){
console.log("有人调用了get")
return this.firstName + "-"+this.lastName
}
}
```
```
简写
computed:{
fullName(){
return this.firstName+"-"+this.lastName
}
}
5、深度监视
1、监视的两种写法
第一种
watch:{
isHot:{
handler(){
console.log("isHot被改变了")
this.weather = this.isHot===true?"炎热":"寒冷"
}
},
第二种
vm.$watch('isHot',{
handler(newValue,oldValue){
console.log("isHot被修改了")
}
})
2、属性
1、immediate : 初始化的时候让handler执行一下
2、deep：深度监视
"number.a":{
handler(){
console.log("a被改变了")
}
},
number:{
deep:true,
handler(){
console.log("number北改变了")
}
}
3、注意点
1、vue中的深度监视默认不监测对象内部值的改变
2、配置属性deep：true可以检测对象内部值的改变
3、Vue自身可以监测对象内部值的改变，但是Vue提供的watch默认不可以
4、使用watch监测时，根据对象的数据结构，决定是否采用深度监测
4、监视的简写
前提：不需要开启immediate、deep的时候才可以
简写形式
watch:{
isHot(newValue,oldValue){
console.log("isHot被修改了")
}
}
vm.$watch("isHot",function(newValue,oldValue){
console.log("isHot被改变了")
})
5、computed和watch的区别
1、computed能完成的功能，watch也能完成
2、watch能完成的功能，computed不一定能完成，比如异步操作
6、绑定class样式
1、绑定的样式用:class
<div class="basic" :class="mood" id="box" @click="changeMood">
{{context}}
</div>
2、绑定多个样式====用数组
<div id="boxx" class="basic" :class="classArr">
{{context}}
</div>
const vm2 = new Vue({
el:"#boxx",
data:{
context:"你好",
classArr:["sy1","sy2","sy3"]
}
})
3、切换多个样式
const vm3 = new Vue({
el:"#boxxx",
data:{
context:"你好",
classobj:{
sy1:false,
sy2:false,
sy3:false
}
}
2、绑定style样式
可以放对象或者对象数组
<div class ="basic" :style="{fontSize:fsize+'px'}">{{context}}</div>
7、条件渲染
1、条件指令
1、v-show =“true”
决定元素是否显示
底层实现原理为display：none
2、v-if
元素直接消灭掉，
3、
template可以不破坏页面结构
但是只可以和v-if结合起来使用
不可以和v-show结合起来使用
<template v-if="n === 1">
<div>点我n</div>
<div>点我2</div>
<div>点我3</div>
<div>点我4</div>
</template>
|