VUE day_02(7.18) 脚手架生成的项目包用法，指令，动态class，计算属性

一、项目启动前的配置准备

1.插件

 2.目录结构

 3.服务器

同 Express, 为了便于开发 所以 脚手架生成的vue项目包已经集成了自带热更新和热编译的 服务器

Vue开发必须使用项目包自带的服务器

启动服务器, 在项目包目录下执行: npm run serve

 直接访问服务器, 默认显示的是 静态文件夹public 下的 index.html

 

 4.项目启动的流程

 启动流程

localhost:8080  -> index.html -> main.js ->App.js

二、初识VUE

页面上真正显示的内容都在App.vue文件中书写，使用 http://localhost:8080/ 地址查看（确保服务器是开启的状态），所以在书写之前，先将自动生成的代码全部删除，然后使用 ‘<+回车’或者‘vbase+回车’，自动生成基础代码，建议使用‘vbase+回车’，格式更完整。

注意：在Vue2中要求，根元素div只能有一个，我将这个div看做html中的body。

模块化的旧语法：	ES6的模块化语法
--导出 module.exports ={} --导入 const express=require('express')	--导出export default{} --导入import express from 'express'

ES6的模块化导出export default{}语法中的{ }里，书写配置项：

data:放数据的	methods:放函数/放方法
vdata--生成data基础代码	vmethods--生成methods基础代码

 变化 ：以前data:{}值是对象类型，现在data的值是函数，其返回值是对象 -- 和复用性有关

 三、key

导入：当我们在vue文件中书写for循环，出现了波浪线报错，是vscode 觉得你错误，但是实际没有错。

有三种解决方案，方案1：不解决，忍耐；方案2：在设置里，关闭vetur的template报错功能，但这一方法会影响其他代码不推荐 ；方案3：添加key属性。

 

 需要注意的是：

1.names数组如果后面没有增删需求，key没有任何性能提升作用 

2.key的值不允许重复，唯一标识 

3.理论上说，不能用序号做标识，因为序号会因为序号的增删而变化，用数据本身自带的唯一标识，例如数据库查询出来的 主键id

这也是面试常考问题：key属性的作用是什么？----加标记

有key和没有key要在数组内容有变化的前提时加以区分：

没有key	有key
尽量复用已存在的DOM元素, 按照顺序修改其变化的属性	如果唯一标识相同的元素, 则直接复用. 对于不存在的元素 再生成. 提高复用效率
例子: 把瓶子的水都倒掉, 挨个装新的	例子: 标签相同的就直接喝.. 对于新增的才去开瓶新的

四、数据双向绑定

v-pre：让标签内容原样输出，不做解析

 v-model：双向数据绑定

方向1：数据会绑定到元素上 ；方向2：用户修改元素的值，会更新到相关的数据上

在表单元素（单选.多选.下拉.文本.. 用户可以操作）中用的比较多

没有定义value值的单选框返回布尔值，有value的值返回value，多选框返回的值的需要用数组来存。

 

 五、动态class

新语法，动态class，书写格式 :class="{样式名：true/false}"，实际就是通过赋予标签class，以更改样式，值是对象类型，true就生效，false就不生效 。

 

 练习：当输入框失去焦点时，检查输入框内容是否为手机号码格式，如果不正确则显示错误信息

 练习：邮箱练习

 

页数  作者赋予for循环 直接遍历数字的能力 

v-for, 支持直接遍历数字 v-for="n in 数字"

 六、计算属性

新的配置项: computed, 凡是书写在这个配置项中的方法, 都会被自动转换成计算属性.  使用时不需要() 就能自动触发；注意: 不适合绑定给事件.  因为事件需要手动触发。

 

 

 

 

总结

• 脚手架生成的项目包用法

  • 项目包必须用 单独的vscode 开启. 否则会影响代码提示
  • 需要安装插件 才会有相关提示
  • 启动方式: npm run serve
  • 通过在浏览器中输入地址来访问服务器 localhost:8080

• 指令

  • v-pre: 原样输入标签中的内容

  • v-model: 双向数据绑定, 适合表单元素

    • 方案1: 数据绑定给元素
    • 方向2: 用户操作元素后, 会自动更改绑定的数据

• 动态class :class="{样式名: true/false}" 真生效, 假不生效

• v-for, 支持直接遍历数字 v-for="n in 数字"

• 计算属性: computed

  • 放在这里的方法, 会自动添加 get , 变化为计算属性. 使用时不需要()
  • 注意: 不适合事件绑定的方法, 因为这些方法不是自动触发 需要事件触发