超全面的vue.js使用总结

原创 黎云锐 教程 前端 6709阅读 2018-11-13 15:45:09 举报

一、Vue.js组件

vue.js构建组件使用

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

如果反过来会报错,因为反过来代表先使用了组件的,但是组件却没注册。

webpack报错后,使用webpack --display-error-details可以排错

二、指令keep-alive

在看demo的时候看到在vue-router写着keep-alive,keep-alive的含义:
如果把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染。为此可以添加一个keep-alive指令
</component></pre>

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

这里绑定后,并不是说就可以点击后由true,false的切换变为a,b的切换,因为这里定义的动态a,b是scope上的a,b,并不能直接显示出来,此时

六、片段实例

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

模板包含多个顶级元素。
模板只包含普通文本。
模板只包含其它组件(其它组件可能是一个片段实例)。
模板只包含一个元素指令,如<partial> 或 vue-router 的 <router-view> 。
模板根节点有一个流程控制指令,如 v-if 或 v-for。
这些情况让实例有未知数量的顶级元素,它将把它的 DOM 内容当作片断。片断实例仍然会正确地渲染内容。不过,它没有一个根节点,它的$el 指向一个锚节点,即一个空的文本节点(在开发模式下是一个注释节点)。

但是更重要的是,组件元素上的非流程控制指令,非 prop 特性和过渡将被忽略,因为没有根元素供绑定:

片段实例也有用处,但是通常情况下组件有一个根节点比较好,它会保证组件元素上的指令和特性能正确的转换,同时性能也稍微好些。

七、路由嵌套

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

这里首先将根组件注册进来,用于将路由中配置好的各个页面渲染出来,然后将根组件挂载到与#app匹配的元素上。

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

v-if,v-else可以实现条件选择,但是如果是多个连续的条件选择,则需要用到计算属性computed。例如实现当输入框中什么都没写的时候显示字符串‘empty',否则显示输入框中的内容,代码如下:

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

1 var index = this.items.indexOf(item)
2 if (index !== -1) {
3 this.items.splice(index, 1)
4 }</pre>

1 var data = { a: 1 }
2 var vm = new Vue({
3 data: data
4 })
5 // vm.adata.a 现在是响应的
6
7 vm.b = 2
8 // vm.b 不是响应的
9
10 data.b = 2
11 // data.b 不是响应的</pre>

1 vm.$set('b', 2)
2 // vm.bdata.b 现在是响应的</pre>

1 Vue.set(data, 'c', 3)
2 // vm.cdata.c 现在是响应的</pre>

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

1 [v-cloak]{
2 display:none;
3 }
4 <div v-cloak>{{message}}</div></pre>

1 .zoom-transition{
2 width:60%;
3 height:auto;
4 position: absolute;
5 left:50%;
6 top:50%;
7 transform: translate(-50%,-50%);
8 -webkit-transition: all .3s ease;
9 transition: all .3s ease;
10 }
11 .zoom-enter, .zoom-leave{
12 width:150px;
13 height:auto;
14 position: absolute;
15 left:20px;
16 top:20px;
17 transform: translate(0,0);
18 }</pre>
  }//欢迎加入全栈开发交流圈一起学习交流:582735936
  ]//面向1-3年前端人员
  } //帮助突破技术瓶颈,提升思维能力

1 <span v-el:msg>hello</span>
2 <span v-el:other-msg>world</span>
3 this.$els.msg.textContent // -> "hello"
4 this.$els.otherMsg.textContent // -> "world"
5 this.$els.msg //-><span>hello</span></pre>

export default``{
transition:{
'fade'``:{
enter() {},
leave() {}
}
}
}

export default``{
data(){
return``{
selected:0,
currentView:``'view_0'
}
},
methods:{
choose(index) {
this``.selected=index;
this``.currentView=``'view_'``+index;
}
},
route:{
data() {
/*每次切换路由,在渲染出页面前都会执行*/
}
}
}

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复