vue踩坑不完全指北(1)

来源：互联网发布：小蜜蜂软件怎么使用编辑：程序博客网时间：2024/06/06 11:37

1.Vuejs组件

vuejs构建组件使用

Vue.component('componentName',{ /*component*/ })；

这里注意一点，组件要先注册再使用，也就是说：

Vue.component('mine',{           template:'#mineTpl',           props:['name','title','city','content']        }); var v=new Vue({      el:'#vueInstance',      data:{          name:'zhang',          title:'this is title',         city:'Beijing',         content:'these are some desc about Blog'     }});

2.指令keep-alive

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

<component :is='curremtView' keep-alive></component>

3.如何让css只在当前组件中起作用

在每一个vue组件中都可以定义各自的css，js，如果希望组件内写的css只对当前组件起作用，只需要在style中写入scoped,即：

<style scoped></style>

4.vuejs循环插入图片

<div class="bio-slide" v-for="item in items">       <img :src="item.image"></div>

5.绑定value到Vue实例的一个动态属性上

<input type="checkbox"v-model="toggle"v-bind:true-value="a"v-bind:false-value="b"><p>{{toggle}}</p>

6.片段实例

下面几种情况会让实例变成一个片断实例：

模板包含多个顶级元素。
模板只包含普通文本。
模板只包含其它组件（其它组件可能是一个片段实例）。
模板只包含一个元素指令，如<partial> 或vue-router 的 <router-view>。
模板根节点有一个流程控制指令，如v-if或v-for。

7.路由嵌套

路由嵌套会将其他组件渲染到该组件内，而不是进行整个页面跳转，router-view本身就是将组件渲染到该位置，想要进行页面跳转，就要将页面渲染到根组件，在起始配置路由时候写到：

var App = Vue.extend({ root });router.start(App,'#app');

8.实现多个根据不同条件显示不同文字的方法

用计算属性computed

<div id="test">  <input type="text" v-model="inputValue">  <h1>{{changeVaule}}</h1></div>new Vue({  el:'#test',  data:{    changeVaule:'123'  },  computed :{    changeVaule:function(){      if(this.inputValue!==''){        return this.inputValue;      }else{        return 'empty';      }    }  }});

9.Vuejs在变化检测问题

1.检测数组

// 与 `example1.items[0] = ...` 相同，但是能触发视图更新example1.items.$set(0, { childMsg: 'Changed!'})

或者$remove

this.items.$remove(item);

2.检测对象

能检测到对象属性的添加或删除

使用$set(key,value)

vm.$set('b', 2)

// 不使用 `Object.assign(this.someObject, { a: 1, b: 2 })`this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

10.关于vuejs页面闪烁

v-cloak(建议全局使用)

[v-cloak]{    display:none;}

11.关于在`v-for`循环时候`v-model`的使用

有时候需要循环生成input，用v-model绑定后，利用vuejs操作它，此时我们可以在v-model中写一个数组selected[$index]，这样就可以给不同的input绑定不同的v-model，从而分别操作他们。

12.vuejs中过渡动画

.zoom-transition{      width:60%;      height:auto;      position: absolute;      left:50%;      top:50%;      transform: translate(-50%,-50%);      -webkit-transition: all .3s ease;      transition: all .3s ease;  }  .zoom-enter, .zoom-leave{      width:150px;      height:auto;      position: absolute;      left:20px;      top:20px;      transform: translate(0,0);  }

动画在定的时候要注意上下对应，上面有什么，下面有什么，都要变化的，

阅读全文

0 0