Vue笔记自用-Part1

模板语法

功能:用于解析标签体内容
用法:{{表达式}} 且可以直接读取到data中的属性

---

数据绑定

单向绑定[ v-bind ]:数据只能从data流向页面,如input表单

双向绑定[ v-model ]:数据可以双向流通

使用方法

<input type="text" v-bind:value="name">	 <!-- 单向绑定普通写法 -->

<input type="text" v-model:value="name">  <!-- 双向绑定普通写法 -->

<input type="text" :value="name"->  <!-- 单向绑定简写 -->

<input type="text" v-model="name"->  <!-- 双向绑定简写 -->

---

Object.defineproperty

Object.defineproperty(person,'age',{   // 给person对象添加一个名为 age 的属性,且可以被遍历
		value:18,
  		enumerable:true
 })

Object.defineproperty(person,'age',{
    //当有人读取person的age属性时,get函数就会被调用,且返回值就是age的值
	get( ) {     		
		console.log('age属性被读取了')
		return 18
	}
    //当有人修改person的age属性时,set函数就会被调用,且会收到修改的值
 	set( ) {							
		console.log('age属性被读取了')
	}
 })

---

事件绑定

 <!-- 使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名 -->

 <button v-on:click="ShowInfo">点我</button.>	 <!-- 不传参 -->

 <button @click="ShowInfo( $event,233 )">点我</button.> <!-- 传参,也可以只传一个event -->

methods: {					// 如果ShowInfo方法写为箭头式函数，则event指向window		
  		ShowInfo(event,num) {   // 此处的event可以是任意变量名,使用num接收233
			alert('madoka')
		}		
	}

event.target：获取button标签
event.target.innerText：获取button标签内的文字
event：指Vue实例对象，即vm

---

事件修饰符

<a href="xxx" @click.prevent="showInfo">点我</a>

<!-- [方法1] 在click后加上 .prevent 可阻止标签的默认行为,比如 a标签的跳转 -->
<!--        在click后加上 .stop 可阻止事件冒泡 -->

methods: {
    showInfo(e) {
        e.preventDefault()
        alert('madoka')
    }
}

// [方法2] 在showInfo方法里加上 e.preventDefault() 也可以阻止标签的默认行为
//        在showInfo方法里加上 e.stopPropagation() 也可以阻止事件冒泡

Vue中的事件修饰符

1.prevent 阻止默认事件

2.stop 阻止事件冒泡

3.once 事件只触发一次

4.capture 使用事件的捕获模式

5.self 只有event.target是当前操作的元素才触发事件

6.passive 事件的默认行为立即执行，无需等待事件回调执行完毕

---

键盘事件

Vue中常用的按键别名：

回车 => enter
删除 => delete
退出 => esc
空格 => space
换行 => tab
上 =>up
下 => dwon
左 => left
右 => right

<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">

<!-- 可以给键盘事件加上enter修饰,使其在按下enter后再执行showInfo函数 -->

---

监视属性

watch: {
    info: {
        immediate:true  //初始化时让handler调用一下
        handler(newValue,oldValue) {	//当info被修改时,handler就会被调用
            console.log('info被修改了')
        }
    }
    // 监视多级结构中某个属性的变化
    'numbers.a':{
        handler() {
            console.log('a被修改了')
        }
    }
    // 监视多级结构中所有属性的变化
    numbers:{
        deep:true,
        handler() {
            console.log('numbers被修改了')
        }
    }
}
// 配置deep:true可以检测对象内部值的改变,但Vue提供的watch默认不可以

---

绑定class样式

<div class="basic" :class="mood" @click="changeMood">{{name}}</div>
<!-- 绑定class样式的字符串写法   适用于: 样式的类名不确定，需要动态指定 -->

<div class="basic" :class="classArr">{{name}}</div>
<!-- 绑定class样式的数组写法   适用于: 要绑定的样式个数不确定，名字也不确定 -->

<div class="basic" :class="clasObj">{{name}}</div>
<!-- 绑定class样式的对象写法   适用于: 要绑定的样式个数确定,名字也确定,但要动态决定用不用 -->

new Vue({
    el: '#root',
    data: {
        name:'羽川翼',
        classArr:['shadow','border','fontsize'],
        classObj:{
        	shadow:false,
        	border:false
        }
    }
})

---

绑定style样式

<div class="basic" :style="styleObj">{{name}}</div>
<!-- 绑定style样式 对象写法 -->

<div class="basic" :style="styleArr">{{name}}</div>
<!-- 绑定style样式 数组写法 -->

new Vue({
    el:'#root',
    data:{
        name:'羽川翼',
        styleObj:{
            fontSize:'16px',
            color:'red',
        },
        styleArr:[
            {
                fontSize:'16px',
                color:'red'
            },
            {
                backgroundColor:'orange'
            }
        ]
    }
})