一、Vue.js组件

vue.js构建组件使用

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'
}
});

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

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

二、指令keep-alive

在看demo的时候看到在vue-router写着keep-alivekeep-alive的含义:

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

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

三、如何让css只在当前组件中起作用

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

 <style scoped></style>

四、vuejs循环插入图片

在写循环的时候,写入如下代码:

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

此时在控制台会出现警告
[Vue Warn]: src="{{item.image}}": interpolation in "src" attribute will cause a 404 request. Use v-bind:src instead.这里意思是在“src”属性插值将导致404请求。使用v-bind:src代替。

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

五、绑定value到Vue实例的一个动态属性上

对于单选按钮,勾选框及选择框选项,v-model绑定的value通常是静态字符串(对于勾选框是逻辑值):

 <!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">

但是有时候想绑定value到vue实例的一个动态属性上,这时可以用v-bind实现,并且这个属性的值可以不是字符串。例如绑定Checkbox的value到vue实例的一个动态属性:

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

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

 //当选中时
vm.toggle === vm.a
//当没选中时
vm.toggle === vm.b

所以此时需要在data中定义a,b,即:

 new Vue({
el:'...',
data:{
a:'a',
b:'b'
}
});

六、片段实例

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

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

这些情况让实例有未知数量的顶级元素,它将把它的 DOM 内容当作片断。片断实例仍然会正确地渲染内容。不过,它没有一个根节点,它的$el 指向一个锚节点,即一个空的文本节点(在开发模式下是一个注释节点)。

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

 <!-- 不可以,因为没有根元素 -->
<example v-show="ok" transition="fade"></example> <!-- props 可以 -->
<example :prop="someData"></example> <!-- 流程控制可以,但是不能有过渡 -->
<example v-if="ok"></example>

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

七、路由嵌套

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

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

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

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

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

 <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';
}
}
}
});

九、Vuejs在变化检测问题

1.检测数组

由于javascript的限制,vuejs不能检测到下面数组的变化:

直接索引设置元素,如vm.item[0]={};

修改数据的长度,如vm.item.length

为了解决问题1,Vuejs扩展了观察数组,为它添加一个$set()方法:

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

问题2,需要一个空数组替换items。

除了$set() ,vuejs也为观察数组添加了$remove()方法,用于从目标数组中查找并删除元素,在内部调用了splice() 。

因此,不必:

 var index = this.items.indexOf(item)
if (index !== -1) {
this.items.splice(index, 1)
}

只需:

 this.items.$remove(item);

2.检测对象

受ES5的显示,Vuejs不能检测到对象属性的添加或删除。因为Vuejs在初始化时候将属性转化为getter/setter,所以属性必须在data对象才能让Vuejs转换它,才能让它是响应的,例如:

 var data = { a: 1 }
var vm = new Vue({
data: data
})
// `vm.a` 和 `data.a` 现在是响应的 vm.b = 2
// `vm.b` 不是响应的 data.b = 2
// `data.b` 不是响应的

不过,有办法在实例创建之后添加属性并且让它是响应的。对于Vue实例,可以使用$set(key,value)实例方法:

 vm.$set('b', 2)
// `vm.b` 和 `data.b` 现在是响应的

对于普通数据对象,可以使用全局方法Vue.set(object, key, value) :

 Vue.set(data, 'c', 3)
// `vm.c` 和 `data.c` 现在是响应的

有时你想向已有对象上添加一些属性,例如使用 Object.assign()  _.extend() 添加属性。但是,添加到对象上的新属性不会触发更新。这时可以创建一个新的对象,包含原对象的属性和新的属性:

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

十、关于vuejs页面闪烁{{message}}

在vuejs指令中有v-cloak,这个指令保持在元素上直到关联实例结束编译。和CSS规则如[v-cloak]{display:none}一起用时,这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。

用法如下:

 [v-cloak]{
display:none;
}
<div v-cloak>{{message}}</div>

这样<div>不会显示,直到编译结束

十一、关于在v-for循环时候v-model的使用

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

十二、vuejs中过渡动画

在vuejs中,css定义动画:

 .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);
}

其中动画在定的时候要注意上下对应,上面有什么,下面有什么,都要变化的,如果有不变化的,应该抽离出去,作为公共css样式,在上面的css中,如果我只写 transform: translate(-50%,-50%);而不写下面的transform: translate(0,0);则会导致上面的transform: translate(-50%,-50%);被添加到下面,认为这个是不变的。

十三、指令v-el的使用

有时候我们想就像使用jquery那样去访问一个元素,此时就可以使用v-el指令,去给这个元素注册一个索引,方便通过所属实例的$el访问这个元素。

注意

HTML不区分大小写,所以v-el:someEl将转换为全小写。可以用v-el:some-el然后设置this.$el.someEl

示例

 <span v-el:msg>hello</span>
<span v-el:other-msg>world</span>
this.$els.msg.textContent // -> "hello"
this.$els.otherMsg.textContent // -> "world"
this.$els.msg //-><span>hello</span>

十四、关于vuejs中使用事件名

 在vuejs中,我们经常要绑定一些事件,有时候给DOM元素绑定,有时候给组件绑定。绑定事件在HTML中用v-on:click-"event" ,这时evet的名字不要出现大写,因为在1.x中不区分大小写,所以如果我们在HTML写v-on:click="myEvent"而在js中写myEvent就出错误,所以在vuejs的1.x绑定事件时候,要尽量避免使用大写字母。在2.0中没有该限制!

