vue知识点总结

vue知识点总结

1.vue是渐进式的javaScript框架，其作者是尤雨溪是以为华裔前google工程师，是一个动态构建用户界面，个人理解为可以在一个界面中动态展示其中某一部分的数据显示，运行，转换等功能，相比于jsp,html页面有着不可替代的作用；

2.vue的特点：

vue遵循mvvm模式，编码整洁，体积小，运行效率高，适合移动和抛出端；

（1）vue扩展插件：

​ vue-cli:vue脚手架；

​ vue-router：路由主要是用于vue内部软件的路径跳转，在router文件包下写入相应的文件路径；

​ vuex:状态管理；

​ vue-lazyload:图片懒加载；

​ vue-scroller:页面滑动相关；

​ element-ui:基于vue的UI组件库（pc端）；

​ vue-axios是一个基于Promise用于浏览器和nodejs的http客户端，相当于与后端建立连接的一个中转器，具有拦截请求和相应以及自动转换成json数据。（ajax请求）

创建新的vue使用

vue init webpack 对象名称

json的转换

let c = json.stringify(pi);
let c = json.parse(pm);

vue的导入导出：

import 属性名 from router;
export default 方法名或。。。

vue中14版本为稳定版本，主要的运行机制是以下：

npm run dev   //vue运行
npm run build //vue打包

vue中标签的属性的存在是props和v-bind;

vue中标签的事件的存在是methods和v-on；

vue中子标签的存在是slot;

resolve（xxx）等效于return “xxx”;

reject(xxxx)等效于throw “xxx”;

main.js主要是集成所有工具，集成axios,router,elementui等

vue中的router是存放项目文件的路径:

routes: [
  {
    name: 'login',
    path: '/login',
    component: () => import('@/npages/Login')
  },

此为数据数据的限制条件:

οninput="value=value.replace(/[^\d|.]/g,'')"  ?
οninput="value=value.replace(/[^\d]/g,'')"表示只能输入数字

在vue中的table-column小标签的隐藏与展示可以使用v-if标签，定义其中的某一个数据为何数，根据是否为该数实现标签的隐藏与展示 :

<el-table-column width="120px" align="left" header-align="center" label="备注" prop="notes" sortable>
</el-table-column>

字父组件之间的相互调用

在vue中通过子组件执行父组件的某一个方法可以使用如下方式：

this.$emit('row-click')

@RequestBody主要用来接收前端传递给后端的json字符串中的数据的(请求体中的数据的)；而最常用的使用请求体传参的无疑是POST请求了，所以使用@RequestBody接收数据时，一般都用POST方式进行提交。在后端的同一个接收方法里，@RequestBody与@RequestParam()可以同时使用，@RequestBody最多只能有一个，而@RequestParam()可以有多个。

注：一个请求，只有一个RequestBody；一个请求，可以有多个RequestParam。

注：当同时使用@RequestParam（）和@RequestBody时，@RequestParam（）指定的参数可以是普通元素、
数组、集合、对象等等(即:当，@RequestBody 与@RequestParam()可以同时使用时，原SpringMVC接收
参数的机制不变，只不过RequestBody 接收的是请求体里面的数据；而RequestParam接收的是key-value
里面的参数，所以它会被切面进行处理从而可以用普通元素、数组、集合、对象等接收)。
即：如果参数时放在请求体中，application/json传入后台的话，那么后台要用@RequestBody才能接收到；
如果不是放在请求体中的话，那么后台接收前台传过来的参数时，要用@RequestParam来接收，或在形参前 什么也不写也能接收。

注：如果参数前写了@RequestParam(xxx)，那么前端必须有对应的xxx名字才行(不管其是否有值，当然可以通过设置该注解的required属性来调节是否必须传)，如果没有xxx名的话，那么请求会出错，报400。

注：如果参数前不写@RequestParam(xxx)的话，那么就前端可以有可以没有对应的xxx名字才行，如果有xxx名的话，那么就会自动匹配；没有的话，请求也能正确发送。
追注：这里与feign消费服务时不同；feign消费服务时，如果参数前什么也不写，那么会被默认是@RequestBody的。

@RequestBody是通过无参构造器new的对象，然后通过set方法设置，如果在实体类中添加了有参构造器，没加无参构造器，接收参数时异常vue的前后端的数据传输一定要对应数据类型相同，后端传输的数据类型为List<…>前端的接收类型也必须一样

vue中数据类型转换：

parseInt()转为数字类型；toString()转为字符串类型

'== 和 '==='的区别

== 用来比较或者判断两者是否相等，比较时可以自动转换数据类型

=== 用来较为严格的比较，除判断数据2这是否相等 ，还会判断两者数据类型是否相同 如不相同也不会转换数据类型 。返回（false）

前端

data () {
  return {
    fileList: {
      teacherId: '',
      teacherName: '',
      teacherClass: ''
    }
  }
},
mounted: function () {
  axios.post('/select').then((response) => {
    this.fileList = response.data
    console.log(this.fileList)
  })
},

后端

@RequestMapping(value = "/select")
@ResponseBody
public List<Teacher> findteacher(){
    List<Teacher> teachers = service.getteacher();
    return teachers;
}

vue通过axios进行前后端数据调用方法时使用的是get和post方法，前后端数据之间的交互主要传输的有两种类型：body和值

get方法：

function(){
  axios.get('/select').then((response) => {
    this.fileList = response.data
    console.log(this.fileList)
  })
}

post方法：

params:{
  teachername:'',
  teacherclass:''
}
this.params = $store.params;
function(){
  axios.post('/select', params).then((response) => {
    let data = response.data
    console.log(this.data)
  }
}

post方法传一个值和一个对象时

axios.post("/saveone?state="+ this.state,this.adRow)
.then(res => {
  let data = res.data
  console.log(this.data)
}

404和500状态码的区别

404是一种HTTP状态码，指网页或文件未找到，此信息代表客户端在浏览网页时，服务器无法正常提供信息，或是服务器无法回应且不知原因。

500，是一种HTTP状态码，指内部服务器错误，说明IIS服务器无法解析ASP代码，尝试去访问一个静态网页，如果静态页面也无法访问，说明解析还没生效。

定义时间显示

可以在entity实体类里面添加

@JsonFormat(timezone = "GMT+8", pattern = "yyyy-MM-dd HH:mm")
private Date endTime;//定义时间显示

VUE父子组件传值

父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息

vue中组件之间会产生通信，父组件传递给子组件的值，子组件可以通过props获取。子组件想要改变数据（vue中是禁止子组件直接向父组件传值的），只有通过触发事件的方式告诉父组件

父子组件传值时，父组件传递的参数，数组和对象，子组件接受之后可以直接进行修改，并且会传递给父组件相应的值也会修改。如果传递的值是字符串，直接修改会报错。不推荐子组件直接修改父组件中的参数，避免这个参数多个子组件引用，无法找到造成数据不正常的原因

this.$emit('方法名'，'数据');//子组件调用父组件的使用方法