vue饿了吗实战总结

1、v-el ，v-ref 最后都转化为了 ref ref="xxx"

a、ref在官网上的解释简单来说就是用来绑定某个dom元素，或者来说用来绑定某个组件，然后在$refs里面调用,

b、如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子组件上，引用就指向组件实例

c、$refs作为子组件索引，但是是非响应式，所以尽量少用

eg:<div class='parent'ref='showhello'>hello</div> js中 this.$refs.showhello.innerText() ----showhello关于ref注册时间的重要说明: 因为ref本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模版中做数据绑定。

2、vue里面的类名等都可以写成方法等只要最后返回的东西是需要的东西就可以

3、父组件向子组件传递参数在子组件中通过props接收在父组件中通过：seller 通过api获取并且在data中定义

<router-view :seller="seller">content</router-view>子组件：

props:{ //这里router 路由的时候将这个传过来了所以可以直接使用 seller:{ type:Object } }

4、子组件向父组件传递参数 通过$emit 一般是定义一个show或者是click事件然后通过$emit传递

eg:子级：

 

	togglecontent(event){
 	 if(!event._constructed){
   	 return;//设置他的原生事件不触发
  	}
  	this.onlycontent = !this.onlycontent;
  	this.$emit("toggleContent",this.onlycontent);
	}

//这里toggleContent表示在父级中调用的参数的调用名

 

父级：

a、先导入组件

	import rating from '../rating/rating.vue';

 

b、然后注册

 

	components:{
 	 rating
	}

 

c、在页面引用这个组件

 

	<rating :selectedType="selectedType"  v-on:ratingtypeSelect="ratingtypeselect" v-on:toggleContent="togglecontent"  :onlyContent="onlyContent" :destype="destype" :rating="food.ratings"></rating>

 

通过@toggleContent='togglecontent'或者v-on:toggleContent='togglecontent'

d、通过togglecontent(){}这个方法将子级定义出来的togglecontent值赋值给父级

 

	togglecontent(onlyContent){
  		this.onlyContent = onlyContent;
  		this.$nextTick(() =>{
    		this.scroll.refresh();
  		})
	},

 

 

 

5、vue2中的路由定义层：<router-link to="/goods">商品</router-link> 这里用to指向路径表现层：<keep-alive>

	<keep-alive><router-view :seller="seller">content</router-view></keep-alive>

 

6、<keep-alive>如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个keep-alive指令

7、动态设置class 里面可以接收多个json对象也可以接收数组但是最后还是会将数组转化成json对象的形式

<div class='top' :class="{'active':show}"></div>

data:{showdiv:false}定义show(){ this.showdiv=true;} :class="{}"里面也可以写成三元判断或者是简单的if条件判断添加一些 在特定条件下才显示的style样式

<div v-bind:class="[isActive ? activeClass : '', errorClass]">

8、属性绑定 v-bind:class="{}" 简写 :class="{}" 绑定事件 监听事件：v-on:click='show' 简写 @click='show'

9、v-if 和v-show的区别v-if 条件判断,不满足条件的话则不会出现在dom中 v-show 是否显示,不管满不满足条件均会在dom中,若不满足条件,则会设置成隐藏 display:none v-show是通过display来控制的

10、

Vue.nextTick( [callback, context] )

• 参数：

  • {Function} [callback]
  • {Object} [context]

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 异步更新队列

 

 

this.$nextTick(() =>{
  if(!this.imscroll){
    this.imscroll = new BScroll(this.$refs.images,{
      scrollX:true,
      eventPassthrough:'vertical',
      click:true
    });
  }
});

对dom操作最好是在这里面进行