十五、v-if与v-show的区别

v-if直接不渲染这个DOM元素,而v-show是会渲染DOM元素,只是使用display:none隐藏,打开开发者工具可以看到该DOM

十六、关于transition全局钩子如何在组件中使用

Vue.transition是定义一个全局transition钩子的,如果想针对组件定义,则需要如下写法:

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

这样fade这个过度钩子只会作用于组件内,如果同时有同名的全局钩子,则会优先使用组建定义的

十七、利用vue-router如何实现组件在渲染出来前执行某个事件  

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

  

总结

以上就是关于vue.js使用总结的全部内容了,希望本文的内容对大家学习或者使用vue.js能带来一定的帮助,如果有疑问大家可以留言交流。

超全面的vue.js使用总结的更多相关文章

  1. 超全面的JavaWeb笔记day03<JS对象&函数>

    1.js的String对象(****) 2.js的Array对象 (****) 3.js的Date对象 (****) 获取当前的月 0-11,想要得到准确的月 +1 获取星期时候,星期日是 0 4.j ...

  2. 超全的 Vue 开源项目合集,签收一下

    超全的 Vue 开源项目合集,签收一下 xiaoge2016 前端开发 1周前 作者:xiaoge2016 链接: https://my.oschina.net/u/3018050/blog/2049 ...

  3. 超全面的.NET GDI+图形图像编程教程

    本篇主题内容是.NET GDI+图形图像编程系列的教程,不要被这个滚动条吓到,为了查找方便,我没有分开写,上面加了目录了,而且很多都是源码和图片~ (*^_^*) 本人也为了学习深刻,另一方面也是为了 ...

  4. 大数据-将MP3保存到数据库并读取出来《黑马程序员_超全面的JavaWeb视频教程vedio》day17

    黑马程序员_超全面的JavaWeb视频教程vedio\黑马程序员_超全面的JavaWeb教程-源码笔记\JavaWeb视频教程_day17-资料源码\day17_code\day17_1\ 大数据 目 ...

  5. [整理]Node入门 » 一本全面的Node.js教程 - Demo实践所遇到的问题

    花了一个上午看完[转载]Node入门 » 一本全面的Node.js教程 根据里面的Demo自己手动实现过程中还是遇到了些问题,特整理在此. <1>.由于node.msi安装包已经自动添加了 ...

  6. [转]超全面的.NET GDI+图形图像编程教程

    本篇主题内容是.NET GDI+图形图像编程系列的教程,不要被这个滚动条吓到,为了查找方便,我没有分开写,上面加了目录了,而且很多都是源码和图片~ GDI+绘图基础 编写图形程序时需要使用GDI(Gr ...

  7. [转载]Node入门 » 一本全面的Node.js教程

    http://www.nodebeginner.org/index-zh-cn.html 作者: Manuel Kiessling 翻译: goddyzhao & GrayZhang & ...

  8. 超全面的JavaWeb笔记day04<dom树等>

    1.案例:在末尾添加节点(*****) 创建标签 createElement方法 创建文本 createTextNode方法 把文本添加到标签下面 appendChild方法 2.元素对象(了解) 如 ...

  9. 超全面的JavaWeb笔记day15<mysql数据库>

    1.数据库的概述 2.SQL 3.DDL 4.DML 5.DCL 6.DQL MySQL 数据库 1 数据库概念(了解) 1.1 什么是数据库 数据库就是用来存储和管理数据的仓库! 数据库存储数据的优 ...

随机推荐

  1. codeforces 558B B. Amr and The Large Array(水题)

    题目链接: B. Amr and The Large Array time limit per test 1 second memory limit per test 256 megabytes in ...

  2. kettle 设置变量

    以下只是本人在使用过程中一些经验,可能有误解不对的地方,希望大家指正. 这个控件可以在job中调用,也可以在transformation中使用.下面将分别说明在两个不同任务中调用时的使用方法和需要注意 ...

  3. Java 的序列化Serializable接口介绍及应用

    常看到类中有一串很长的 如 private static final long serialVersionUID = -4667619549931154146L;的数字声明.这些其实是对此类进行序列化 ...

  4. 1123 Is It a Complete AVL Tree(30 分)

    An AVL tree is a self-balancing binary search tree. In an AVL tree, the heights of the two child sub ...

  5. 数据库和ADO

    数据库语言 数据库的简易流程(数据库客户端软件和数据库服务软件的执行流程) 主键的概念 如何创建主键 如何创建外键 主外键关系的概念以及使用 数据库的主要类型 数据库的主要数据类型 使用SQL语句来创 ...

  6. Ubuntu 获得超级用户权限

    sudo passwd root 首先要先输入当前用户的密码,再在"输入新的UNIX密码"后面输入你想要设置的 root 密码即可,然后就可以切换到 super user 了: $ ...

  7. query builder 在线生成sql

    http://devtools.korzh.com/easyquery/javascript/docs/javascript-query-builder-php

  8. 2、CDH组件安装

    一.zookeeper 1.安装 继续->完成: 二.HDFS 1.安装 继续->完成: 三.yarn.hive 1.安装yarn 继续->完成: 2.安装hive 继续->完 ...

  9. HDU-6395 多校7 Sequence(除法分块+矩阵快速幂)

    Sequence Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Total ...

  10. POJ - 3037 Skiing SPFA

    Skiing Bessie and the rest of Farmer John's cows are taking a trip this winter to go skiing. One day ...