Ⅶ期VUE的Day3:vue实例的属性和方法

一：vue实例的属性和方法

1. 属性

1.     vm.$el：获取vm关联的元素
2.     vm.$data：获取数据对象data
3.     vm.$options：获取自定义
4.     vm.$refs：获取所有添加ref属性的元素

2. 方法

1.     vm.$mount()：手动挂载vue实例
2.     vm.$destroy()：销毁实例
3.     vm.$nextTick(callback)：在dom更新完后再执行回调函数
4.     vm.$set(object,key,value)
5.     vm.$delete(object,key)
6.     vm.$watch(data,callback[,options])

<div id="itapp">
        {{msg}}
        <h2 ref="hello">你好</h2>
        <p ref="world">世界</p>

        <h1 ref="title">标题：{{nameK}}</h1>
        -----{{user.name}}
    </div>

	var vm=new Vue({
			// el:'#itapp',
			data:{
                msg:'welcome to itapp',
                nameK:'ceshi'
			},
			name:'tom',
			age:24,
			show:function(){
				console.log('show');
			},
            methods:{
               
            },
            mounted(){
            }
        });
        vm.$mount('#itapp');
        //属性：vm.属性名，获取data中的某个属性
        // console.log(vm.msg)

        // vm.$el 获取vm关联的元素
        // console.log(vm.$el)
        // vm.$el.style.color="red";

        // vm.$data 获取数据对象data
        // console.log(vm.$data)

        // vm.$options  //获取自定义
        console.log(vm.$options)
        console.log(vm.$options.name)
        console.log(vm.$options.age)
        vm.$options.show();

        // document.getElementById('itapp')

        // vm.$refs :获取所有添加ref属性的元素
        console.log(vm.$refs);
        console.log(vm.$refs.hello);
        vm.$refs.hello.style.color='red';  

       //dom没有更新完， vue实现响应式并不是数据发生变化之后， dom马上变化，需要时间
          console.log(vm.msg);
          vm.nameK="测试";
          console.log(vm.$refs.title.textContent)     

        //宏任务
        setTimeout(()=>{
            console.log('setTimeout');
            console.log(vm.$refs.title.innerHTML)
        },0)
        
         //微任务
         vm.$nextTick(function(){
            console.log('nextTick');
            console.log(vm.$refs.title.innerHTML)
        });

        // $nextTick :推荐


        // 修改数据
        vm.msg = 'Hello'
        // DOM 还没有更新
        Vue.nextTick(function () {
        // DOM 更新了
            console.log('vm.msg',vm.msg);
        })

ref

<div id="app">
        <div>
          <input type="button" value="获取元素内容" @click="getElement" />
          <!-- 使用 ref 获取元素 -->
          <h1 ref="myh1">这是一个大大的H1</h1>
     
          <hr>
          <!-- 使用 ref 获取子组件 -->
          <my-com ref="mycom"></my-com>
        </div>
      </div>

Vue.component('my-com', {
          template: '<h5>这是一个子组件</h5>',
          data() {
            return {
              name: '子组件'
            }
          }
        });
     
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {},
          methods: {
            getElement() {
              // 通过 this.$refs 来获取元素
              console.log(this.$refs);
              // 通过 this.$refs 来获取组件
              console.log(this.$refs.mycom.name);
            }
          }
        });

结果：

{myh1: h1, mycom: VueComponent}
子组件

set与get

<div id="itapp">
		<button @click="doUpdate">修改属性</button>
		<button @click="doAdd()">添加属性</button>
		<button @click="doDelete">删除属性</button>
		<hr>
		{{user}}
		<h2>{{user.name}}</h2>
		<h2>{{user.age}}</h2>
	</div>

var vm = new Vue({
			el: '#itapp',
			// data(){
			// 	return { 
			// 		name:'ss'
			// 	}	
			// },
			data: {
				user: {
					id: 1001,
					name: 'tom'
				}
			},
			methods: {
				doUpdate() {
					this.user.name = '汤姆';
				},
				doAdd() {
					// this.user.age=25;  //通过普通方式为对象添加属性时vue无法实时监视到
					// this.$set(this.user,'age',25); //通过vue实例的$set方法为对象添加属性，可以实时监视
					if (this.user.age) {
						this.user.age++;
					} else {
						Vue.set(this.user, 'age', 20);
					}
				},
				doDelete() {
					if (this.user.age) {
						// delete this.user.age; //无效， 不能实时渲染
						this.$delete(this.user, 'age'); //实例方法
						// Vue.delete(this.user,'age'); //vue的全局方法
					}
				}
			}
		});

forceUpdate迫使vue实例重新渲染

 <div id="itapp">
        {{user.name}}
        <!-- {{user.age}} -->
        {{country}}
    </div>

