20190219VUE学习第三节

一，Component新建VUE方法

• 新建：在列表中Component右键New添加Component.vue命名为MyTest.vue

•  引用：在Home.vue中<template>..<template>, <script>..<script>三个地方需要引用，如下图标注

二，v-if,v-show指令的区别

v-if ：是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

v-show ：不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

通俗的说，使用v-if指令会将逻辑再内存中清除，下次使用需要重新加载，影响代码执行效率；v-show指令将逻辑隐藏起来，但是占用内存。使用中需要从内存和速度两方面进行选择。

以下为自己测试的例子，两种指令显示的效果一样：

data中定义isclicked：false

template 中放入button，写入单击事件

<template>
    <div id="test">
        <div v-if="isclicked">人生若只如初见</div>
        <div v-show="isclicked">人生若只如初见2</div>
        <div class="button" v-on:click="mybutton">切换显示</div>
    <div>
<template>

script中函数为：

methods:{
            mybutton:function () {
                this.isclicked= !this.isclicked;
                console.log("您点击了切换按钮！")
            }

页面显示效果：单击按钮后显示

 

三，v-for指令

v-for可以把数据中的一个数组对应为一组元素，v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。

举例1—— v-for列表渲染：

在data定义一个数组list2，其中数组元素分别为三个人的姓名，性别，年龄

list2:[{name:'张三',age:'18',sex:'男'},{name:'李四',age:'20',sex:'女'},{name:'王五',age:'22',sex:'男'}]

template创建ul,li

            <ul>
              <li v-for="(item,index) in list2" :key="index">{{index+1}},{{item.name}},{{item.sex}},{{item.age}}</li>
            </ul>

其中 key="index"为主键的意思，打印内容中{{index+1}}为的是不让序号从0开始，依次显示出序号，姓名，性别，年龄

页面显示效果：

举例2—— v-for表格渲染：

为了让数据元素更直观体现，现在我们用tabie的方式显示

           <table border="2">
                <thead>
                  <td>序号</td>
                  <td>姓名</td>
                  <td>性别</td>
                  <td>年龄</td>
                </thead>
                <tr   v-for="(item,index) in list2">
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.sex}}</td>
                    <td>{{item.age}}</td>
                </tr>
            </table>

thead中为第一列列明，tr中为数组元素的内容

页面显示效果：

四，运算属性

页面中的两个input，在input1中输入姓，input2中输入名,两个input输入的内容如何拼接成完整的姓名呢？下面我们介绍三中方法：

1，字符串连接方法：

data中定义四个变量，

            firstname:"",
            secondname:"",
            familyname:"家族名字",
            lastname:"第二个名字"

template 代码：用到上一节中的v-model双向绑定，显示注释

            <div>
                姓：<input type="text" v-model="firstname" title="familyname"/>
                名：<input type="text" v-model="secondname" title="lastname"/>
                <div>（您的全名）连接方法:{{firstname}}{{secondname}}</div>
            </div>

页面显示效果：在两个input中输入张和三，拼接后的字符串就会在下面div中显示

2，函数方法

在methods中定义函数名为fullname()

           fullname:function () {
               return this.firstname+''+this.secondname;
           }

显示fullname函数返回值

template 代码：

   <div>
                姓：<input type="text" v-model="firstname" title="familyname"/>
                名：<input type="text" v-model="secondname" title="lastname"/>
                <div>（您的全名）连接方法:{{firstname}}{{secondname}}</div>
                <div>函数方法：{{fullname()}}</div>
            </div>

页面显示效果：

3，computed 计算属性

• computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
• computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择

       举例：

       在computed中定义函数名为fullname1，这里要注意：不能写在data中，函数内容跟上面一致

computed:{
            fullname1:function(){
                return this.firstname+''+this.secondname;
        }
        }

template 代码：这里fullname1后面不用加括号

<div>
    姓：<input type="text" v-model="firstname" title="familyname"/>
    名：<input type="text" v-model="secondname" title="lastname"/>
    <div>（您的全名）连接方法:{{firstname}}{{secondname}}</div>
    <div>函数方法：{{fullname()}}</div>
    <div>计算属性：{{fullname1}}</div>
</div>

页面显示效果：

五：获取年月日时分秒方法

在上个例子计算属性，在console.log中加入年月日时分秒，调试时非常实用

    computed:{
            fullname1:function(){
                let  d=new Date();//获取当前计算机时间
                let  y=d.getFullYear()+100;    //返回年份2019+100
                let  str=d.toLocaleString()+' '+d.getMilliseconds(); //返回年月日+时分秒毫秒
                 console.log("computed正在调试:"+' '+ y +"年"+str);  //控制台显示str
                return this.firstname+''+this.secondname;
        }
        }

f12控制台显示：