同样的,我们先来回顾一下昨天学习的内容:

1.利用v-once来组织双向绑定

2.filter{}过滤器的使用(详情请看上一章)

3.computed(计算属性),利用computed属性实现filters同样的效果

4.利用method{}来实现与computed和filters同样的效果

5.比较filters、computed、method的区别

6.利用v-bind{}属性绑定HTML自带属性;如class,style等

7.v-bind{}属性绑定HTML自带属性的三种写法------对象,数组,数组+对象

8.vue会自动为类似于 border-radius,transform等需要加浏览器前缀的属性自动加上前缀

好了,回顾完昨天所学习的东西,那么我们进入今天的进程:::::

我想js中的  show(),hide()属性,大家一定已经耳熟能详,没错,这两组属性在我们的开发中运用得很多很多,那么我们来看一下,在Vue中,我们如何实现这两组属性吗,上代码:

<div v-if="ok">Ok</div>
<div v-else>No</div>
//以上代码详解:
1.值得注意的是v-else必须要紧接在v-if后面才会生效。
2.意思很明显,如果v-if的值为ok,那么输出Ok;如果v-if的值不为ok 那么输出No
 
如果我们把上面的代码更加语义化的写出来,那么就会是这样:
 
<div v-if="ok"></div>
<div v-if="!ok"></div>
 
同时,还有另一种表象相同但本质不同的写法:
<div v-show="ok">Ok</div>
<div v-else>No</div>
 
v-show其实和v-if的效果是一样的,只不过v-show不会渲染dom,而仅仅是改变css中display的属性而已;所以如果,我们把v-show="ok"换成v-show="false"的话,浏览器只会将其隐藏而不会删除节点。
 
值得注意的是,在新版本中v-show这种写法不支持 complate和v-else。
 
重点:所以通过上面的介绍,就可以得出这样一个结论;即为
 
1.v-if需要渲染dom,因此在切换速度上会比v-show慢;
2.而v-show的dom需要预先加载,因此初次加载量比v-if大;
 
所以,如果需要频繁切换则采用v-show;如果需要提升整个页面的加载速度则采用v-if。
 
 
以上只是开胃菜,蔬菜沙拉?水果沙拉???无所谓了,下面我们进入正题:
 
v-for::
我们知道对于任何变成语言来说,数据集合的循环处理其实都是最常用的功能,那么我们来看看vue的基本写法:
 
<div id="example">
    <div v-for="item in items"> {{ message }} </div>
</div>
 
var example2 = new Vue({
    el:' #example ',
    data{
        items[
            { message : ' foo ' }
            { message : ' bar ' }
]
}
})
上面的输出结果为:
foo , bar ;
 
同样,我们也可以写成比较像js原生语法的方式:
<div id =" example ">
    <div v-for=" item of items "> {{message}} </div>
</div>
 
上面提到的是最基本的v-for语法
 
其实Vue中的v-for和PHP中的foreach没有太大的区别;代码如下:
 
foreach( $x as $index => $y ){}
 
这个里面 $index 和 $y为一个键值对。
 
如:
$x = array( 1,2,3,4,5 )
那么 $index 依次是 0 1 2 3 4
        $y依次是 1 2 3 4 5 
 
 
