暑期实习第二天：vue项目的搭建配置、遇到的问题以及继续复习vue的知识

1、vue项目的搭建配置

具体可见：如何搭建一个vue项目(完整步骤) - 对方屌丝正在输入中 - 博客园 (cnblogs.com)

里面足够详细，不再赘述

2、运行时遇到的问题：

其一：

 原因：配置问题，在项目目录里找到package.json里的scriptss代码块

 

 可以看到scripts代码块里没有dev属性 对应

vue-cli-service serve

的是serve属性。

解决方法：1、运行时使用 npm run serve 而不是npm run dev运行项目

2、或者在scripts代码块里把serve改成dev即可使用npm run dev运行，如图

其二：

 也出现了missing script的错误，可是在package.json里script的配置没有问题，如图

 原因：问题出在运行时的路径不是脚手架的根目录，见下图

 

 脚手架的根目录是sl_nurse_online_ui 但我们运行项目时的路径却只到暑期实训这一级，系统自然找不到package.json，自然会missing scripts。

解决方法：更改启动路径，改到根目录即可。

 运用新路径后，再npm run dev即可

 3、vue的继续复习

        vue过滤器：

vue提供了一个可以用来过滤当前模板渲染语法中内容的API，对网页中的内容文本进行过滤修改。

使用：

 <!-- 使用过滤器的时候，过滤器函数要加一个 |  -->
        <div>num的值：{{num | max10}}</div>
        <!-- 过滤器是可以使用多个的，多个过滤器之间需要用 | 隔开 -->
        <!-- 从左往右过滤 -->
        <div>num2的值：{{num2 | add(1,3) | max10}}</div>

filters: {
                // 定义过滤器的函数，每个过滤器函数都有一个value参数表示需要过滤的值
                // 过滤器必须要有一个返回值
                max10(value) {
                    if (value > 10) {
                        return 10
                    }else{
                        return value
                    };
                },
                // 过滤器函数中也可以进行属性传值
                add(value,params1,params2){
                    return value + params1 + params2
                },
}

        v-if条件语句：

          v-if 判断元素标签是否被渲染，而不是display:none的隐藏

        if...else... 必须连着写，中间不能其他标签元素隔开，否则else就没有效果

        

<div class="box" v-if='isShow'></div>
        <!-- v-else 条件不成立时，显示元素节点信息 -->
        <div v-else>条件不成立时显示</div>

        v-else-if 可以做多条件判断

<div v-if='num == 0'>数字0</div>
        <div v-else-if='num == 1'>数字1</div>
        <div v-else-if='num == 2'>数字2</div>
        <div v-else>条件都不满足</div>

        v-show显示隐藏：

v-show 判断当前元素显示或者隐藏，当前指令是直接在元素的style属性中加上display:none

跟v-if 的区别，一个是判断是否渲染元素，一个是加上display:none 属性

<div class="box" v-show='isShow2'></div>

        v-for 循环遍历：

        相当于for(let i = 0;i < 10;i++){} 

        v-for 列表循环数字的话，表示计数。item 表示列表循环的每一项，index 表示每一项的索引值

        注：template标签元素，在vue中一般可以用来做列表渲染/组件插槽，该标签不会在网页中显示出来

<template v-for='item in arr'>
                <div class="card">
                    <h6>{{item.title}}</h6>
                    <img :src="item.img" alt="">
                </div>
            </template>

        v-model双向绑定：

        v-model 双向数据绑定，通过双向数据绑定可以将输入框的值跟vue对象中的data属性进行双向绑定，当输入框的值改变时，data里绑定的数据也会跟着改变，一般情况下用于表单数据的绑定。

        v-model 修饰符：

                .lazy 修饰符，当表单元素失焦时，才会触发双向数据的更新

                .trim 修饰符，去除首尾两端的空格

                .number 修饰符，规定当前输入框只能输入数字，只能是第一个输入数字的时候才会生效，如果第一个为非数字类型的文本信息时候，number修饰符失效