var vm = new Vue({
            el:'#itapp',
            data(){
                return {
                    user:{
                        name:'song'
                    }
                }
            },
            methods:{

            },
            created(){ 

            },
            beforeMount(){
                this.country = 'china';
            },
            mounted(){
              this.country = '中国';
            //   this.$set(this,'country','中国'); //不可以
              this.$forceUpdate(); //迫使vue实例重新渲染
              
            }
        })

监视数据的变化：$watch

<div id="itapp">
            <input type="text" v-model="name">
            <h3>{{name}}</h3>
            <hr>
            
            <input type="text" v-model="age">
            <h3>{{age}}</h3>
            <hr>
    
            <input type="text" v-model="user.name">
            <h3>{{user.name}}</h3>
    
            <!-- <input type="text" v-model="user.links.link">
            <h3>{{user.links.link}}</h3> -->
        </div>

var vm = new Vue({
            el:'#itapp',
            data(){
                return {
                    name:'tom',
                    age:20,
                    user:{
                        name:'song',
                        age:10
                    }
                }
            },
            //vue实例的watch选项，就是监视数据的更新
            watch:{
                age:function(newVal,oldVal){
                    console.log('age被修改啦,原来的值'+oldVal+'新值：' + newVal);
                },
                // age:(newVal,oldVal)=>{ },
                // age(newVal,oldVal){ }
                // 'user.name':function(newVal,oldVal){
                //     console.log('user.name被修改啦,原来的值'+oldVal+'新值：' + newVal);
                // },
                user:{
                    handler(newVal,oldVal){
                        debugger
                        console.log('newVal',newVal);
                        console.log('oldVal',oldVal);
                    },
                    deep:true //深度监视，当对象中的属性发生变化的时候会监视
                }

            },
            methods:{

            },
            created(){ 

            },
            beforeMount(){
               
            },
            mounted(){
             
              
            }
        });
        //vue实例提供的$watch方法
        vm.$watch('name',function(newVal,oldVal){
            console.log('name被修改啦,原来的值'+oldVal+'新值：' + newVal);
        })

二：自定义指令

分类：全局指令、局部指令

1. 自定义全局指令

    使用全局方法Vue.directive(指令ID,定义对象)    

2. 自定义局部指令

<div id="itapp">
		<h3 v-hello>{{msg}}</h3>
		 <button @click="change()">更新数据</button>
		<h3 v-world:wbs888="username">{{msg}}</h3>
		<!--<h3 v-wbs>软谋</h3> -->
		<input type="text" v-model="msg" v-focus>
	</div>

/**
		 * 自定义全局指令
		 * 注：使用指令时必须在指名名称前加前缀v-，即v-指令名称
		 */
			//钩子函数的参数  el,binding
		Vue.directive('hello',{
			bind(el,binding){ //常用！！ 	
				// console.log(el); //指令所绑定的元素，DOM对象
				el.style.color='red';
				console.log(binding); //name
				console.log(el); //<h3 style="color:red">welcome to itapp</h3>
				console.log('bind：指令第一次绑定到元素上时调用，只调用一次，可执行初始化操作');
			},
			inserted(el,binding){
				console.log(el)
				// binding.arg：传给指令的参数
				console.log('inserted：被绑定元素插入到DOM中时调用');
			},
			update(el,binding){
				console.log(el)
				console.log('update：被绑定元素所在模板更新时调用,模板还没更新完成');
			},
			componentUpdated(el,binding){
				console.log(el)
				console.log('componentUpdated：被绑定元素所在模板完成一次更新周期时调用');
			},
			unbind(el,binding){
				console.log('unbind：指令与元素解绑时调用，只调用一次');
			}
		});

		//动态传参  传入一个简单的函数， bind update 钩子函数可以调用
		Vue.directive('world',function(el,binding){
			
			console.log(binding);
			
		})
		var vm=new Vue({
			el:'#itapp',
			data:{
				msg:'welcome to itapp',
				username:'alice'
			},
			methods:{
				change(){
					this.msg = '你好';
				}
			},
			directives:{ //自定义局部指令

				focus:{
					bind(el,binding){
						//数据还没渲染
					},
					//被绑定元素插入到DOM中时调用
					inserted(el,binding){
						el.focus();
					}
				}
			}
			
		});

3. 练习 拖动页面中的元素

    onmouseover onmouseout 

    onmousedown onmousemove  onmouseup

<style>
		#itapp div{
			width: 100px;
			height: 100px;
			position:absolute;
		}
		#itapp .hello{
			background-color:red;
			top:0;
			left:0;
		}
		#itapp .world{
			background-color:blue;
			top:0;
			right:0;
		}

	</style>