这种写法,我们在Vue里可以这样写:
var example2 = new Vue({
    el:'#example',
    data{
        parentMessage : ' parent ',
        items{
            [
                { message : ' zoo ' },
                { message : ' bar ' }
]
}
})
 
<div id = "example"> 
    <div v-for=" ( item, index ) in items ">
            {{ parentMessage }} - {{ index }} - {{ item.message }}
    </div>
</div>
 
那么我猜测上面输出的结果应该是:
 

parent - 0 - zoo

parent - 1 - bar       
 
上面我们讲到了利用v-for来循环数组,那么我们同样还可以用v-for来循环对象,代码如下:
 
<div id= " example ">
    <div  v-for= " value in object ">
            {{ value }}
    </div>
</div>
 
new Vue({
    el: ' #example ',
    data {
        object : {
            FirstName : ' mc '
            LastName : ' mcc '
            Age : ' 20 '
}
}
})
 
以上将会输出 :
mc
mcc
20;;;;
 
一个疑问,如果说我们把上面代码中的 value替换为key,那么将会输出什么呢?
?????????????????????????????????????
 
毫无疑问,输出依然是不变的,至于为什么,后面将会提到。
 
可以看出Vue的写法简洁易懂,既可以循环集合,又可以内部属性,所以在用Vue的v-for循环的时候,要注意不要搞混了,完整循环代码如下:
<div id = "example">
    <div v-for = " ( index key value  )  in object">
    {{value}}.{{index}}:{{key}}
</div>
 
代码如上,输出的结果应该是:
 
0.FirstName:mc
1.LastName:mcc
2.Age:20
 
!!注: 在v-for属性当中,循环的第一个参数,也就是上面的index为 object中的 值
                                            循环的第二个参数,也就是上面的 key 为 object中的 键
                                                循环的第三个参数,也就是上面的value 为object中的 数组下标
 
 
 
那么某些时候,我们只需要循环次数而不需要循环数据,也就是空数据,那么我们可以这样。。。
 
 
<div v-for=" n in 10 "> {{ n }} </div>
那么打印出来的结果就应该是  ::    12345678910
 
 

今天我们就到这里,祝大家周末愉快,明天见~~~~~~

希望各位看官,可以留下自己的见解,希望可以向大家学习;

不管是有疑问、质疑等都可以留言发表,希望可以和大家一起讨论,共同进步

Vue学习之路---No.3(分享心得,欢迎批评指正)的更多相关文章

  1. vue学习之路 - 4.基本操作(下)

    vue学习之路 - 4.基本操作(下) 简述:本章节主要介绍 vue 的一些其他常用指令. Vue 指令 这里将 vue 的指令分为系统内部指令(vue 自带指令)和用户自定义指令两种. 系统内部指令 ...

  2. Vue学习之路之登录注册实例代码

    Vue学习之路之登录注册实例代码:https://www.jb51.net/article/118003.htm vue项目中路由验证和相应拦截的使用:https://blog.csdn.net/wa ...

  3. Vue学习之路---No.4(分享心得,欢迎批评指正)

    这里说声抱歉,周末因为有其他事,没有更新博客,那么我们今天继续上周5的说. 老规矩,先回顾一下上一次的重点: 1.利用V-if和v-else来提到show()和hide(),同时要记住,v-else一 ...

  4. JAVA学习之路与大家分享

    这是我四年以前总结的JAVA学习之路,希望对初学者或想从事JAVA开发的人有帮助. 本人是软件工程专业出身,先后学过C.C++.JAVA.VB.delphi等等开发语言以及网络相关管理技术.哎,好久不 ...

  5. Vue学习之路第一篇(学习准备)

    1.开发工具的选择 这个和个人的开发习惯有关,并不做强求,厉害的话用记事本也可以.但是我还是建议用人气比较高的编辑工具,毕竟功能比较全面,开发起来效率比较高. 我之前写前端一直用的是sublimete ...

  6. Vue学习之路---No.2(分享心得,欢迎批评指正)

    昨天我们大致了解了有关Vue的基础知识和语法:今天我们继续在大V这条路上前进. 首先,我们回忆一下昨天提到的相关知识点: 1.了解Vue的核心理念------"数据驱动视图" 2. ...

  7. Vue学习之路---No.6(分享心得,欢迎批评指正)

    我们还是先回顾一下上一次的重点: 1.事件绑定,我们可以对分别用方法和js表达式对事件进行处理 2.当方法名带括号的时候,在方法中一定要传参:而不带括号的时候,vm会自动配置默认event 3.各类事 ...

  8. Vue学习之路---No.7(分享心得,欢迎批评指正)

    老规矩,先回顾一下上回的重点: 1.对于input框,若为单选框,如果没有对其设置value,那么其checked的值将在true Or false之间切换:如果设置了value,那么将会切换valu ...

  9. Vue学习之路---No.1(分享心得,欢迎批评指正)

    首先为了打消大家对Vue.js存在的顾虑,先通过大家所熟知的JQ作为对比. 都知道JQ的语法相对简单.清楚.使用方便.功能齐全: 那么Vue.js呢,同样的,Vue.js与JQ在很多地方都是相同之处, ...

随机推荐

  1. 提升webpack打包速度

    webpack打包文件体积过大,怎么提升速度? 借助webpack visualizer可视化插件,来看构建的情况.这个问题要具体情况具体分析,看看打包文件有哪些块头比较大,哪些不常改变,最好列一个l ...

  2. Selenium 2自动化测试实战

    Selenium 2自动化测试实战 百度网盘 链接:https://pan.baidu.com/s/1aiP3d8Y1QlcHD3fAlEj4sg 提取码:jp8e 复制这段内容后打开百度网盘手机Ap ...

  3. return的作用

    (1)终止函数的执行. (2)返回到调用的地方. (3)返回值.

  4. Unity项目导入的error

    5.6.3error 如下:An assembly with the same name `UnityEngine.UI' has already been imported. Consider re ...

  5. c++11 线程池

    也可参考: https://www.cnblogs.com/ailumiyana/p/10016965.html *** https://blog.csdn.net/jlusuoya/article/ ...

  6. 7. Buffer_包描述文件_npm常用指令_fs文件读写_模块化require的规则

    1. Buffer 一个和数组类似的对象,不同是 Buffer 是专门用来保存二进制数据的. 特点: 大小固定: 在创建时就确定了,且无法调整 性能较好: 直接对计算机的内存进行操作 每个元素大小为1 ...

  7. [LeetCode] Minimum Distance Between BST Nodes 二叉搜索树中结点的最小距离

    Given a Binary Search Tree (BST) with the root node root, return the minimum difference between the ...

  8. 在线协作开发工具apizza使用方法(https://apizza.net/projects)

    1. 2. 3. 4. 5. 谷歌浏览器点击选择“更多工具”->“扩展程序”  6. 将刚才解压好的文件夹拖到这个位置即可

  9. 《SQL Server性能调优实战》知识点汇总

    2.4数据库结构的设计 好的性能出自好的设计 尽可能添加数据完整约束(非空约束.默认值约束.CHECK约束.唯一约束.外键约束)等,这些约束的添加将有助于数据库关系引擎分析执行计划. 尽可能小的字段类 ...

  10. ping vs telnet, what is the difference between them and when to use which?

    Ping is an ICMP protocol. Basically any system with TCP/IP could respond to ICMP calls if they were ...