<div id="itapp">
		<div class="hello" v-drag>itapp {{msg}}</div>
		<!-- <div class="world" v-drag>软谋</div> -->
        <!-- {{msg}} -->
		<button type="button" @click="changeMsg()"> 改变msg</button>
	</div>

// Vue.directive('drag',{});

        // bind update 钩子函数可以调用
        // bind :指令第一次绑定到元素上时调用，只调用一次，可执行初始化操作
		Vue.directive('drag',function(el){
            console.log('kkkkk');
            el.onmousedown=function(e){
				//获取鼠标点击处分别与div左边和上边的距离：鼠标位置-div位置
				// var disX=e.clientX-el.offsetLeft;   //e.offsetX
				// var disY=e.clientY-el.offsetTop;  // e.offsetY
				var disX = e.offsetX;
				var disY = e.offsetY;
				// console.log(disX,disY);

				//包含在onmousedown里面，表示点击后才移动，为防止鼠标移出div，使用document.onmousemove
				document.onmousemove=function(e){
					//获取移动后div的位置：鼠标位置-disX/disY
					var l=e.clientX-disX;
					var t=e.clientY-disY;
					el.style.left=l+'px';
					el.style.top=t+'px';
				}
				//停止移动
				document.onmouseup=function(e){
					document.onmousemove=null;
					document.onmouseup=null;
				}

			}
		});

		var vm=new Vue({
			el:'#itapp',
			data:{
				msg:'welcome to itapp',
				username:'alice'
			},
			methods:{
				changeMsg(){
					this.msg='欢迎来到武汉软谋'
				}
			}
		});

三：过渡(动画)

1. 简介

    Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果

    本质上还是使用CSS3动画：transition、animation

2. 基本用法

    使用transition组件，将要执行动画的元素包含在该组件内

        <transition>

            运动的元素

        </transition>       

    过滤的CSS类名：6个

<style>
        p{
			width: 300px;
			height: 300px;
			background-color:red;
		}
        .test-enter-active,.test-leave-active{
			transition:all 2s ease;
		}
		.test-enter-active{
			opacity:1;
			width:300px;
			height:300px;
		}
		.test-leave-active{
			opacity:0;
			width:50px;
			height:50px;
		}
		/* .fade-enter需要放在.fade-enter-active的后面 */
		.test-enter{
			opacity:0;
			width: 10px;
			height: 10px;
		}
    </style>
 <div id="itapp">
        <button @click="flag=!flag">点我</button>
        <transition name="test" 
            @before-enter="beforeEnter"
			@enter="enter"
			@after-enter="afterEnter"
			@before-leave="beforeLeave"
			@leave="leave"
			@after-leave="afterLeave">
            <p v-show="flag"
            >软测</p>
        </transition>  
    </div>

var vm = new Vue({
            data(){
                return {
                    flag:false
                }
            },
            el:'#itapp',
            methods:{
                beforeEnter(){
                    console.log('动画进入之前');
                },
                enter(){
                    console.log('动画进入');
                },
                afterEnter(el){
                    console.log('动画进入之后');
                    el.style.background='blue';
                },
                beforeLeave(){
                    console.log('动画离开之前');
                },
                leave(){
                    console.log('动画离开');
                },
                afterLeave(){
                    console.log('动画离开之后');
                }
            }
           
        })

3. 钩子函数(8个）

4. 结合第三方动画库animate.css一起使用   

<link rel="stylesheet" href="css/animate.css">
<style>
		p{
			width: 300px;
			height: 300px;
			background-color:red;
			margin:0 auto;
		}
	</style>

<div id="itapp">
		<button @click="flag=!flag">点我</button>	
		<transition enter-active-class="animated bounceInDown" leave-active-class="animated fadeOut">
			<p v-show="flag">软谋</p>
		</transition>
	</div>

	<script src="js/vue.js"></script>
var vm=new Vue({
			el:'#itapp',
			data:{
				flag:false
			}
		});

5. 多元素动画transition-group 

<link rel="stylesheet" href="css/animate.css">
	<script src="js/vue.js"></script>
	<style>
		p{
			width: 100px;
			height: 100px;
			background-color:red;
			margin:20px auto;
		}
	</style>
<div id="itapp">
		<button @click="flag=!flag">点我</button>
		<transition-group enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
			<!-- 内部元素 总是需要 提供唯一的 key 属性值 -->
			<p v-show="flag" :key="1">itapp</p>
			<p v-show="flag" :key="2">软谋</p>
		</transition-group>
	</div>

var vm=new Vue({
			el:'#itapp',
			data:{
				flag:false
			}
		});